Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. Nicolas Gallagher has writen tutorial that contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects. The key is to use the :before and/or :after pseudo-elements to produce basic shapes. By applying CSS3 properties such as border-radius and transform you can produce more complex shapes and orientations.

Demo: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

Incoming search terms for the article:

• css3 buble
• css3 bubble
• css3 shapes
• css3 Speech Bubble
• css3 bubble shape
• Bubble CSS3
• CSS3 Speech Bubbles
• speech bubble css3
• buble css3
• pure css3 lightbox