前の記事 ≪：超クールなドット絵背景画像がダウンロードできる「Kaliber10000」
次の記事 ≫：Wiiブラウザ風CSSボタンを作成「Wii Buttons」

CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」

2007年02月19日-はてなブックマーク

スポンサード リンク
willmayo.com CSS Speech Bubbles
Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict.

CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。
次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。



HTMLコードは次のようにクリーンにできます。

<div class="bubble">
<blockquote>
<p>Works great for blog comments!</p>
</blockquote>
<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
</div>

角丸部分にはCSSだけでなく、JavaScriptも使っているようです。

ブログのコメント部分なんかに使うと効果を発揮しそうなデザインですね。

関連エントリ

関連の記事検索：CSS, JavaScript, デザイン, 吹き出し, Webデザイン, Web制作
スポンサード リンク

By.KJ : 2007年02月19日 10:02 ブックマークに追加する livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitterでお願いします(クリック)