CSS3ボックスシャドウを使用した10のクリエイティブテクニック

私たちはここ数年で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。位置：相対; #bar ul margin：0px 15px;フォントファミリー：Candara、Calibri、 "Segoe UI"、Segoe、Arial、sans-serif。 #bar ul li 背景：＃22385a;表示ブロック;フォントサイズ：1.2em。位置：相対;フロート：左。 #bar ul li a display：block;色：＃fffff7;行の高さ：45ピクセル。フォントの太さ：太字。パディング：0px 10px。テキスト装飾：なし。 ｚ指数：９９９９。 #bar ul li a：ホバー、＃bar ul li a.selected color：＃365977;背景：#fff;ボーダー左上半径：3px。 border-top-right-radius：3ピクセル。 -webkit-border-left-radius-3px; -webkit-border-right-radius：3px; -moz-border-radius-topleft：3px; -moz-border-radius-topright：3ピクセル。 #bar ul .subnav display：block;左：14ピクセル。上：48ピクセル。 zインデックス：-1。幅：500ピクセル。位置：絶対高さ：90ピクセル。ボーダー：1ピクセルソリッド＃edf0f3。ボーダートップ：0;パディング：10px 0 10px 10px。オーバーフロー：隠れています。 -moz-border-radius-bottomleft：3ピクセル。 -moz-border-radius-bottomleft：3ピクセル。 -webkit-border-bottom-left-radius：3px; -webkit-border-bottom-right-radius：3px; border-bottom-right-radius：3ピクセル。 border-bottom-right-radius：3ピクセル。 -moz-box-shadow：0px 2px 7px rgba（0,0,0,0.25）; -webkit-box-shadow：0px 2px 7px rgba（0,0,0,0.25）。ボックスシャドウ：0px 2px 7px rgba（0,0,0,0.25）。 -ms-filter： "progid：DXImageTransform.Microsoft.Shadow（強度= 3、方向= 180、色="＃333333 "）"; filter：progid：DXImageTransform.Microsoft.Shadow（強度= 3、方向= 180、色= "＃333333"）;

ナビゲーションリンクは、選択時またはマウスのホバー時に色が変わるようにスタイル設定できます。また、リンクとドロップダウンメニューボックスの上に丸みのある境界線を追加しています。これは、ハードエッジ全体ではなく、より良い感じを与えます。私も利用しています -ミリ秒フィルタ そして フィルタ Internet Explorer専用のプロパティ.

フルナビゲーションシステムを設定した場合は、表示設定を[なし]に変更し、ページが読み込まれたらメニューを非表示にすることができます。その後、jQueryを使用して、.hover（）イベントをターゲットにして、更新されたコンテンツを含むサブナビゲーションバーを表示できます。.

デモ

3.光沢のある影ボタン

これは、ページ上で動的に表示されるという理由だけで、おそらく私が作成するお気に入りのスタイルの1つです。あなたが言うことができないならば、これはあなたが最初にログインした後にYouTubeのホームページにある小さな青いボタンです。.

ブルース色：#fff;幅：190ピクセル。高さ：35ピクセル。カーソル：ポインタ。フォントファミリー：Arial、Tahoma、Sans-Serif。フォントサイズ：1.0em。フォントの太さ：太字。 -moz-border-radius：2ピクセル。 -webkit-border-radius：2ピクセル。 border-radius：2ピクセル。ボーダー幅：1px。 border-color：＃0053a6＃0053a6＃000。背景色：＃6891e7。背景画像：-moz-linear-gradient（top、＃4495e7 0、＃0053a6 100％）;背景画像：−ｍｓ−線形 - 勾配（上、＃４４９５ｅ７ ０、＃0053ａ６ １００％）。背景画像：-o-linear-gradient（上、＃4495e7 0、＃0053a6 100％）。 background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0、＃4495e7）、カラーストップ（100％、＃0053a6））。 background-image：-webkit-linear-gradient（トップ、＃4495e7 0、＃0053a6 100％）;背景画像：線形勾配（一番下まで、＃4495e7 0、＃0053a6 100％）。 text-shadow：1ピクセル1ピクセル0 rgba（0、0、0、.6）; -moz-box-shadow：インセット0 1px 0 rgba（256、256、256、.35）。 -ms-box-shadow：インセット0 1px 0 rgba（256、256、256、.35）。 -webkit-box-shadow：インセット0 1px 0 rgba（256、256、256、.35）。ボックスシャドウ：インセット0 1px 0 rgba（256、256、256、.35）。 filter：progid：DXImageTransform.Microsoft.Gradient（GradientType = 0、StartColorStr =＃4495e7、EndColorStr =＃0053a6）; ：blue：hover border-color：＃002d59＃002d59＃000; -moz-box-shadow：インセット0 1px 0 rgba（256、256、256、0.55）、1px 1px 3px rgba（0、0、0、0.25）。 -ms-box-shadow：インセット0 1px 0 rgba（256、256、256、0.55）、1px 1px 3px rgba（0、0、0、0.25）。 -webkit-box-shadow：インセット0 1px 0 rgba（256、256、256、0.55）、1px 1px 3px rgba（0、0、0、0.25）。ボックスシャドウ：インセット0 1px 0 rgba（256、256、256、0.55）、1px 1px 3px rgba（0、0、0、.25）。 filter：progid：DXImageTransform.Microsoft.Gradient（GradientType = 0、StartColorStr =＃3a8cdf、EndColorStr =＃0053a6）;背景画像：-moz-linear-gradient（上、＃3a8cdf 0、＃0053a6 100％）。背景画像：−ｍｓ−線形勾配（上、＃３ａ８ｃｄｆ ０、＃0053ａ６ １００％）。背景画像：-o-linear-gradient（上、＃3a8cdf 0、＃0053a6 100％）。 background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0、＃3a8cdf）、カラーストップ（100％、＃0053a6））。 background-image：-webkit-linear-gradient（トップ、＃3a8cdf 0、＃0053a6 100％）;背景画像：線形勾配（下へ、＃3a8cdf 0、＃0053a6 100％）。 青：アクティブborder-color：＃000＃002d59＃002d59; -moz-box-shadow：インセット0 1px 3px rgba（0,0,0,0.2）、0 1px 0 #fff; -ms-box-shadow：インセット0 1px 3px rgba（0,0,0,0.2）、0 1px 0 #fff; -webkit-box-shadow：inset 0 1ピクセル3ピクセルrgba（0,0,0,0.2）、0 1ピクセル0 #fff;ボックスシャドウ：インセット0 1px 3px rgba（0,0,0,0.2）、0 1px 0 #fff; filter：progid：DXImageTransform.Microsoft.Gradient（GradientType = 0、StartColorStr =＃005ab4、EndColorStr =＃175ea6）;背景画像：-moz-linear-gradient（トップ、＃005ab4 0、＃175ea6 100％）;背景画像：−ｍｓ−線形 - 勾配（上、＃００５ａｂ４０ ０、＃１７５ｅａ６ １００％）。背景画像：-o-linear-gradient（上、＃005ab4 0、＃175ea6 100％）。 background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0、＃005ab4）、カラーストップ（100％、＃175ea6））。 background-image：-webkit-linear-gradient（トップ、＃005ab4 0、＃175ea6 100％）;背景画像：線形勾配（下へ、＃005ab4 0、＃175ea6 100％）。

ボタンコード全体を見るのは大変ですが、試しています できるだけ多くのブラウザをサポートする. MS Internet Explorer 7+のサポートを伴うテキスト影とボックス影があります。また、設定しています 背景画像 多数のベンダー固有のプレフィックスにわたるCSS3グラデーションのあるプロパティ.

しかし、あなたがこのデザインスタイルを愛するならば ホバーとアクティブな状態もあなたの注意を引くでしょう. 背景のグラデーションを少し暗く表示するように更新しながら、基本的に境界線を更新して内側にいくつかの影を含めるようにしています。.

ボタンには画像がないので、16進値を更新してこれを変形して、実質的にあらゆる配色にブレンドすることができます。.

デモ

4.通知フライアウトメニュー

私はFacebookの大手ユーザーではありませんが、再設計からいくつかのUIテクニックに気付いたことがあります。このフライアウトメニューは、あなたの通知やホームページにある友達の要求ポップアップと比較することができます。.

.フライアウト幅：310px;マージントップ：10px。フォントサイズ：11ピクセル。位置：相対;フォントファミリー： 'Lucida Grande'、Tahoma、Verdana、Arial、sans-serif。背景色：ホワイト。パディング：9px 11px。背景：rgba（255、255、255、0.9）。ボーダー：1ピクセルソリッド＃c5c5c5。 -webkit-box-shadow：0 3px 8px rgba（0、0、0、.25）; -moz-box-shadow：0 3ピクセルx 8ピクセルrgba（0、0、0、.25）。ボックスシャドウ：0 3px 8px rgba（0、0、0、.25）; -webkit-border-radius：3px。 -moz-border-radius：3ピクセル。 border-radius：3ピクセル。 #tip background-image：url（ 'images / tip.png'）; background-repeat：繰り返しなし。背景サイズ：自動。高さ：11ピクセル。位置：絶対上：-11ピクセル左：25ピクセル。幅：20ピクセル。  h2 テキスト変換：大文字。カラー：＃666。フォントサイズ：1.2em。パディングボトム：5px。マージンボトム：12px。ボーダーボトム：1px実線#dcdbda。フライアウトp padding-bottom：25px;フォントサイズ：1.1em。色：＃222。

ここに表示するための新しいたくさんの新しいコードはありません。私は小さいを使っています .先端 ツールチップ三角形を追加するための内部span要素を持つクラス。純粋なCSS3三角形を作成することは可能ですが、あなたが想像するように、この方法は容易ではありません。あなたがこの方法を好めばそれは一緒に何かをハッキングする価値があるかもしれません。しかしCSS3の回転プロパティはどこでもサポートされているわけではありません。一方、画像はフォールバックメソッドを必要としません.

デモ

5.アップルページラッパー

あなたがAppleの公式ウェブサイトで見つけることができるとてもたくさんの印象的なCSS3箱影があります。以下のこの例は、いくつかの列スパンを持つ小さなボックスコンテナです。 Appleのレイアウトを見てみると、多数のラッパーボックスで構成されているページの多くに気付くでしょう。.

.applewrap 幅：100％。表示ブロック;高さ：150ピクセル。背景：ホワイト。ボーダー：1pxソリッド。 border-color：＃e5e5e5＃dbdbdb＃d2d2d2; -webkit-border-radius：4ピクセル。 -moz-border-radius：4ピクセル。 border-radius：4ピクセル。 -webkit-box-shadow：rgba（0、0、0、0.3）0 1ピクセル3ピクセル。 -moz-box-shadow：rgba（0,0,0,0.3）0 1ピクセル3ピクセル。ボックスシャドウ：rgba（0、0、0、0.3）0 1px 3px。 .applewrap .col float：left;;ボックスサイズ：ボーダーボックス。幅：250ピクセル。高さ：150ピクセル。パディング：16px 7px 6px 22px。フォント：12px / 18px "Lucida Grande"、 "Lucida Sans Unicode"、Helvetica、Arial、Verdana、sans-serif。カラー：＃343434。右ボーダー：1px solid #dadada;

さまざまな幅と高さのコンテンツボックスで分割された同様のページをまとめることができます。このデモにいくつかのコラムを入れましたが、それは必ずしも必要なフォーマット手法ではありません。ボックスの影は、白/灰色の背景に最も適しています。しかし、私はどんな明るい色の上でも表示することはかなり良く見えるだろうと思います.

デモ

6.アップルコンテンツボックス

アップルのWebサイトにあるこの他のスタイルのコンテンツボックスは、主にカラムデザインに使用されます。これらは主に、取引やその他の関連情報を紹介するページの下部にあります。ボックスの影が上から下に向かって表示される、まったく異なるデザインスタイルです。.

.applebox width：auto;高さ：85ピクセル。ボックスサイズ：ボーダーボックス。背景：＃f5f5f5;パディング：20px 20px 10px。マージン：10px 0 20px。ボーダー：1px solid #ccc; border-radius：4ピクセル。 -webkit-border-radius：4ピクセル。 -moz-border-radius：4ピクセル。 -o-border-radius：4ピクセル。 -webkit-box-shadow：インセット0px 1px 1px rgba（0、0、0、.3）; -moz-box-shadow：インセット0px 1px 1px rgba（0、0、0、.3）;ボックスシャドウ：インセット0px 1px 1px rgba（0、0、0、.3）。 .applebox .col width：140px;フロート：左。マージン：0 0 0 30ピクセル。

このコードを追いかけて別のdivコンテナにコピーするのが難しすぎるとは思わない。適用している唯一のボックスシャドウは使用しています 差し込み rgbaのアルファ透明色コードを使って。そのため、ドロップシャドウは純粋な黒に設定されていますが、不透明度は約30％しか表示されていません。.

デモ

7.注目のリンク

これはおそらくAppleの現在のWebサイトから私のお気に入りのボックスシャドウスタイルです。この手法のライブデモスタイルは、一連のフローティングリンクボックスとともにiCloudページにあります。.

.アップルフィーチャー身長：150px;マージン：8px。垂直方向の位置合わせ：上;表示：インラインブロック。 display：block;を適用します。幅：168ピクセル。高さ：140ピクセル。ボーダー：1px solid #ccc;カラー：＃333。テキスト装飾：なし。フォントの太さ：太字。行の高さ：1.3em。背景：＃f7f7f7; -webkit-box-shadow：インセット0 1px 2px rgba（0、0、0、.3）; -moz-box-shadow：インセット0 1px 2px rgba（0、0、0、.3）;ボックスシャドウ：インセット0 1px 2px rgba（0、0、0、.3）; -webkit-border-radius：4ピクセル。 -moz-border-radius：4ピクセル。 border-radius：4ピクセル。 a：hover background：#fafafa;背景：-webkit-gradient（線形、0％0％、0％100％、（#fff）から（＃f7f7f7）まで）;背景：-moz-linear-gradient（100％100％90度、＃f7f7f7、#fff）; -webkit-box-shadow：インセット0 1px 2px rgba（0,0,0、.3）; -moz-box-shadow：インセット0 1px 2px rgba（0,0,0、.3）; box-shadow：インセット0 1px 2px rgba（0,0,0、.3）; -webkit-border-radius：4ピクセル。 -moz-border-radius：4ピクセル。 border-radius：4ピクセル。 img display：block;を適用します。マージン：26px auto 4px。 a h4 display：block;を適用します。幅：160ピクセル。フォントサイズ：1.3em。フォントファミリー：Arial、Tahoma、Sans-Serif。カラー：＃646464。 text-align：center。

これらのおすすめのリンクは固定幅に設定されており、明確なアイコンと表示テキストが含まれています。 Appleの例では、前のコンテンツボックスで見たのと同じようなボックスの影を使用しています。しかしながら ボックス全体をリンクとしてアクティブにできるようになりました 両方を含みます ホバー そして ：アクティブ 州。このリンクボックスにはたくさんの柔軟性があるので、ソースコードで試してみるべきです。.

高さ/幅を短くして、はるかに小さいリンクのリストを作成することは可能です。これらは、記事内の章やページの集まりでも、リンクアイコンでサブメニューを制限するようにすることもできます。正直なところ、Webデザイナーとしてどれだけの力があるのかを示す、新しいCSS3テクニックの素晴らしいセットです。.

デモ

8.フレーム画像

この例に灰色の背景を追加したので、ボックスのシャドウスタイルをよりはっきりと見ることができます。このボックスはwordpress.comの特集プレビューショットと似ていますが、ソースコードにもう少し詳しく説明します。.

.wpframe 背景：#fff; border-radius：2ピクセル。 -webkit-border-radius：2ピクセル。 -moz-border-radius：2ピクセル。パディング：8px。 -webkit-box-shadow：1px 2px 1px＃d1d1d1; -moz-box-shadow：1px 2px 1px＃d1d1d1;ボックスシャドウ：1px 2px 1px＃d1d1d1;

画像は両側に小さなパディングが与えられているので、このフレームは大きな白いボーダーとして現れます。あなたはいつでも背景色を更新することができます、あるいは背景から画像を分けるために小さな外枠を追加することさえできます。しかし、このかなり単純化されたスタイルのセットは、さまざまなボックスシャドウテクニックに変えることができます。コードを試して、自分のWebサイトでイメージデザインを改善する方法を確認してください。.

デモ

輝く入力フィールド

Pinterestのログインページに何度かアクセスした後、このアイデアを得ました。それらのアニメーションスタイルは実際には外側とインセットの両方で、複数のインラインボックスの影のいくつかの雄弁な例を表示します.

.formwrap display：block;マージンボトム：15px。 .formwrap label display：inline-block;;幅：80ピクセル。フォントサイズ：11ピクセル。フォントの太さ：太字。カラー：＃444。フォントファミリー：Arial、Tahoma、Sans-Serif。 .formwrap .shadowfield 位置：相対;幅：250ピクセル。フォントサイズ：17px。 font-family： "Helvetica Neue"、Arial、Sans-Serif。フォントの太さ：普通。背景：＃f7f8f8;カラー：＃7c7c7c。行の高さ：1.4。パディング：6px 12px。概要：なし。遷移：すべて0.2のイーズインアウト0。 -webkit-transition：すべて0.2のイーズインアウト0。 -moz-transition：すべて0.2のイーズインアウト0。ボーダー：1px solid＃ad9c9c。ボーダー半径：6px 6px 6px 6px。ボックスシャドウ：0 1px rgba（34、25、25、0.2）インセット、0 1px #fff。 .formwrap .shadowfield：focus border-color：＃930;背景：#fff;カラー：＃5d5d5d。ボックスシャドー：インセット0 1px rgba（34、25、25、0.2）、0 1px rgba（255、255、255、0.6）、0 0 7px rgba（235、82、82、0.5）。 −ｍｏｚ − ｂｏｘ − ｓｈａｄｏｗ：インセット０ １ｐｘ ｒｇｂａ（３４、２５、２５、０．２）、０ １ｐｘ ｒｇｂａ（２５５、２５５、２５５、０．６）、０ ０ ７ｐｘ ｒｇｂａ（２３５、８２、８２、０．５）。 -webkit-box-shadow：インセット0 1px rgba（34、25、25、0.2）、0 1px rgba（255、255、255、0.6）、0 0 7px rgba（235、82、82、0.5）。

初期のスタイルはとても魅力的ですが、私は 各入力フィールドに注目したときのトランジション効果. あなたはそれらの間でタブ付けすることができて、そして非常に多くの特性における直接的な違いを見ることができます。外部グローボックスの影が、更新された挿入影とともに適用されます。また 特定の入力にフォーカスを合わせるとテキストの色が明るくなり、デフォーカスするとテキストの色が薄くなります。.

これらの効果の1つをコピーしても、フォームフィールドのユーザーエクスペリエンスが大幅に向上します。フォームがほとんど使用できなくなるまで、行き過ぎすぎないように注意してください。しかしほとんどの訪問者はまた相互作用およびあなたのウェブサイトとのそれ以上の関与を促進する楽しい審美的な効果を楽しむでしょう.

デモ

10.弾性シャドウボタン

これらのユニークな影付きボタンは、ホバー中やアクティブ状態の間はゆっくりとした遷移でスタイルされます。 Mozillaのホームページにも同様の例があります。 “Firefoxをダウンロードする” ボタン。いくつかの ボックスシャドウ プロパティは実際には3つの異なる影を1つのコマンドにまとめます。.

.blu-btn display：inline-block; -moz-border-radius：.25em; border-radius：.25em。 -webkit-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.2）; -moz-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.2）; box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.2）;背景色：＃276195。背景画像：-moz-linear-gradient（＃3c88cc、＃276195）;背景画像：-ms-linear-gradient（＃3c88cc、＃276195）; background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃3c88cc）、カラーストップ（100％、＃276195））。 background-image：-webkit-linear-gradient（＃3c88cc、＃276195）;背景画像：-o-linear-gradient（＃3c88cc、＃276195）; filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃3c88cc'、endColorstr = '＃276195'、GradientType = 0）; -ms-filter： "progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃3c88cc'、endColorstr ="＃276195 "、GradientType = 0）";背景画像：線形グラデーション（＃3c88cc、＃276195）。ボーダー：0。カーソル：ポインタ。色：#fff;テキスト装飾：なし。 text-align：center。フォントサイズ：16px。パディング：0px 20px。高さ：40ピクセル。行の高さ：40ピクセル。最小幅：100ピクセル。 text-shadow：0 1px 0 rgba（0,0,0,0.35）;フォントファミリー：Arial、Tahoma、Sans-Serif。 -webkit-transition：すべて線形0.2 -moz遷移：すべて線形0.2 -o-遷移：すべて線形0.2。 −ｍｓ−遷移：全て線形０．２ｓ。遷移：すべて線形.2s .blu-btn：ホバー、.blu-btn：focus -webkit-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、挿入0 -2px 0 0 rgba （0,0,0,0.3）、インセット0 12px 20px 2px＃3089d8。 -moz-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.3）、インセット0 12px 20px 2px＃3089d8;ボックスシャドウ：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.3）、インセット0 12px 20px 2px＃3089d8;  .blu-btn：アクティブ-webkit-box-shadow：インセット0 2px 0 0 rgba（0,0,0,0.2）、インセット0 12px 20px 6px rgba（0,0,0,0.2）、インセット0 0 2px 2px rgba（0,0,0,0.3）; -moz-box-shadow：インセット0 2px 0 0 rgba（0,0,0,0.2）、インセット0 12px 20px 6px rgba（0,0,0,0.2）、インセット0 0 2px 2px rgba（0,0、 0,0.3）;ボックスシャドウ：インセット0 2px 0 0 rgba（0,0,0,0.2）、インセット0 12px 20px 6px rgba（0,0,0,0.2）、インセット0 0 2px 2px rgba（0,0,0,0.3） ;  .grn-btn display：inline-block; -moz-border-radius：.25em; border-radius：.25em。 -webkit-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.2）; -moz-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.2）; box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.2）;背景色：＃659324。背景画像：-moz-linear-gradient（＃81bc2e、＃659324）; background-image：-ms-linear-gradient（＃81bc2e、＃659324）; background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃81bc2e）、カラーストップ（100％、＃659324））; background-image：-webkit-linear-gradient（＃81bc2e、＃659324）;背景画像：-o-linear-gradient（＃81bc2e、＃659324）; filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃81bc2e'、endColorstr = '＃659324'、GradientType = 0）; -ms-filter： "progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃81bc2e'、endColorstr ="＃659324 "、GradientType = 0）";背景画像：線形グラデーション（＃81bc2e、＃659324）。ボーダー：0。カーソル：ポインタ。色：#fff;テキスト装飾：なし。 text-align：center。フォントサイズ：16px。パディング：0px 20px。高さ：40ピクセル。行の高さ：40ピクセル。最小幅：100ピクセル。 text-shadow：0 1px 0 rgba（0,0,0,0.35）;フォントファミリー：Arial、Tahoma、Sans-Serif。 -webkit-transition：すべて線形0.2 -moz遷移：すべて線形0.2 -o-遷移：すべて線形0.2。 −ｍｓ−遷移：全て線形０．２ｓ。遷移：全て線形の０．２ｓ。  .grn-btn：ホバー、.grn-btn：focus -webkit-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0） 、０．３）、インセット０ １２ｐｘ ２０ｐｘ ２ｐｘ＃８５ｃａ２６。 -moz-box-shadow：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.3）、インセット0 12px 20px 2px＃85ca26;ボックスシャドウ：0 2px 0 0 rgba（0,0,0,0.1）、インセット0 -2px 0 0 rgba（0,0,0,0.3）、インセット0 12px 20px 2px＃85ca26;  .grn-btn：アクティブ-webkit-box-shadow：インセット0 2px 0 0 rgba（0,0,0,0.2）、インセット0 12px 20px 6px rgba（0,0,0,0.2）、インセット0 0 2px 2px rgba（0,0,0,0.3）; -moz-box-shadow：インセット0 2px 0 0 rgba（0,0,0,0.2）、インセット0 12px 20px 6px rgba（0,0,0,0.2）、インセット0 0 2px 2px rgba（0,0、 0,0.3）;ボックスシャドウ：インセット0 2px 0 0 rgba（0,0,0,0.2）、インセット0 12px 20px 6px rgba（0,0,0,0.2）、インセット0 0 2px 2px rgba（0,0,0,0.3） ;

私はホバーとアクティブなボタンの状態で200ミリ秒間フルトランジションを使用しています。これらのスタイルの優れている点は、クリック可能なほとんどの要素に適用できることです。ボタン、アンカーリンク、フォーム要素、またはあなたが適切だと思う何か他のもの - あなたのデザインをオーバーロードしないようにこれらのスタイルはまばらに使われるべきですが.

これらのボタンは、Mozillaが使用するのと同じ方法で最もよく保存されます。あなたが景品のダウンロードのためのボタンを持っているあなたのブログにこれらのスタイルを添付しなさい. ユーザーは独自のインターフェースとやり取りするのが好きです そしてこれは多くの場合、クリックスルー評価の割合がはるかに高いことになります。.

デモ

最終的な考え

このボックスシャドウテクニックの集まりからあなたがいくつかの素晴らしい教訓を奪うことができると思います。フォーム、モーダルボックス、ボタン、ツールバー、さらにはWebサイト全体のレイアウトなど、さまざまな分野に集中できます。.

あなた自身のウェブサイトの一部にこれらの影の効果のどれでも自由に実行してください。他にもたくさんのテクニックがありますが、このコレクションは初心者にも上級開発者にも最適です。また、記事についての提案や質問がある場合は、以下のコメントディスカッションエリアで私たちと共有することができます。.