はじめに
画像素材に影をつけようとしてbox-shadowを使ってみたものの、あまりうまくいかなかったという経験がある人もいるでしょう。
CSSで画像に影をつけるには、box-shadowとは別にdrop-shadowという方法もあります。
そして、両者には利用するうえで明確な機能の違いがあるのです。
この記事では、そんなdrop-shadowの使い方やbox-shadowとの違いについて解説します。
ぜひ画像を加工する際の参考にしてください。
透過されたPNGに影をつける方法
Webサイト上などで透過pngの画像に影をつけるならば、drop-shadowがおすすめです。
透過pngだけでなく、SVGなどすでに背景に透過処理が施されている画像であれば影をつけることができます。
図形や文字などに任意の位置や色で影をつけることができ、影の長さや明暗などの細かい調整もできるため表現の幅を広げることが可能です。
ぼんやりとした影のグラデーションで、背景に対して画像が浮かび上がっているような印象を与えます。
Webページのデザインをするならば、CSSの中にはこのdrop-shadowがbox-shadowやtext-shadowといった類似の機能と共に標準で実装されているため使いやすいのです。
box-shadowとの違い
では、よく似た機能であるbox-shadowやtext-shadowと、drop-shaowとでは何が違うのでしょうか。
text-shadowは画像ではなくテキストに影をつけるための機能です。
画像に影をつける機能は、box-shadowとdrop-shadowの2つになります。
その内、box-shadowは画像におけるボックスの要素に影を付けるためのものです。
つまり、box-shadowを用いると、たとえ透過された画像であってももともとの四角形に沿って影が付いてしまうため、素材の「中身」に自然な影をつけるのには向きません。
一方、drop-shadowは透過された画像の内部に、要素となる素材の形に沿って影をつける機能です。
そのため、画像の要素そのものに影をつけたい場合はdrop-shadowを用いる必要があります。
drop-shadowの使い方
では、実際にdrop-shadowの使い方を見ていきましょう。
まず、img画像に以下のようにclassを付与します。
そして、classを付与した画像を選択して以下のように指定します。
filter: drop-shadow（左右の位置px 上下の位置px ぼかしの大きさpx 色rgba）;
}
左右の位置と上下の位置はそれぞれプラスの数値とマイナスの数値を両方指定することが可能です。
プラスの数値であれば右や下方向に、マイナスの数値であれば左や上方向に影が現れます。
ぼかしの大きさはプラスの数値のみ指定可能です。
影の色は、Web上で使えるコードであれば何でも指定できます。
drop-shadowを使う際の注意点
drop-shadowを使う際、気を付けたいことは2つあります。
それは、対応しているブラウザと使用する画像が透過されているかどうかです。
対応していないブラウザではそもそもdrop-shadowを使うことができません。
また、画像が透過されていないと四角形に影がついてしまい、box-shadowとほとんど同じ効果になってしまいます。
drop-shadowの真価を発揮するためにも、2つの注意点について詳しく確認しておきましょう。
対応ブラウザに気を付ける
drop-shadowを用いて画像に影をつける際に、気を付けたいのは対応ブラウザの問題です。
drop-shadowは、box-shadowと比べて対応しているブラウザが少なくなっています。
drop-shadowは、CSSにおける「filter」プロパティで使用する機能です。
しかし、IE11以下のIEブラウザには「filter」が存在しません。
そのため、IE11以下のIEブラウザはdrop-shadowに対応しておらず、使うことができないのです。
また、Chromeではある程度前のバージョンでも利用できますが、Firefoxはバージョン35以降でなければ対応していません。
Androidのバージョンが4.4より前の端末でも利用できないため注意が必要です。
透過されているかどうか確認する
始めに述べた通り、透過pngやSVGなど、背景が透過された画像でなければdrop-shadowはその意味を成しません。
本来であれば、要素の形に沿って自然な影を形成するのがdrop-boxの機能です。
しかし、加工なしの画像をそのままポンと放り込んでも、その四角形の縁に沿った影しか生成されないため、結果的にbox-shadowを使った場合と同じ見栄えになってしまいます。
そのため、drop-shadowを用いる際は事前に画像の透過が済んでいるか確認しておく必要があります。
ファイルの形式だけでなく、一度画像加工アプリケーションなどで読み込んで背景の状態を確認するなどして、画像がdrop-shadowで使える万全の状態であるかを確かめておきましょう。
ジェネレーターを使ってイメージしよう
drop-shadowでは、数値やカラーコードを用いて影の位置や色を指定します。
視覚的にどのような影ができるかを確認しながら作業はできないため、使い慣れていないとどれだけの数値を入れたら良いのか塩梅がわからない場合も多いです。
そこで、Web上で公開されているジェネレーターを用いて事前に使用感に対するイメージを持つことが大切になります。
ジェネレーターでは、シークバーを動かして影の位置を変えることでどれくらいの数値を指定すれば思った通りの影が生成できるのかを知ることが可能です。
また、影の色だけでなく画像の後ろの背景色も指定することができ、実際のWebページデザインに近い形でシミュレーションできます。
ジェネレーターを利用して、drop-shadowを活用する感覚を掴みましょう。
drop-shadowのジェネレーターはこちらです。
まとめ
ここまで、drop-shadowの機能や使い方、類似機能との違いや注意点について解説してきました。
drop-shadowを用いれば、画像素材に沿った形で影をつけることができ、Webデザインの幅が広がります。
また、そのイメージはジェネレーターによって確認することが可能です。
一方で、対応ブラウザの確認や画像の確実な透過など、気を付けるべき点も存在しています。
drop-shadowについて理解を深め、透過画像に影をつけてみましょう。
