box-shadow

ではでは早速。box-shadowです。

指定方法は？

と言うわけで指定方法はこんな感じです。

box-shadow:影の位置(X) 影の位置(Y) ぼかし距離 広がり距離 色指定 inset

いっこいっこ順番に説明を入れる前に

影の位置(X)

影の位置のX軸の位置を指定するものです。
0の場合は丁度要素の真下に影がいる形になります。

影の位置(X)

影の位置のY軸の位置を指定するものです。
X軸と同じく、0の場合は丁度要素の真下に影がいる形になります。

ぼかし距離

放射線状にどれくらい広がすのかをここで指定してあげます。 そう、放射線状に広がるのです。
なのでX軸Y軸が0でここの値を変えると、要素全体にモワッと広がる形になります。

広がり距離

こいつも放射線状に広がっていく形なのですが
広がり距離は、ぼかしていない部分の幅を指すことになります。
ぼかし距離20px ひろがり距離20xpとした場合は
ぼかしなしがまず20px開き、21px目からはぼかしがはじまるわけです。

色指定

影の色を指定してあげます。

inset

【inset】という文字を指定します。
指定すると影が、要素の内側に入ってきます。

ふ、ふぅん…わ、分かったし！楽勝だし！

僕はきっと知らない時に文字だけ読んでも分かんないと思うんですよね。
なので、色々例を作ってやってみようと思います。

全部0にしてやる

box-shadow:0px 0px 0px 0px #000;

いいっすね。
なんもないですね

ぼかし距離を広げてみた

box-shadow:0px 0px 30px 0px #000;

全体的にもわっとしています。
なんかくさそう

広がり距離を広げてみた

box-shadow:0px 0px 30px 30px #000;

広がり距離のつぎにぼかしがはじまっているのがハッキリとわかりますね。
バイオテロかな？

広がりを消して、位置を右に移動してみた

box-shadow:23px 0 30px 0 #000;

左から光が当たってる感じで影を右に移動。

位置を下に移動してみた

box-shadow:23px 23px 30px 0px #000;

左上から光が当たってるように、影を下に移動
このサイトの闇は深い

ぼかし広すぎるっぽい。調整するっぽい

box-shadow:10px 11px 16px -8px #000;

ちょっと調整内容がぶっとびましたね…
これで各プロパティが何してるかが何となくわかったのではないでしょうか。

はー。もう調整クッソめんどくさい

ほんとめんどくさいです。
で、box-shadowがどんなことしてるのかが分かったあなたに朗報
box-shadowジェネレータこれ使うとラクですよ