/ best free open source web resources /

Graphic Resources

Pure CSS Speech Bubbles & Social Media Icons

Posted · Category: Information

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…

  • Awesome

    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

  • michelle

    nice bubbles, would use in my website in voting box section http://dezineidea.com

  • Harvey E.

    Very amazing! I just started learning CSS. – Harv Eker

  • Looks great with Chrome and Firefox but doesnt seem to work with IE

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons