画像を使わずにAppleの公式サイトで使われてるような柔らかい影を作る方法です。

Apple公式サイトの影
Apple公式サイトの影
この記事のコードで実装する影
この記事のコードで実装する影

上部赤いPLAYボタンで動作サンプルを見れます。

ポイント

ポイントは、本来のボックスと違う形の影を作るために擬似要素を加えて影をつけているところ。その擬似要素を border-radius で丸くすることで柔らかい影にしています。

小ネタ

このブログでもリンク付きの画像に同じような効果(少し大げさな影にしていますが)をつけています!

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.