[CSS]画像やスクリプトを使用せずに実装する、多彩なデザインのスピーチバブル

CSS2.1, CSS3を使用して、多彩なデザインのスピーチバブルを実装するスタイルシートをNicolas Gallagherから紹介します。

デモのキャプチャ

Progressive enhancement: pure CSS speech bubbles
デモページ

スピーチバブルのバリエーションは他にも多数あります。

デモのキャプチャ

これらは全てCSSで実装されており、一つ目のグラデーションは<div>テキスト</div>、<p>テキスト</p>で適用可能で、二つ目は<blockquote><p>テキスト</p></blockquote>で適用可能です。

更に多くのデモも掲載されています。

デモのキャプチャ

デモページ
※キャプチャはChrome

デモページではスピーチバブル用のスタイルシートもダウンロードできます。

sponsors

top of page

©2018 coliss