当ブログを紹介いただいたサイトを掲載します受付中

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

アイキャッチ/吹き出しに影 カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

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

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

\Before/
吹き出しに影(デフォルト)
\After/
吹き出しに影(成功)

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

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

\Cocoonの方はこちらを参考にしてください/
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

影をつける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)の色の影が要素に追加されます。

CSSの意味
  • 「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」をかけてみる

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

吹き出しに影(失敗)

わーお!!!

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

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

スポンサーリンク

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

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

吹き出しは□(四角)に△(三角:疑似要素)を組み合わせて作っています。

擬似要素とは、HTMLの記述なくコンテンツの内容やスタイルを変更するもの。セレクタに追加して記述し主に:beforeや:afterが使われます。

疑似要素である三角部分まで影をつけるには「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

タイトルとURLをコピーしました