CSSのみ画像不要の吹き出しの作り方

昨日ゴロドクさんが改めて丁寧に解説にしていましたCSSのみ画像不要の吹き出しの作り方。
せっかく丁寧に説明されているので、基本的な作りからはそちらを御覧ください。
CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる

影の付け方

せっかく吹き出しなので「影も付けて更にそれっぽくしたいたい！」と思う方もいらっしゃるかと思います。
ただ、これには割と癖がありませして単純にdrop-shadowをかければいいというわけではありません。吹き出しの▼部分に影がなかったり、影が被ったり、ずれたりしてしまいす。

パターン1：影を隠す

「影が▼と被ってしまうなら、被ってしまう部分を上から隠そう」という方法です。
こちらは以前Zumaさんが紹介していた方法です。
以下Zumaさんのブログを御覧ください。
影付きの吹き出しをスマフォ向けにCSSだけで作る方法

パターン2：影を別につける

「影が被ってしまうのなら、そのまま付けなければいい。別に付けてやろう」という方法。

擬似要素の片方でborderではなく、ボックスを transform の rotate と skew を使って吹き出しの▼部分を作成。元の要素自体には影を付けず、余った擬似要素を元要素と同じ大きさにして影を作成。z-indexで元要素の影→▼→元要素と重ねてやる方法です。

サンプルで力技と書いている通り、本来は高さを指定したほうがいいです。<br>等による改行なしの場合は、content: に吹き出しの中と同じテキストを入れてやり、font-size、line-height を元要素と同じにしてやるとどうにかなります。

面倒な箇所としては、▼の部分をrotateで回して実現しているので、元要素と同じ数値で影を指定すると違う方向に出てしまいます。見ながら調整が必要です。

以前、要素の重なりの話で解説しましたが、元の要素がスタックコンテキストを生成するとこの方法がとれなくなるので注意。

また、影用の擬似要素には元要素と同じ背景色を設定したほうが綺麗に出来る気がします。透明にしてしまうと、元要素と影の間に微妙に隙間ができるような…

パターン3：filter: drop-shadowを使う

現状ChromeとSafari6しか使えませんが、ゴロドクさんの方法で▼をつけて、▼に filter: drop-shadow で影をつけてやる方法です。

box-shadow ではボックスに対する影なので、一部ボーダー見た目上消して▼を実現しているゴロドクさんの吹き出しの作り方では▼とは違う位置に影が現れてしまいますが、 filter: drop-shadow ならコレが解決できます。
webkitさんは本当に優秀やで。

追記：drop-shadow なら元の要素に drop-shadow を指定するだけで擬似要素にも影がついてくれるらしいです。
参考：box-shadow と filter: drop-shadow の違い – < /gecko >
（サンプルも修正しました）

まとめ

というわけで、CSSのみ画像不要の影付き吹き出しの作り方を三種列挙してみました。

今すぐ使わなくとも、今後「あれ？吹き出しに影が上手くつけられない！」みたいなことが起こったときのために、こんな方法があるというくらいに頭にとめておくのも悪くはないのではないでしょうか。