この記事では、「box-shadow
」と「filter:drop-shadow
」プロパティを使用して、疑似要素に影をつける方法を紹介します。
CSSのbox-shadow
プロパティは要素に影をつける際によく使われますが、filter
プロパティの一部として提供されているdrop-shadow
はより柔軟に影をつけることができます。
影をつける要素はボックスや画像など何でもよく(テーマ等関係なく)使えますが、当記事では例として疑似要素を使用して作られているテーマCocoonの吹き出しを使って進めていきます。
少し細かい部分のカスタマイズになりますが、よろしければお付き合いください。
ワードプレスの場合、CSSは基本的に子テーマのスタイルシートを使用します。
影をつける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);
}
上記の例では、2px
の横方向のずれ、2px
の縦方向のずれ、3px
のぼかし、そしてrgba(0, 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」
そんなときに使える便利なプロパティがありました。
吹き出しは□(四角)に△(三角:疑似要素)を組み合わせて作っています。
疑似要素である三角部分まで影をつけるには「filter:drop-shadow
」を使う方法があるよ!
おぉ!さっそくやってみます。
CSSプロパティ「filter: drop-shadow」とは
filter
プロパティは、要素に対してさまざまな視覚効果を適用するためのものであり、その中でもdrop-shadow
はより柔軟な影を生成するために使用されます。
ポイントは疑似要素に影をつけることができること。
「filter: drop-shadow」の基本的な使い方
「filter:drop-shadow
」を使って記述します。
.speech-balloon{
filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}
上記の例では、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」プロパティでできること、基本的な記述方法、それぞれの違いについて解説しました。
このプロパティを利用することで、シンプルで効果的な影を実装することができます。
吹き出しの影の他、セレクタ部分(HTMLのどの部分にCSSを反映させるか)を変えることで、ボックスや画像など他の要素にも応用できますので試してみてくださいね。
今回は以上です。
Comment