数多くあるワードプレスのテーマの中でも、「Cocoon」は高機能でとても使いやすく愛用しています。
いろいろな機能満載で各種ボックスの他、例えばこんな吹き出しなんかも簡単に作れてしまいます。
特に問題のないシンプルな吹き出しでよいのですが、とあるサイトを見ていたら影がついているおしゃれな吹き出しを発見。よい感じなのでこのブログでもやってみようと思いました。
試行錯誤したとても細かい部分のカスタマイズになりますが、よろしければお付き合いください。
吹き出しに影をつけるために
まず思い付いたのはこちら。
このブログで影をつけるために色々なところで活躍している”box-shadow“。
box-shadowで影を作るCSS
.speech-balloon{
box-shadow: 2px 2px 3px darkgrey;
}
うん、さりげなく影がついて悪くない。
これはこれでよいですね♪
でも、吹き出しの三角部分にも影をつけるにはどうしたらよいかな…
三角部分にbox-shadowをかけてみる
そこで、吹き出しの三角部分（疑似要素）に直接box-shadowを指定してみました。
わーお！！！
三角のまわりに四角く影がついてしまい大失敗です(,,・д・)
やりたかったのはこれではない…
吹き出しの三角部分まで影をつけるには？
自分ではお手上げでなのでそんなときはググって天才の方々の知恵を借りることに。
吹き出しは□（四角）に△（三角：疑似要素）を組み合わせて作っています。
疑似要素である三角部分まで影をつけるには”drop-shadow”を使う方法があるよ！
drop-shadow！
さっそくやってみます。
drop-shadowを使ったCSS
filter: drop-shadow と表記します。
.speech-balloon{
filter: drop-shadow(2px 3px 3px darkgrey);
}このコードを反映させてみると…
こんな感じでやっと成功することができました^^
マイクロバルーン（吹き出し）にも影をつけられます
Cocoonで簡単に使うことのできるシンプルな吹き出しに”マイクロバルーン”がありますが、ここにも影をつけてみました。
.micro-balloon {
filter: drop-shadow(2px 2px 2px darkgrey);
}あれこれと迷って影がついたときに達成感があったので、こんなこともできるよの記録としてカスタマイズの記事に残しておきたいと思います。
ではまた。
Comment