CSSの疑似要素に影をつける方法／filter: drop-shadowプロパティが便利

この記事では、「box-shadow」と「filter:drop-shadow」プロパティを使用して、疑似要素に影をつける方法を紹介します。

CSSのbox-shadowプロパティは要素に影をつける際によく使われますが、filterプロパティの一部として提供されているdrop-shadowはより柔軟に影をつけることができます。

影をつける要素はボックスや画像など何でもよく（テーマ等関係なく）使えますが、当記事では例として疑似要素を使用して作られているテーマCocoonの吹き出しを使って進めていきます。

少し細かい部分のカスタマイズになりますが、よろしければお付き合いください。

ワードプレスの場合、CSSは基本的に子テーマのスタイルシートを使用します。

疑似要素とは？

まず、疑似要素について簡単におさらいしましょう。

疑似要素とは、簡単に言うと「HTMLコードにはないけれど、CSSで指定して表示させる部分」のことです。

代表的な疑似要素には以下のようなものがあります。

• ::before：指定した要素の内容の前に追加される仮想要素。
• ::after：指定した要素の内容の後に追加される仮想要素。

例えば、以下のコードでは、::before疑似要素を使って要素の前に装飾を追加しています。

.element::before {
    content: "◆";
    color: red;
}

このスタイルを適用すると、.elementの前に赤い◆が表示されます。

影をつけるCSSプロパティ「box-shadow」

まず試してみるのが、一般的に多く使われているbox-shadow。

CSSのプロパティ（スタイルの種類）のひとつです。

box-shadowプロパティは複数の影を同時に追加したり、insetキーワードを使用することで内側に影を追加することもできます。要素に立体感や浮遊感を出せるため、ボタンにホバーエフェクトを追加する際などいろいろなサイトでよく利用されていますね。

以下の記述方法があります。

.element {
	box-shadow: h-offset v-offset blur spread color;
}

「box-shadow」の使用例

具体的にこのように書いてみます。

.speech-balloon{
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
}

上記の例では、2pxの横方向のずれ、2pxの縦方向のずれ、3pxのぼかし、そしてrgba(0, 0, 0, 0.2)の色の影が要素に追加されます。

このCSSを反映させるとこのような吹き出しになります。

うん、さりげなく影がついて悪くない。

これはこれでよいですね♪

疑似要素に「box-shadow」をかけてみる

そこで、吹き出しの三角部分（疑似要素で作られています）に直接box-shadowを指定してみました。

わーお！！！

三角のまわりに四角く影がついてしまい大失敗です。

やりたかったのはこれではない…

疑似要素にも影をつけるCSSプロパティ「filter:drop-shadow」

そんなときに使える便利なプロパティがあります。

吹き出しに使われる疑似要素

CSSで吹き出しを作る方法はいくつかありますが、最も一般的な方法は、::beforeや::after疑似要素を使って三角形を作り、それを吹き出しの本体に追加する方法です。

CSSプロパティ「filter: drop-shadow」

filter: drop-shadowプロパティは、要素に影をつけるためのCSSプロパティです。このプロパティは通常のbox-shadowとは異なり、要素の形状に基づいた影を生成します。特に、画像や透明な部分を含む要素に対して効果的です。

ポイントは疑似要素に影をつけることができること。

「filter: drop-shadow」の使用例

「filter:drop-shadow」を使って記述します。

.speech-balloon{
	filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

上記の例では吹き出し（親要素）にdrop-shadowを適用し、2pxの横方向のずれ、2pxの縦方向のずれ、3pxのぼかし、そしてrgba(0, 0, 0, 0.3)の色の影が要素に追加されます。

このコードを反映させてみると…

このように綺麗に影が作られました^^

比較／「box-shadow」と「filter:drop-shadow」でつけた影の違い

CSSのプロパティ「box-shadow」と「filter:drop-shadow」、どちらでも影を作れることは分かったけど、具体的にはどんな違いがあるのか？

サンプルとして、背景透過したPNG形式の人物画像にそれぞれ影をつけて比較してみるとこのような結果になります。

「box-shadow」は要素全体に四角く影が作られ、「filter:drop-shadow」では人物の輪郭のまわりに影が作られているのが分かります。

このような使い分けができるCSSはとても便利ですね！

ひとこと

「box-shadow」と「filter:drop-shadow」プロパティでできること、基本的な記述方法、それぞれの違いについて解説しました。

filter: drop-shadowプロパティは、CSSの疑似要素に影をつける際に非常に便利なツールです。簡単な設定でリアルな影を追加できデザインの幅が広がります。この記事で紹介した方法を参考にして、ぜひ様々なデザインに応用してみてください。

吹き出しの影の他、セレクタ部分（HTMLのどの部分にCSSを反映させるか）を変えることで、ボックスや画像など他の要素にも応用できるので試してみてくださいね。

この記事は以上です。