私たちはここ数年でCSS3のWeb開発において膨大な数の進歩を見てきました。インターネットのいたるところで人気のあるWebサイトでは、角の丸みやモバイル対応のメディアクエリなど、多くの独自のスタイルが取り入れられ始めています。しかしさらに重要なことに、これはほんの数分でプロトタイプを作成するためのクリエイティブなインターフェースへの扉を開きました. この記事では共有したい 鮮やかなCSS3ボックスシャドウデザインに関連する10のコードスニペット. コードのしくみと、各ボックスの影を自分のWebサイトに実装する方法について説明します。. これらのスタイルはすべて他の人気のあるWebサイトからの素晴らしいデザインの影響によるものです。これは、現在のWeb開発者がWebデザインの将来に影響を与える傾向をどのように構築しているかを示す良い例です。. 1.固定トップツールバー ルーマニアのソーシャルメディアサービスTriluliluは彼らのウェブサイト全体の周りに浮かぶ一番上のツールバーを使います。これはを使用して素早く作成できます。 ポジション：固定。 任意のトップバー要素のプロパティ。しかし、この追加のボックスの影はまったく新しいレベルに効果をもたらします. #banner position：fixed;高さ：60ピクセル。幅：100％。トップ：0。左：0; border-top：5ピクセルの実線＃a1cb2f;背景：#fff; -moz-box-shadow：0 2ピクセル3ピクセル0ピクセルrgba（0、0、0、0.16）。 -webkit-box-shadow：0 2ピクセル3ピクセル0ピクセルrgba（0、0、0、0.16）。ボックスシャドウ：0 2ピクセル3ピクセル0ピクセルrgba（0、0、0、0.16）。 z指数：999999。 #banner h1 行の高さ：60px; box-shadowプロパティが実際にはかなり単純な値の組み合わせで設定されていることに気付くでしょう。影はボックスの下に落ち、左右に3ピクセルずつぼかします。. 我々は使用することができます rgba（） シャドウにわずかな不透明度を適用して、要素が暗すぎないようにする方法。それは確かにあなたの訪問者の注意を引くでしょう微妙な追加です. デモ 2.サブナビゲーションドロップダウン これはスカラードロップダウンサブメニューに適用された別のクリエイティブボックスシャドウメソッドです。あなたがトップの主要なナビゲーションリンクのそれぞれの上にホバーするとき、同様の効果がEntrepreneurに見られることができます。これは間違いなく設定するにはもう少し注意が必要ですが忍耐に値する. #bar display：block;高さ：45ピクセル。背景：＃22385a。パディングトップ：5px。マージンボトム：150px。位置：相対;...
