この記事では、疑似要素に影をつける方法を紹介します。
使うCSSプロパティは以下の2つ。
- 「
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;
}
h-offset
: 横方向のずれv-offset
: 縦方向のずれblur
: ぼかしの半径spread
: 影の広がりcolor
: 影の色
「box-shadow」の使用例
具体的にこのように書いてみます。
.speech-balloon{
box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
}
- 「speech-balloon」は吹き出しに設定されているクラス名です。
- box-shadow: 2px(左右の向き) 2px(上下の向き) 3px(ぼかし) darkgray(影の色);
- 上下方向、左右方向の向きをpx(ピクセル)で指定します。
- 色はカラーコードやRGB値で指定します。
- カラーネーム:red,blue,green,grayなど
- カラーコード:#111111 といった6桁(または3桁)で表す
- RGB値:(色+透明度)で表す
rgba(0, 0, 0, .2)は黒の透明度は0.2という意味
このCSSを反映させるとこのような吹き出しになります。
うん、さりげなく影がついて悪くない。これはこれでよいですね♪
これでもいいいけど、吹き出しの三角部分にも影をつけられないかな?
疑似要素に「box-shadow」をかけてみる
そこで、吹き出しの三角部分(疑似要素で作られています)に直接box-shadow
を指定してみました。
わーお!!!
三角のまわりに四角く影がついてしまい大失敗です。
やりたかったのはこれではない…
疑似要素にも影をつけるCSSプロパティ「filter:drop-shadow」
そんなときに使える便利なプロパティがあります。
吹き出しに使われる疑似要素
CSSで吹き出しを作る方法はいくつかありますが、最も一般的な方法は、::before
や::after
疑似要素を使って三角形を作り、それを吹き出しの本体に追加する方法です。
疑似要素である三角部分まで影をつけるには「filter:drop-shadow
」を使う方法があるよ!
おぉ!さっそくやってみます。
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」の影
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
要素全体に対して影を作ります。
「filter:drop-shadow」の影
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.8));
背景透過部分を無視して、表示されている(見えている)ものだけに影を作ります。
「
は要素全体に四角く影が作られ、「box-shadow
」filter:drop-shadow
」では人物の輪郭のまわりに影が作られているのが分かります。
このような使い分けができるCSSはとても便利ですね!
ひとこと
「box-shadow
」と「filter:drop-shadow
」プロパティでできること、基本的な記述方法、それぞれの違いについて解説しました。
filter: drop-shadow
プロパティは、CSSの疑似要素に影をつける際に非常に便利なツールです。簡単な設定でリアルな影を追加できデザインの幅が広がります。この記事で紹介した方法を参考にして、ぜひ様々なデザインに応用してみてください。
吹き出しの影の他、セレクタ部分(HTMLのどの部分にCSSを反映させるか)を変えることで、ボックスや画像など他の要素にも応用できるので試してみてくださいね。
この記事は以上です。
Comment コメントはこちらへ
[…] Turicco CSSの疑似要素に影をつける方法/filter: drop-shadowプロパティが便利 この記事では、疑似要素に影をつける方法を紹介します。 […]