Warning: Undefined array key 0 in /home/yatsuba/yatsuba.com/public_html/wp-content/themes/amaru/functions.php on line 406

Warning: Attempt to read property "parent" on null in /home/yatsuba/yatsuba.com/public_html/wp-content/themes/amaru/functions.php on line 407

Warning: Attempt to read property "term_id" on null in /home/yatsuba/yatsuba.com/public_html/wp-content/themes/amaru/functions.php on line 413

Warning: Attempt to read property "cat_name" on null in /home/yatsuba/yatsuba.com/public_html/wp-content/themes/amaru/functions.php on line 413

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

text-shadowとbox-shadow
text-shadowの使い方
box-shadowの使い方

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

実行結果

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

実行結果

B!
LINE