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

CSS

text-shadowとbox-shadow

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

text-shadowの使い方

text-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;} /*全部*/

実行結果

css-shadow01

box-shadowの使い方

box-shadowの書式

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;
}

実行結果

css-shadow02
eyecatch

CSSでアニメーションを設定する

eyecatch

idとclassの使い分け

CSSの記事

eyecatch

ブラウザの先行・拡張機能を実装する機能「ベンダープレフィックス」

eyecatch

ボックスモデルとマージン・パディング

eyecatch

要素セレクタで条件下の要素のスタイルを変える方法

eyecatch

idとclassの使い分け

eyecatch

セレクタとプロパティの基本

eyecatch

CSSとは

CSSの記事一覧HOME