枠線付きの吹き出し

ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;

[abeshin22]

@hayashikejinan つ

[visca__Barca]

cssでフキダシ

[asiamoth]

CSS3 だけで格好良く枠線をつける方法。引用文だけではなく、見出しや日付などでも応用ができるな。

[code404]

CSS だけで吹き出しを作る。

[sleepin-sheep]

IE6、7はNG

[iR3]

枠線付きの吹き出し SCSSコードも！

[june29]

CSS で吹き出し風の枠を実現するコード。

[o_hiroyuki]

cssで吹き出し

[fabled]

CSSで頑張る方法

[mooz]

:before 要素で左右の border を transparent にすると，三角形の尻尾をつくることができる．

[suzuken83]

borderプロパティで三角形が作れるとは知らなかった

[soratomo]

CSSのpartialでミックスインという言い方も気になる

[raimon49]

:before擬似要素に:after擬似要素をかぶせて切り抜き。

[hama_shun]

フキダシ

[kazutan711]

確かに使う機会はあまりなさそうだけど、チェックしとこ

[ufomap]

ボーダー付きの吹き出しデザイン

[ebo-c]

ポストモダンブラウザ(要出典)→ http://web.g.hatena.ne.jp/vantguarde/20080205/1202214646 最初に提唱したのはこのエントリかな？

[akiyan]

.

[efcl]

台詞風の枠付き吹き出しのCSS3 beforeとafterで吹き出し部分を表現

[adsty]

枠線付きの吹き出しを作るためのCSSの記述方法。

[ftype]

IEしなねえかなあ

[shinji_HK]

こんなことまでできるんですね。

[kasanka]

吹き出しかわいい

[hiro_y]

CSSだけで吹き出し、枠線付き。

[kkeisuke]

CSS3

[ToQoz]

吹出し

[akipponn3]

かわいい（＾＾）

[larker]

枠線付きの吹き出しの作り方

[kits]

SCSSサンプルあり。

[kentabookmark]

CSSって画像使わずにセリフみたいに出来るんだよ！