読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

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

Web Web-ホームページ制作

f:id:yamato-ugaki:20170313200626j:plain

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


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

f:id:yamato-ugaki:20170313200703j:plain

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

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


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

f:id:yamato-ugaki:20170313203221j:plain

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

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

f:id:yamato-ugaki:20170313203529j:plain
濃いピンクの位置を見るとこの部分が妥当だと思われます。




f:id:yamato-ugaki:20170313204820j:plain

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

ページトップ