超シンプルなマークアップで実現できる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 プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった部分を実現しているという。
更に次のような噴出しも「<p class="bubble thought">I think…</p> 」で実現。
何かを考えてる風の吹き出しに出来ます。radiusのプロパティを変えればもうちょっといい吹き出しにすることもできそう。
マークアップが綺麗になるのが何より嬉しいですね。CSS3最高です。
関連エントリ
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。
吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。
次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。
影もついてますね。
角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。
border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった部分を実現しているという。
更に次のような噴出しも「<p class="bubble thought">I think…</p> 」で実現。
何かを考えてる風の吹き出しに出来ます。radiusのプロパティを変えればもうちょっといい吹き出しにすることもできそう。
マークアップが綺麗になるのが何より嬉しいですね。CSS3最高です。
関連エントリ
スポンサード リンク
By.KJ : 2011年03月25日 09:08 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- すぐ隠れてくれるヘッダー実装「shyheader」
- 画像を円形でくり抜くためのUIを実装する「Cropme」
- スクロールで画像や文字がいい感じに拡大縮小されていくデモ「Smooth Scrolling Image Effects」
- あえてダサくして自分で１からデザインできる軽量なポップアップ「Uglipop」
- JSで楽譜を描画して再生までできる「abcjs」
- ページ内の画像をスムーススクロールするデモ
- Emailのドメイン部分のみオートコンプリートしてくれるjQuery「email-autocomplete」
- WEBページでダークモードに対応するためのJS「darkmodejs」
- PureJSでPDFの生成ができるライブラリ「pdfmake」
- タイプライターアニメーションを実装する「autotyperjs」
- 過去のエントリ
