超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル
2011年03月25日-
スポンサード リンク
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。
吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。
次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。
影もついてますね。

角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。
border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを2枚重ねることでとんがった部分を実現しているという。

更に次のような噴出しも「<p class="bubble thought">I think…</p> 」で実現。
何かを考えてる風の吹き出しに出来ます。radiusのプロパティを変えればもうちょっといい吹き出しにすることもできそう。

マークアップが綺麗になるのが何より嬉しいですね。CSS3最高です。
関連エントリ
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。
吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。
次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。
影もついてますね。

角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。
border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを2枚重ねることでとんがった部分を実現しているという。

更に次のような噴出しも「<p class="bubble thought">I think…</p> 」で実現。
何かを考えてる風の吹き出しに出来ます。radiusのプロパティを変えればもうちょっといい吹き出しにすることもできそう。

マークアップが綺麗になるのが何より嬉しいですね。CSS3最高です。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 1000以上の汎用アイコンセット「emblemicons」
- フリーのSVG背景イメージが入手できる「BGJar」
- 過去のエントリ