Great Examples of Drawing With CSS

Great Examples of Drawing With CSS

I’ve always been a fan of drawing page components with pure CSS rather than using image support. Although rendering the page with CSS can sometimes be a pain, the rewards of fewer HTTP requests & less download time make it well worthwhile.

Until recently, most web designers and developers couldn’t design using CSS alone, because there simply wasn’t enough cross-browser support for all the wonderful CSS3 attributes.

However, with IE9 just around the corner and Opera 10.5 already released, we are extremely close to the point where we can render web pages in CSS3 across all modern browsers (IE, Firefox, Chrome, Safari, Opera). Legacy browsers won’t get left out, since our CSS3 pages can degrade gracefully to square corners, flat-color backgrounds, etc. Additionally, we can use browser-specific stylesheets that include plain old image support for key design elements that shouldn’t degrade.

CSS3 makes drawing elements with CSS a whole lot nicer. Besides easy-to-use attributes such as border-radius and box-shadow, CSS3 introduces some very versatile new attributes such as RGBA opacity on any element with color, and a variety of CSS gradients on background, text & borders.

Let’s go through some examples of drawing with CSS so you get just as excited as I am:

CSS Triangles

CSS triangles

Although CSS3 support makes drawing pages with CSS a lot easier, the concept is by no means new. Here’s a trick for rendering triangles of any shape using CSS alone. Works in all browsers down through IE6.

CSS Speech Bubbles

CSS Speech Bubbles

These CSS speech bubbles take the CSS triangle trick to the next level, combining it with rounded rectangles to form a wide variety of speech bubbles. Check out the link for all the different options.

CSS3 Raindrop

CSS Raindrop

This pure CSS3 raindrop is simply gorgeous. It uses a number of gradients as well as other tricks for a stunning image-less result.

Opera Logo in CSS

CSS Opera Logo

David Desandro built this CSS Opera logo a few weeks ago. Notice the screenshots of how nicely it degrades across older browsers / IE.

Safari Rendered With Safari

Safari UI rendered with Safari

How meta! Check out this Safari UI rendered using Safari. As the page says, “A good browser should be able to reproduce itself”.

CSS3 Aqua Button

CSS3 Aqua Button

This Aqua Button built in using CSS3 gradients is a really nice alternative to image based buttons. Think of all the images you’ll save, since most UI buttons have a static, hover & click state.

Did I Miss Any?

There are tons of great pure CSS rendering demos out there. Please post any ones I missed in the comments below (if they don’t use any images).

Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.

You Might Also Like:

12 Comments to “Great Examples of Drawing With CSS”

  1. Andy Jordan says:

    Very interesting post, I will be attempting some CSS shapes now for sure 🙂

  2. Jeffrey Ayer says:

    I created a CSS Washing Machine intended for FireFox.

  3. Jon Raasch says:

    Good stuff Jeff!

  4. mehran says:

    Thank you dear Raasch,
    I copied and using some of your codes, so much tanks to your nice web site. 🙂

  5. Love the CSS raindrop 🙂

  6. Phil D says:

    That CSS Washing Machine is amazing!!!

    How much time did you take to make it?

  7. Zach Mathews says:

    Did you know that browsers use CSS for their UI? I was amazed that I could get rid of that orange button in the new firefox 4 with pure CSS. I could even make it transparent if I wanted to.

  8. mayur says:

    It’s Informative for me.
    Thanks a lot 🙂

  9. Sani says:

    Very nice 🙂

  10. tortorse says:

    I just drew an angrybird with pure CSS,no canvas,no SVG.

  11. Shif says:

    the raindrop only works in firefox, all the css properties are on -moz

  12. Mark says:

    Awesome stuff. I still have trouble drawing with paper and pen.

Comments are closed.