CSSでバブルタイプのblockquoteデザイン『CSS Speach Bubbles』

« キャンパスウェブデザイナーのためのインスピレーションサイト『edustyle』 | メイン | Webデザイン 超基本のお作法50選『MdN Interactive』 »

CSS | 07.02.12 09:25
はてなブックマーク

CSS Speach Bubbles

手軽にblockquote(引用)のデザインがしたい。

そんなあなたにおすすめなのが、『CSS Speach Bubbles』。CSSによるバブルタイプのblockquoteデザインだ。

このサイトでは、CSSでレイアウトされた、バブルタイプのblockquoteデザインを配布している。zipでダウンロードが可能だ。

ダウンロードすると、以下のファイルがゲットできる。

bubbles.css
rounded_corners.inc.js
tip-rounded.gif
index.html
tip-pimped.gif
tip.gif

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を読み込めばOKだ。

テスト環境は以下の通り。

* Internet Explorer 6 & 7
* Firefox 2.0
* Safari 2.0
* Opera 9.0

CSSでレイアウトしたデザインパーツ、何か作って配布してみたいですね。

今日のCREAMU

これいいな。blockquoteデザイン作ろうかな。

昨日は渋谷のベルギービールのお店(イドロパット)へ。
親しい友人といろいろ話せて楽しかった。

今日はまったりと制作かな。

この記事のトラックバックURL:

CSSでバブルタイプblockquote『Bubble Quote』を作りました。

先日のエントリーで紹介した『CSS Speach Bubbles』が好評だった...
CREAMU | 2007年2月15日 00:05

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介し...
creazy photograph | 2007年9月 5日 00:30

コメント投稿

    サイトを作ったら、ディレクトリ登録
    メルマガ

    このブログをメルマガで購読するには、↓にメールアドレスを入力してください。

    配信:FeedBurner

    アーカイブ

    カテゴリー

    Powered by
    Movable Type 4.261
    あわせて読みたい
    フィードメーター - CREAMU
    人気のエントリー

    アーカイブ

    カテゴリー