透過画像に影をつけるというのは、デザインの世界でよくある要件です。しかし、この影が矩形でなく、画像の形状に合わせていると、そのビジュアル効果は格段に上がります。
CSSのfilter:drop-shadowを使えば、透過したロゴ画像などに簡単にいい感じの影をつけることができて、非常に便利です。
画像自体に影をつけるという手もありますが、画像を編集したくない場合や手っ取り早く実装したい際などには重宝します。
以前、背景写真の上にロゴを表示しているページで背景画像が差し替えになり、ロゴが見えにくくなってしまった際にお世話になりました。
この記事では、drop-shadowを使って透過画像に「いい感じの影」をつける方法を詳しく解説します。
サンプル
img {
filter: drop-shadow(0px 2px 3px #666);
}元は真っ白い画像なので、そのままでは背景と同化してしまい見えなくなってしまいますが、filter:drop-shadowで影をつけることによりはっきりと見えるようになっています。
