【CSS】背景で吹き出しを作成する

こんばんは。
Webコーダーの宇垣です。

たまにWebデザインとして上がってくる、吹き出しについて。

単色だと、CSSの擬似クラスbeforeとafterを使えば実装可能なソースはネット上にあります。

いつも参考にさせていただいています。
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive

今回は、画像を使わないと難しい吹き出しについて切り分けてみました。

背景画像は3枚重ねます。
スライスツールで1番上のパーツ、1番下のパーツ、繰り返し用のパーツでわけます。
注意する点は、吹き出し部分の背景部分は透過しないでください。

それとボーダーやドットの場合、繰り返し用のパーツも繰り返しが不自然にならない高さで切り抜きます。

濃いピンクの位置を見るとこの部分が妥当だと思われます。

.bg{ 
background:url(bg_01.gif)no-repeat top center,
          url(bg_03.gif)no-repeat bottom center,
          url(bg_02.gif)repeat-y top center;
}

背景を3階層重ね、中心部分を繰り返し指定にすることで、中にあるテキストの長さが伸びたり、レスポンシブ対応で改行が増えてコンテンツの高さがが変わった時にも柔軟に対応してくれます。