WebAppers

/ best free open source web resources /

Shopify

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.

css-speech-bubbles

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.

css-social-media

Source: Pure CSS Speech Bubbles
Source: Pure CSS Social Media Icons

7 Comments
  • http://turnkeye.com/ Turnkeye

    Good for testimonials pages

  • http://www.hipervinculo.net Raúl Riera

    Those are some ugly speech bubbles…

  • Awesome

    They’re not ugly. They’re awesome! Must have taken a long time.

    Very cool.

  • http://www.crearedesign.co.uk/ rory

    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

  • http://http//www.pokerdest.com Tobiasq

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

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons