CSS3のbox-shadowで影をつけてみる

/ Web / Comment[0]
CSS3のbox-shadowではdivやimgなどに影をつけることが出来ます。IEは非対応です。
例えば、こんなCSSを書いておいて
.shadow { box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 2px; }

タグのclassにshadowとつけるだけで次のような影が出来ます。
<div class="shadow">こんな感じ</div>

こんな感じ


値を分解して説明しますと
「 rgba(0,0,0, 0.5) 」 RGBカラーコード
「 rgba(0, 0, 0, 0.5) 」 影の透過度(1が無透過)
0px 0px 6px 2px; 」 影の位置(x,y)
「 0px 0px 6px 2px; 」 影のぼけている部分のサイズ, 影の広がりサイズ
あまり使いませんが、最後(;の前)にinsetとつけると内側に影が付きます。


.shadow { box-shadow: rgba(0, 0, 0, 0.5) 2px 4px 6px 2px; }

このように影の位置をずらすことも出来ます。
もっと影っぽくなりましたね。



こんな便利なジェネレーターもあるので活用させてもらいましょう。
CSS3 box-shadowジェネレーター
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可