CSS box-shadowを美しく

CSS Web

Webページのデザインをより引き立てる!box-shadowをさらに自然な影に。CSSで簡単に作れる!

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の可能性を広げることが出来るといったお話でした。

特に白いボックスと自然な影の相性は抜群ですね。いかにもモダンなデザインという感じがします。

ぜひ試してみてくださいね。

  • この記事を書いた人

Maesuke

2年目Webデザイナー。 IT全般やWeb関係、ガジェット、暗号資産(仮想通貨)などに興味を持ち、気になった情報などを日々つぶやき続ける普通の人。

イチ押し記事!

1

いくつかの副業を試してきましたが、プログラミングのようにガッツリ勉強する必要もなく、さらに数日で数千円、月収で3〜5万円くらい稼げるコスパの良い「動画編集」という副業を、今回は紹介しちゃおうかなと思い ...

2

2020年10月23日に発売したiPhone 12シリーズ。筆者は発売日にiPhone 12 Pro 128GB ゴールドを手に入れ、とても喜んでいたが… iPhoneケースどうしよう!? と、iPh ...

AirPods Pro革製ケース 3

昨年AirPods Proを購入し、その保護ケースとして簡易的なシリコンケースをとりあえず装着していたのですが、ネットを見ていると魅力的なケースが他にもたくさんあるじゃないか!…と。 そこで特に目を惹 ...

-CSS, Web
-,

© 2024 maesuke.comブログ