Blog スタッフブログ

WEB制作のG.Yです。

ロゴや写真などの要素に影を落とすデザインは、WEBデザインでは定番となっています。

CSSでこういった表現を行うにはいくつかの方法があります。

①box-shadow

box-shadow:0 10px 25px 0 rgba(29,77,216,0.8);

要素に影を付けるCSSプロパティの基本形です。

影の位置や濃さなどに対して細かい指定はできませんが、記述が短くて済むことがメリットです。

具体的な仕組みは以下となります。

❶.X/Yオフセット

影を付ける位置をX/Y軸にどれだけずらすかを決めます。

❷ブラー半径

ぼかす範囲の指定を行います。

❸スプレッド半径

ぼかす前に影の範囲の拡大・縮小する量を決めます。

❹影の色

不透明度を操作することもできます。

②filter:dropshadow()

filter:dropshadowはぼかしや色変化などで活用できるCSSプロパティですが、影の表現も可能です。

box-shadowと違い、透過画像の描画されている部分にのみ影を付けられるというのが強みです。

③疑似要素で影を落とす

要素と同じ幅および高さの疑似要素を作り、そちらにfilter:();などのCSSプロパティで影を作ることもできます。