当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

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

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

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

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

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

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

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

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

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

疑似要素とは?

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

疑似要素とは、簡単に言うと「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);
}

上記の例では、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」

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

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

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を反映させるか)を変えることで、ボックスや画像など他の要素にも応用できるので試してみてくださいね。

この記事は以上です。

よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

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