Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. Nicolas Gallagher has written a tutorial: Pure CSS Speech Bubbles, which 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.
You can also look at the tutorial: Pure CSS Social Media Icons, which creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.
Source: Pure CSS Speech Bubbles
Source: Pure CSS Social Media Icons





Good for testimonials pages
Those are some ugly speech bubbles…
They’re not ugly. They’re awesome! Must have taken a long time.
Very cool.
Some cool looking bubbles! Purely done in CSS that’s amazing. Great if you have a testimonials page, they’d be even better used on a wordpress comments page. Nice post
nice bubbles, would use in my website in voting box section http://dezineidea.com
RSS feed for comments on this post · TrackBack URI