WordPressのテーマ作成（4）　CSS3にチャレンジ box-shadow

Tweet

box-shadow

border-radiusと共に使用頻度の高くなりそうなbox-shadowです。
box-shadowは影をつけるプロパティです。

いくつか使用例を書いていきます。
どれも縦横100pxのサイズに適用しています。
（google chromeで見てください。）

box-shadow:10px 5px 10px black;
/*
  1番目は横への長さ
  2番目は縦への長さ
  3番目はぼかしの距離
  4番目は色
*/

box-shadow:10px 5px 5px black;
/*
  ぼかしを10から5に変えてみました
  1番目は横への長さ
  2番目は縦への長さ
  3番目はぼかしの距離
  4番目は色
*/

box-shadow:10px 5px 30px black;
/*
  ぼかしを30に変えてみました
  1番目は横への長さ
  2番目は縦への長さ
  3番目はぼかしの距離
  4番目は色
*/

元のサイズよりも大きい影になってしまいます。
個人的には外側への影に「広がり」はほとんど使わないかも。

box-shadow:10px 5px 10px 10px black;
/*
  1番目は横への長さ
  2番目は縦への長さ
  3番目はぼかしの距離
  4番目は広がり距離
  5番目は色
*/

黒色で内側に影。

box-shadow:10px 5px 5px 10px black inset;
/*
  1番目は横への長さ
  2番目は縦への長さ
  3番目はぼかしの距離
  4番目は色
  5番目(inset)は外側向きの影が内側向きに
*/

黒色で内側に影（ぼかしの距離と広がりと色で。）。

box-shadow:0px 0px 20px 5px black inset;

白色で内側に影（ぼかしの距離と広がりと色で。）。

box-shadow:0px 0px 20px 5px #fff inset;

角丸との組み合わせ。メニューとかに良さそうです。

border-radius:20px;
box-shadow:0px 0px 20px 3px #fff inset;

さらに外側への影も付けてみました。
「,」で区切ります。

border-radius:20px;
box-shadow:0px 0px 20px 3px #fff inset,5px 5px 5px #666;

個人的にはbox-shadowは内側の影が結構使い道がありそうな気がします。

にほんブログ村 パソコン・周辺機器

Tweet