ゆるい海釣りの記録と、ブログのカスタマイズを綴る趣味ブログです。すべての記事一覧はこちら >>

Cocoon(コクーン)の吹き出しに影をつけるCSS【drop-shadow】

吹き出しに影をつける カスタマイズ

この記事はワードプレスのテーマCocoon(コクーン)のカスタマイズになります

このテーマは高機能で使いやすく、例えばこんな吹き出しなんかも簡単に作れてしまいます。

吹き出しに影

特に問題のないシンプルな吹き出しでよいのですが、とあるサイトを見ていたら影がついているおしゃれな吹き出しを発見。よい感じなのでこのブログでもやってみようと思いました。

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

まず思い付いたのはこちら。

このブログでも写真に影をつけるために使用している”box-shadow“。

box-shadowで影を作るCSS

div.speech-balloon{
box-shadow: 2px 2px 3px darkgrey;
}
簡単な解説
  • box-shadow: 2px(左右の向き) 2px(上下の向き) 3px(ぼかし) darkgrey(影の色);
  • 上下、左右の向きをpx(ピクセル)で指定します。
  • 色は16進数カラーコードやRGBAの書き方でもOKです。

吹き出しに影

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

でも、吹き出しの三角部分に影はつかずそのままなのがちょっと気になる…

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

そこで、吹き出しの三角にbox-shadowを指定してみました。

吹き出しに影(失敗)

ぐはー!

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

吹き出しの三角部分まで影をつけるには?

自分ではお手上げでなのでそんなときはググって天才の方々の知恵を借りることに。

吹き出しの三角部分(疑似要素)まで影をつけるには”drop-shadow”を使う方法があるそうです。さっそくやってみることに。

drop-shadowを使ったCSS

/************************************
** cocoon吹き出し
************************************/
div.speech-balloon{
filter: drop-shadow(2px 3px 3px darkgrey);
}
吹き出しに影

マイクロバルーン(吹き出し)にも影をつけられます

Cocoonで簡単に使うことのできるシンプルな吹き出しに”マイクロバルーン”がありますが、ここにも影をつけてみました。

Cocoonのマイクロバルーン機能を使った吹き出し。
drop-shadowを使って下の三角部分にも影がついているかと思います。カラーをRGBA表記して透明度も指定しています!CSSはこちら。

/************************************
** 吹き出し(マイクロバルーン)
************************************/
.micro-balloon {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

影がついたときに達成感があった(コピペしただけ)のでカスタマイズの記事に残しておきたいと思います。ではまた。

参考にさせていただいたサイト

box-shadow(ボックスシャドウ)はもう古い?CSSで「影(シャドウ)」を付ける方法

コメント