お買い物忘れはありませんか?Amazon

Cocoon吹き出しに影をつけるCSS/box-shadowとfilter:drop-shadowの違い

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

数多くあるワードプレスのテーマの中でも「Cocoon」は無料なのに高機能でとても使いやすく愛用しています。

各種装飾ボックスの他、例えば次のような吹き出しもプラグインを入れることなく簡単に作れてしまいます。

シンプルなデザインの吹き出しでとてもよいのですが、この記事ではプラスして影をつけてみます。

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

CSSを使用するとても細かい部分のカスタマイズになりますが、よろしければお付き合いください。

>>CocoonでCSSを編集する方法についてはこちらのページをご覧ください。

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

吹き出しに影をつけるために

まず試してみるのが、当ブログで影をつけるために色々なところで活躍している

box-shadow

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

「box-shadow」で影を作るCSS

例としてこのように書いてみます。

.speech-balloon{
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
CSSの意味
  • 「speech-balloon」は吹き出しに設定されているHTMLのクラス名です。
  • box-shadow: 2px(左右の向き) 2px(上下の向き)3px(ぼかし) darkgray(影の色);
  • 上下方向、左右方向の向きをpx(ピクセル)で指定します。
  • 色はカラーコードやRGB値で指定します。

  • カラーネーム:red,blue,green,grayなど
  • カラーコード:#111111 といった6桁(または3桁)で表す
  • RGB値:(色+透明度)で表す
    rgba(0, 0, 0, 0.2)は黒の透明度は0.2という意味

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

吹き出しに影(box-shadow)

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

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

これでもいいいけど、吹き出しの三角部分にも影をつけられないかな?

三角部分にbox-shadowをかけてみる

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

吹き出しに影(失敗)

わーお!!!

三角のまわりに四角く影がついてしまい大失敗です(,,・д・)

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

スポンサーリンク

吹き出しの三角部分(疑似要素)まで影をつけるには?

そんなときは先人の方々の知恵を借りることで解決します!

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

疑似要素である三角部分まで影をつけるにはfilter:drop-shadowを使う方法があるよ!

filter:drop-shadow!!

さっそくやってみます。

filter:drop-shadowを使ったCSS

filter: drop-shadow と表記します。

.speech-balloon{
	filter: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はとても便利ですね!

スポンサーリンク

ひとこと/吹き出しに影をつけてイメチェンしませんか

あれこれと迷って影がついたときに達成感があったので、こんなこともできるよの記録としてカスタマイズの記事に残しておきます。

吹き出しの影の他、セレクタ部分(どこにCSSを反映させるか)を変えることで他の要素にも応用できますので試してしてくださいね。

今回は以上です。

Comment

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