1

影付きのポップアップ効果を与えるにはどうすればよいですか? さまざまな Web サイト (例: https://www.smartrecruiters.com ) でよく見かけます。コンテンツ ホルダーの端に、この暗い影のポップアップ効果があります。

ポップアップ効果

それの特定の名前はありますか？体の両側でこの効果を生み出すにはどうすればよいですか?

要素のスタイルは大丈夫ですか、それともすべてのスタイルを CSS に含めることをお勧めしますか?

4

5 に答える 5

4

add this to your css

yourClass{box-shadow:2px 3px 5px #999;}

you can play around with values and color code to get your desired result

于 2013-07-03T20:01:56.553 に答える
0

あなたのサイトが 8 以前のようなブラウザーで一般的に使用される場合は、Photoshop で画像の背景を作成し、ドロップ シャドウを追加して、.png 24 として保存する必要があります。

それは人口統計と、それを配置する要素によって異なりますが、多くの場合、ドロップ シャドウ、または CSS で呼び出されるボックス シャドウは、Photoshop で簡単に作成でき、ボックスが表示される古いブラウザーをカバーします。影はサポートされていない場合があります。

于 2013-07-05T19:45:25.110 に答える
0

探しているのは、box-shadowと呼ばれる CSS レベル 3 のプロパティです。約 83% でサポートされています。

iOS (6 を含む) の Safari は、入力要素に box-shadow を適用できません。(解決策: -webkit-appearance: none; を入力要素に追加します。)

Android 2.3 のデフォルト ブラウザは 0px の値を認識していないようです。例 -webkit-box-shadow: 5px 1px 0px #f04e29; 動作しませんが、 -webkit-box-shadow: 5px 1px 1px #f04e29 動作します!

これはあなたの例のcssで、コピーして貼り付けることができました。

.baseWrapper {
    /* not relevant, just copied */
    width:960px;min-height:200px;margin:-5px auto 0;border:0;background:#fff;
    -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
    /* Le box-shadow */
    -webkit-box-shadow:2px 2px 6px 1px #d2d2d2;
    -moz-box-shadow:2px 2px 6px 1px #d2d2d2;
    box-shadow:2px 2px 6px 1px #d2d2d2;
    /* some Microsoft filter could be missing here .. */
    }

興味がある場合は、 http://tests.themasta.com/blogstuff/boxshadowdemo.htmlでさまざまな効果を確認してください。

于 2013-07-05T19:57:25.867 に答える