CSSでドロップシャドウをかける【drop-shadow】
「ドロップシャドウをかける」にはいくつか方法がありますが、今回は画像加工ソフトは使わすにCSS（drop-shadow）で影をつけてみます。
filter: drop-shadow( )
filter プロパティにある関数のうちの1つ drop-shadow（ドロップシャドウ）を使い、背景などを含む枠ではなく、背景を除いた要素そのものの輪郭に影をつけます。
drop-shadow で影を付けることができるのは、画像やテキストなどがありますが、画像の絵柄の輪郭に影をつけることができるのは、PNG・SVG・WebPなど「背景が透過の画像」だけなので、JPGの画像には使えません。
ブログのロゴなどは背景を透過で作っている人が多いと思うので、この辺りのホバーエフェクトとしても使えそうですね。
ドロップシャドウのサンプル
早速サンプルを作ってみます。上が加工前のオリジナル・下がCSSでドロップシャドウを設定した加工後になります。画像に img-shadow の class を設けて、薄い紫色の影をつけました。
.img-shadow {
filter: drop-shadow(8px 8px 3px rgba(97,12,194,0.6));
}filter: drop-shadow( X軸方向の位置px Y軸方向の位置px 影をぼかす範囲px 色 ) となっています。
X軸・Y軸はそれぞれ横方向・縦方向の位置になり、0：ゼロを起点としてプラスでX軸：右/Y軸：下、マイナスでX軸：左/Y軸：上に移動します。
ぼかしの加減
例えば、X/Y共に0：ゼロの場合は真下に影ができます。この場合はぼかしだけが輪郭からはみ出るので、淡く発光しているようなイメージになります。この場合は、適度なぼかしがないと、ほとんど効果がわかりません。
filter: drop-shadow(0px 0px 6px #610cc2)filter: drop-shadow(25px -25px 0px rgba(97,12,194,0.6))逆にぼかしを0：ゼロにすると、強い光を当てた時のようなはっきりとした影ができます。
このように、ぼかしについてはpx数が大きくほど「影が薄く広がってぼんやり」、px数が小さいほど「影が濃くはっきり」します。
なお、ぼかしをマイナス（負の数）にすると「影が消えてしまう」ので、0以上の数値を設定します。
色の指定
色の指定はカラーネーム（例：blue）でも、カラーコード（例：#610cc2）でも大丈夫です。
透明度を含む RGBA形式（例：rgba(97,12,194,0.6)）などであれば、同じ色の指定でも透明度の調整（0～1：1で不透明）で色の濃淡がつけられるので、より細かな調整をすることができます。
rgba( 赤, 緑, 青, 透明度 )
透明度sample rgba(97,12,194,0.8)
透明度sample rgba(97,12,194,0.5)
透明度sample rgba(97,12,194,0.1)
drop-shadow ジェネレーター
プラスマイナスで左右上下どっちに動くんだっけ？ぼかしはこのpx数でどんな風に表示される？
都度表示確認するのは大変なので、実際の影を目で見ながら調整できるジェネレーターにお任せしてしまえば簡単です。
filter:drop-shadowジェネレーター - bad-company
子要素として画像/テキストを含むサンプル
サンプルテキスト
<div class="shadow4">
<img src="青いハチドリの画像URL" />
<p>サンプルテキスト</p>
</div>
.shadow4{
border: 3px solid;
border-radius: 10px;
filter: drop-shadow(8px 8px 3px rgba(97,12,194,0.6));
}実際にはセンタリングなどのCSSが入っていますが、ざっくりと説明するなら親要素<div>に filter: drop-shadow を設定すると、親要素に設定した 3px幅の border（枠線）と、その子要素である<img>青いハチドリの画像、<p>サンプルテキストにも影がつきます。
同じ設定のはずですが、見た目としては影に濃淡（画像 ＞ 枠 ＞ テキスト）があるように感じます。個人の感覚や表示しているディスプレイ設定の違いもあるかもしれませんが。
また、この親要素<div>に背景色＝background-color を設定すると、
サンプルテキスト
子要素の影が全て消え、大きく見た目が変わってしまいます。
親要素<div>に背景色を指定しつつ、子要素に影を出したい場合は、子要素<img><p>それぞれに filter: drop-shadow を設定しなくてはいけません。
サンプルテキスト
ついでに、要素によって影に濃淡の差があるように感じていたので、<p>テキスト部分だけ影の調整しました。（テキストの読みにくさは今回は置いておくとして）
欲しい効果を得るために試行錯誤が必要ですね。
最後に
今回は filter: drop-shadow( ) に焦点を当てましたが、この他にも「影」をつけるには
- box-shadow：要素の枠に影をつける
- text-shadow：テキストに影をつける
があり、それぞれどこに・どんな風に影がつくか違ってくるので、drop-shadow 以外の filter の効果も含め、細かな部分のデザインにこだわると非常に奥深い影の世界です。
text-shadow で影を8方向から設定すると、文字に縁取りをつくることもできます。
blue180.blogspot.com他カスタマイズ
現在使っているJetThemeのカスタマイズについては、こちらの記事でまとめています。
blue180.blogspot.com