ドロップシャドウでテキストやボックスに影を付ける

text-shadowとbox-shadow

CSSではテキストやボックスに影を付けることができます。 テキストには「text-shadow」要素を、ボックスには「box-shadow」要素を使って影を付けます。
テキストやボックスに立体感を持たせることができるので、様々な箇所に使われています。

text-shadowの使い方

text01{text-shadow:3px 0 0 gray;} /*横のみ*/
.text02{text-shadow:0 3px 0 gray;} /*縦のみ*/
.text03{text-shadow:0 0 3px gray;} /*ぼかしのみ*/
.text04{text-shadow:3px 3px 3px gray;} /*全部*/

実行結果

box-shadowの使い方

box01{box-shadow:3px 0 0 gray;}  /*縦のみ*/
.box02{box-shadow:0 3px 0 gray;}  /*横のみ*/
.box03{box-shadow:0 0 3px gray;}  /*ぼかしのみ*/
.box04{box-shadow:3px 3px 3px gray;}  /*全部*/
.box05{  /*全部＆通常のボーダー*/
  box-shadow:3px 3px 3px gray;
  border:solid 1px black;
}

実行結果