CSSでボックス要素の影を作る場合、一般的に使われるbox-shadow。
手軽に影を付けられるため非常に便利なのですが、この影が妙に不自然というか… 安っぽく感じてしまう気がする方は多いのではないでしょうか。
理想はこのWikipediaのポップアップにあるような影。この影は綺麗ですよね。
そこで今回はこのbox-shadowを使って、より自然で美しい影を簡単に作れる方法をご紹介します。
通常の影と自然な影の比較
See the Pen ExaOJEV by Maesuke (@maesukeshana) on CodePen.default
このように、普通の影と自然な影に微妙〜な違いがあるのが分かるでしょうか。
自然な方がフワッとした影になっていることに気づきましたか？
この例では、
box-shadow: 0 8px 20px 0 #cccccc;
としていたところを、
box-shadow: 0 8px 30px -10px #999999;
というように変えています。
box-shadowは
box-shadow: 横位置 縦位置 影の大きさ 影の拡張 色
といったプロパティとなっていますが、今回の方法では影(影のグラデーション幅)を大きくしつつ、影全体をやや縮小させ、かつ色の明度を落とすという技を使っています。
結果、影のボヤけた端っこ部分だけが表に出るようになり、繊細な影を表すことができています。
この「30px」と「-10px」を調整することにより微妙なニュアンスを変えることができるので、お使いのWebサイトの雰囲気に合わせてみるのも良いでしょう。
より繊細なシャドウをジェネレーターを使って表現する
brumm.af
https://brumm.af/shadows
CSSが多少複雑になっても良いのであれば、こういったbox-shadowジェネレーターを使うのも一つの手でしょう。
これは普通のジェネレーターではなく、複数のbox-shadowを重ねてより自然な影を作り出してくれるものとなっています。
小数点単位でピクセルや透明度を指定できるので、より現実に近い影を表現できます。
まとめ
というわけで、box-shadowの可能性を広げることが出来るといったお話でした。
特に白いボックスと自然な影の相性は抜群ですね。いかにもモダンなデザインという感じがします。
ぜひ試してみてくださいね。
