Awesome Speech Bubbles With Pure CSS3

9 Mar

Nicolas Gallagher is sharing a creative way on creating good-looking speech bubbles with CSS3.

There are no images or JavaScript in the implementations but uses the :before and/or :after pseudo-elements to produce basic shapes.

The HTML remains semantic however we should remember that CSS3 is not fully supported by all major browsers & we may again require JavaScript to add this support (like IE7.js).

Compatibility: Browsers With CSS3 Support
Website: http://nicolasgallagher.com/progressive-enhancement-...
Demo: http://nicolasgallagher.com/demo/pure-css-speech-bub...

Tags: CSS3 Speech Bubble
Filed under: Design, License Free, Xhtml & Css
5 Comments

5 Responses for "Awesome Speech Bubbles With Pure CSS3"

vince March 9th, 2010 at 3:36 am
All this lovely CSS3 stuff but as a developer I can’t use it to its full potential because of browsers that don’t support CSS3 – Shame really, as they don’t look good in IE7

Nicolas Gallagher March 9th, 2010 at 4:21 am
Hi, the basic bubble effects actually only require adequate CSS2.1 support. Thanks for mentioning my article.