タグ: CSS サンプル

box-shadowの使い方

書式

box-shadow: 左右  上下 ぼかし 広がり 色 内側指定

上下、左右は伸ばす方向と距離で、"px"にて必ず指定します。上下は"+"が下、"-"は上方向です。左右は右が"+"、左は"-"となります。ご術死ますが、例えば右下に影を伸ばした時は"5px 5px"、左上に影を伸ばしたい時は"-5px -5px"となります。

ぼかしはぼかしの距離、単位は"px"です。どれだけぼかしを付けるかを指定します。影に指定した距離にぼかしの距離が加算されます。つまり、10pxの陰に10pxのぼかしを付けると合計20pxの影が付けられます。広がりはぼかしの広がりで単位はpxです。色は影の色を指定してあげます。内側指定は、ボックスの内側に影を使用したい場合に"inset"を指定してあげます。


シンプルな影の作成

CSS:

.Shadow_RightDown{ /*右下へ影を伸ばす*/
box-shadow: 5px 5px;}

.Shadow_LeftUpper{ /*左上へ影を伸ばす*/
box-shadow: -5px -5px;}

.Shadow_RightUpper{ /*右上へ影を伸ばす*/
box-shadow: 5px -5px;}

.Shadow_RightDown{ /*左下へ影を伸ばす*/
box-shadow: -5px 5px;}

1つ目の値が左右、2つ目の値が上下で、pxで必ず指定します。正の値は左右は"右"、上下は"下"へ負の値は左右は"左"、上下は"上"へと影が伸びます。


影にぼかしを付ける

CSS:

.Shadow_Blur{
box-shadow:5px 5px 3px;}

.Shadow_BlurAllaround{/*全方位ぼかし*/
box-shadow:0px 0px 5px;}

影をぼかしたいときには3つめの値に、ぼかす距離をpx単位で指定します。ぼかす必要が無い時は省略することができます。これは、影を指定した距離から、更に上下左右へぼかしが加算されます。つまり、10pxの影に10pxのぼかしを加えると20pxの影が作成されます。そして、0pxの影にぼかしを指定してあげることで、後光がさしているかのような影を作る事ができます。


影に広がりをつける

CSS:

.Shadow_Adjust{
box-shadow: 7px 6px 3px -5px;}

.Shadow_Allaround{/*全方位に影を付ける*/
box-shadow: 0px 0px 0px 10px;}

.Shadow_Allaround_Blur{/*全方位に影とぼかしを付ける*/
box-shadow: 0px 0px 5px 10px;}

広がりは作った影をそのまま縮小したり、拡大したりできるという感じです。正の値を指定すると影は広がり、負の値を指定すると、影は小さくなります。広がりが不要な場合は指定する必要はありません。書式上、広がりを指定するときは必ずぼかしも指定する必要があります。ぼかしが不要なら、0pxのぼかしを指定してあげてください。広がりもぼかし同様で、上下左右に広がります。これを応用すれば、上下左右に影を作る事ができます。


影の色を変更する

CSS:

.RedShadow_Adjust{/*赤い影を作る*/
box-shadow: 5px 5px red;}

.RedShadow_Blur{/*ぼかしまで赤い影を作る*/
box-shadow: 5px 5px 3px red;}

.RbgaShadow_Blur{ /*RBGAでも指定が可能*/
box-shadow: 5px 5px 3px rgba(255,126,0,0.8);}

色は色コードや色名を指定する事で影の色を変更することができます。色についてはここでは割愛しますが、RBGAを指定することで半透明の影を作る事もできます。


影を内向きにする

CSS:

.InsideShadow_LeftUpper{/*左上に影を作る*/
box-shadow:5px 5px inset;}

.InsideShadow_RightBottom{/*右下に影を作る*/
box-shadow:-5px -5px inset;}

.InsideShadow_LeftBottom{/*左下に影を作る*/
box-shadow:5px -5px inset;}

.InsideShadow_RightUpper{/*右上に影を作る*/
box-shadow:-5px 5px inset;}


.RedInsideShadow{/*内向きの赤い影を作る*/
box-shadow:5px 5px red inset;}

ボックスの内側に影をつけるときは一番最後にinsetを指定してあげます。これも特に必要でない場合は指定する必要はありません。左右、上下についても外側に指定するときとルールは同じです。


応用編

CSS:

.Shadow_pattern1{/*赤い影に青いぼかし*/
box-shadow:5px 5px red,5px 5px 3px blue;}

.Shadow_pattern2{/*光源の再現*/
background-color:#888888; 
box-shadow:5px 5px 5px -3px #FFF inset, 5px 5px;
}

box-shadowプロパティはカンマで続けて複数のスタイルを同時に定義することができます。カンマで区切るたびに影は後ろへ作られます。これを応用すれば赤い影に青いぼかしを作る事や、光源の方向を表現することも可能となります。