CSS3でちょっと良い感じの吹き出しを作ってみた

ほんのちょっとCSSの勉強をしたので、CSSだけで吹き出しを作ってみました。

CSS3で吹き出し

CSSだけで吹き出しを作ってみた

ほんのちょっとCSSの勉強をしたので、CSSだけで吹き出しを作ってみました。

10日でおぼえるCSS/CSS3入門教室
大藤 幹
翔泳社
売り上げランキング: 101,438
コード

とりあえずベタに「角丸」「グラデーション」「吹き出しの三角」あたりを実装してみた。

<br />
.balloon {<br />
  border-radius:8px;<br />
  position:relative;<br />
  padding:10px 10px;<br />
  background: #9bd6f2;<br />
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #9bd6f2), color-stop(0.00, #d5f1fb));<br />
  background: -webkit-linear-gradient(#d5f1fb, #9bd6f2);<br />
  background: -moz-linear-gradient(#d5f1fb, #9bd6f2);<br />
  background: -o-linear-gradient(#d5f1fb, #9bd6f2);<br />
  background: -ms-linear-gradient(#d5f1fb, #9bd6f2);<br />
  background: linear-gradient(#d5f1fb, #9bd6f2);<br />
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5f1fb', endColorstr='#9bd6f2', GradientType=0); /* IE7,8,9 */<br />
}</p>
<p>.balloon:after {<br />
  border-color:#9bd6f2 transparent transparent;<br />
  border-style:solid;<br />
  border-width:16px 16px 0;<br />
  bottom:-16px;<br />
  content:&amp;quot;&amp;quot;;<br />
  display:block;<br />
  right:24px;<br />
  position:absolute;<br />
  width:0;<br />
}<br />

こんな感じの吹き出しができるよ

上記のコードで、次のような吹き出しができます。

こうなるよ

吹き出しの下に表示位置などを指定した画像を添えると、キャラクターが喋ってるような表現もできます。

IE爆発しろ

古いIE用にグラデーション再現させるために「filter」を使ってるんだけど、角丸の「border-radius」と共存できないみたい。

ie9で-ms-filterとborder-radiusを設定するとグラデがはみ出す – jsdo.it – Share JavaScript, HTML5 and CSS
要素とは別のレイヤーでfilterがかかっていて、そのfilterレイヤーには角丸が効かない? …

[CSS3]今から出来るIE対策 「影とグラデーション編」 | CreaMo!-クリーモ!-クリエイティブをMotto!集めるブログ
IEはグラデーションをfilterで効かせると角丸(border-radius)が効かなくなります。 …

PIE.htc とか使わない場合は、どっちかすてるしか無いのかな。

今さらだけどCSSすごい

他にもCSSだけで色んな吹き出しが作れるらしい。

CSSだけで簡単に吹き出しを作成する方法4つ! : アシアルブログ

CSSで吹き出し作るのって、手の込んだイメージがあったのですが、仕組みを理解した上でやってみると意外と簡単ですね。いろいろと試してみたくなりました。

よくわかるHTML5+CSS3の教科書
大藤 幹
マイナビ
売り上げランキング: 2,909

星影

Tech Hunter代表。フリーランスエンジニア、ブロガー、ゲーマー。
ガジェット、アニメ、ゲームが好きなオタク。
レビューズ公認レビュアー。各種アンバサダー活動もしてます。

コメントを残す

メールアドレスが公開されることはありません。