CSS drawings, 50 great examples
As Wikipedia says, Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. But beyond the web design, you can use CSS to create some pretty cool graphics, as the ones we show you below.
This puzzle was made completely with CSS, must have taken a lot of time.
This guy knew about the hidden potential inside CSS, and use to draw a simple but lovely character of all.
A simple pencil that draws a horizontal line.
A new year greeting can be made in CSS, easy way.
The beautiful American flag, CSS version.
A realistic iPod made with CSS3, pretty cool graphic.
Using pure CSS2.1 and CSS3, this guy achieve to create the main social icons on the web.
This raindrop is just awesome. A lot of patience must have been required to make it.
This is all CSS, none Illustrator or similar software were used to create this Opera logo.
No Paint, no Illustrator, just CSS3. An exact copy of the original Bahamas logo.
11. Pure CSS Icons
Simple, resizable and iconic are some of the words to describe this CSS icons series.
I love this one, long live to Doraemon.
This is brilliant, I can hear this parrot talking to me.
You can create characters like this without using graphic software.
This character reminds me of the Pacman enemies, a good CSS3 design.
A beautiful CSS art, check the website to see how it looks on other browsers.
Pure CSS3 has been used to create this typeface, pure code work.
Pacman CSS uses no images, just resizable and vectorial CSS make with a lot of code lines, nice one by Ramon.
This house was one of the first CSS experiments back in the day. None graphic software used.
After House 1, Chris decided to try one more time with CSS, this is the final result of that exploration.
This is very nice. Not only the pencils are made with pure CSS but you can also modify its colors.
Did you thought Homer Simpson was funny?, well, think again.
In this site, you can see how the artist created this beautiful landscape with pure CSS.
This page shows you a tutorial on how to make a CSS artistic flower.
This data chart made with CSS looks even better than the ones Office provide.
I’m not completely sure about the author of this CSS logo, but most people say that is a work by Roman Cortes.
Pure CSS can make something like this, the Lego house!!!.
It seems complicated, but you can find on the link how to create this flag step by step using CSS.
In this page you can find a few cool flags made with CSS.
This British flags looks almost the same to the previous, in any case, you can see how the making method has been improved.
With the arrival of CSS3, create elements like the ones above has became possible without tracing a single brush line.
You can make this night scene with pure CSS, believe it!.
This is a simple game of angles, colors and shapes, very nice stained glass.
CSS allows you to create simple but still cool things like this digital clock.
This is an identical replica of the Piet Mondriaan painting.
The guys from SEO Consultants have brought us this CSS keyboard, although they say that is still a working progress.
Very simple shapes, enough to communicate you that you’re seeing a lamp. You can also turn it on and off.
Well, I’m not sure that this is a cat, but at least is an animal, a CSS one.
Using bullets and border, Claire managed to create this pretty cool table, with balls and everything.
This looks kind of funny, it reminds me of the first computer mi parents brought to my house.
A CSS design inspired in the classic Q*Bert game.
With CSS3, you can design beautiful things, such as this glossy button.
Imagine the possibilities if you can create the basic tangram figures in CSS.
As we said, having the tangram done, the possibilities grow exponentially.
45. Star of Slants
Basic shapes can be used to create pretty cool graphics.
I’m sure most of you know where this tube comes from.
ok if there was someone who did not know where the tube came from, now he will remember.
Simple shapes, cool idea, nice CSS by Roman Cortes.
With CSS3, the use of gradients, shadows and glows is now possible, as Roman and Stu have show us through this logo.
Inspired by the guys that made the Opera logo, Andrea decided to create the IE logo. You need Mozilla Firefox 3.6 to see it perfect.
OK, as we have seen throughout this countdown. Its not always the tool the one that’s behind a master piece, but a master hand that is able to create the most beautiful things with the most simple tools. See you in the next countdown.