CSS3の box-shadow の影を利用して立体感を出してみる

  • CSS
  • 現在地

今回はCSS3の box-shadow プロパティで、ヘッダーやフッター等に影を配置し重なっているようにしてみたので、このプロパティについて記述してみます。

box-shadow / ボックスに影を付ける

box-shadow は、ボックスに影を配置するプロパティであり、以下のように指定を行います。

box-shadow: (inset) 水平位置 垂直位置 (ぼかし) (拡縮) (色)

括弧でくくられているのは省略が可能な値ですが、Chrome では色を省略すると機能しません。

必須の値である水平位置と垂直位置は、影を描画する位置にあたり、その正か負の値分左右・上下にずらすことが可能です。

ぼかしの部分の値は影と背景の境界をぼかす半径となり、拡縮の値は影を拡大(正)・縮小(負)させる値になります。

色の値は rgba() のアルファ値を指定しない限りは、今までのように #000 や black のような記述で構いませんが、rgba() のアルファ値を 1 未満に設定した影が他の要素に重なった場合、その要素の背景やボーダーも透過して表示されます。

アルファ値を設定しない場合でも、ぼかしの値次第では透過したように見えることもあります。

box-shadow: 1px 1px 1px 1px rgba(85,85,85,1)

また、上記で省略している inset は、影をボックスの内側に配置するためのキーワードです。

box-shadow: inset 1px 1px 1px 1px rgba(85,85,85,1)

さらに、値をカンマ(,)で区切ることで複数の影を適用することも可能です。

box-shadow: inset 1px 1px 1px 1px rgba(85,85,85,1),5px 5px 2px rgba(69,69,69,.7),30px -60px 0 rgba(85,85,85,.2);

注意点

このプロパティを、スクロールするボックスの内側または直接の子要素であるボックスの外側に設置すると、ブラウザによってはスクロールする際重くなることがあるようです。

PCのスペックによりますし、多用しない限り見た目でわかるほどの影響も無いようですが。

最後に、この box-shadow プロパティの inset を利用せず省略した場合で、W3CのCSS検証(Validator)サービス(CSS3)でチェックするとなぜかエラーが出てしまいます。

なので inset は省略可のはずなんですが、内側の影を使用しない場合で valid にしたいなら、'inset 0 0' を最初に指定する必要があるようです。

box-shadow: inset 0 0,5px 5px #555

ちなみに inset を最初に記述しない場合でも、エラーが出てしまいます。

スポンサードリンク

inserted by FC2 system