Android Icons: Get more than 15000 android icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

CSS drawings, 50 great examples

Comments and suggestions in here

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.

1. 3D CSS Puzzle by Stu Nicholls

CSS01

This puzzle was made completely with CSS, must have taken a lot of time.

2. Homer CSS by Roman Cortes

CSS02

This guy knew about the hidden potential inside CSS, and use to draw a simple but lovely character of all.

3. Drawing the Line by Stu Nicholls

CSS03

A simple pencil that draws a horizontal line.

4. The Snowman by Stu Nicholls

CSS04

A new year greeting can be made in CSS, easy way.

5. The star spangled banner

CSS05

The beautiful American flag, CSS version.

6. iPod with CSS3

CSS06

A realistic iPod made with CSS3, pretty cool graphic.

7. CSS social media icons by Nicolas Gallagher

CSS08

Using pure CSS2.1 and CSS3, this guy achieve to create the main social icons on the web.

8. CSS3 Raindrop by Sean Martell

CSS09

This raindrop is just awesome. A lot of patience must have been required to make it.

9. Opera Logo with CSS by David de Sandro

CSS10

This is all CSS, none Illustrator or similar software were used to create this Opera logo.

10. Bahamas Logo using CSS3 by ForestMist

CSS11

No Paint, no Illustrator, just CSS3. An exact copy of the original Bahamas logo.

11. Pure CSS Icons

CSS51

Simple, resizable and iconic are some of the words to describe this CSS icons series.

12. Doraemon with CSS3

CSS12

I love this one, long live to Doraemon.

13. CSS Triangular Parrot by Erez

CSS13

This is brilliant, I can hear this parrot talking to me.

14. CSS Reddit Alien by Matthew James Taylor

CSS14

You can create characters like this without using graphic software.

15. Sir culito by soycachanilla.com

CSS15

This character reminds me of the Pacman enemies, a good CSS3 design.

16. Pure CSS Twitter Fail Whale by Steve Dennis

CSS16

A beautiful CSS art, check the website to see how it looks on other browsers.

17. Curtis CSS Typeface by David Desandro

CSS17

Pure CSS3 has been used to create this typeface, pure code work.

18. Pacman CSS by Roman Cortes

CSS18

Pacman CSS uses no images, just resizable and vectorial CSS make with a lot of code lines, nice one by Ramon.

19. CSS House by Chris Hester

CSS19

This house was one of the first CSS experiments back in the day. None graphic software used.

20. CSS House 2 by Chris Hester

CSS20

After House 1, Chris decided to try one more time with CSS, this is the final result of that exploration.

21. CSS Pencils by Chris Hester

CSS21

This is very nice. Not only the pencils are made with pure CSS but you can also modify its colors.

22. Bush CSS by Roman Cortes

CSS22

Did you thought Homer Simpson was funny?, well, think again.

23. CSS Landscape by Metalorgy

CSS23

In this site, you can see how the artist created this beautiful landscape with pure CSS.

24. CSS Flower by Rob Glazebrook

CSS24

This page shows you a tutorial on how to make a CSS artistic flower.

25. Pure CSS Data Chart by CSS Glob

CSS25

This data chart made with CSS looks even better than the ones Office provide.

26. SIGT logo by Roman Cortes

CSS26

I’m not completely sure about the author of this CSS logo, but most people say that is a work by Roman Cortes.

27. A Lego House by CSSplay

CSS27

Pure CSS can make something like this, the Lego house!!!.

28. The British Flag Version 1 by Stu Nicholls

CSS28

It seems complicated, but you can find on the link how to create this flag step by step using CSS.

29. Tunisia and other countries flags by Kseso

CSS30

In this page you can find a few cool flags made with CSS.

30. The British Flag Version 2 by Stu Nicholls

CSS29

This British flags looks almost the same to the previous, in any case, you can see how the making method has been improved.

31. CSS3 Experiment by insicdesigns

CSS31

With the arrival of CSS3, create elements like the ones above has became possible without tracing a single brush line.

32. Wacky CSS example by Ro London

CSS32

You can make this night scene with pure CSS, believe it!.

33.  Random art by Nielsen

CSS33

This is a simple game of angles, colors and shapes, very nice stained glass.

34. Digital Clock by Mauricio Silva

CSS34

CSS allows you to create simple but still cool things like this digital clock.

35. CSS Art – Mondriaan- by Mark Schenk

CSS35

This is an identical replica of the Piet Mondriaan painting.

36. Windows Keyboard Layout by SEO Consultants

CSS36

The guys from SEO Consultants have brought us this CSS keyboard, although they say that is still a working progress.

37. CSS Lampa by Jan Bien

CSS37

Very simple shapes, enough to communicate you that you’re seeing a lamp. You can also turn it on and off.

38. Cat Avatar by Stu Nicholls

CSS38

Well, I’m not sure that this is a cat, but at least is an animal, a CSS one.

39. Snooker Table by Claire Campbell

CSS39

Using bullets and border, Claire managed to create this pretty cool table, with balls and everything.

40. Desktop Computer by David House

CSS40

This looks kind of funny, it reminds me of the first computer mi parents brought to my house.

41. Stacked Cubes Q*Bert Style by Jack Ratcliff

CSS41

A CSS design inspired in the classic Q*Bert game.

42. No Image Aqua Button by Girliemac

CSS42

With CSS3, you can design beautiful things, such as this glossy button.

43. Basic Tangram Set by Mark Schenk

CSS43

Imagine the possibilities if you can create the basic tangram figures in CSS.

44. Running Man by Mark Schenk

CSS44

As we said, having the tangram done, the possibilities grow exponentially.

45. Star of Slants

CSS45

Basic shapes can be used to create pretty cool graphics.

46. Pixel Warp Pipe CSS Demo by rocco augusto

CSS46

I’m sure most of you know where this tube comes from.

47. Pixel Mushroom CSS Demo

CSS47

ok if there was someone who did not know where the tube came from, now he will remember.

48. Cookieface by Roman Cortes

CSS48

Simple shapes, cool idea, nice CSS by Roman Cortes.

49. CSS3 Zoom!! by Roman Cortes and Stu Nicholls

CSS49

With CSS3, the use of gradients, shadows and glows is now possible, as Roman and Stu have show us through this logo.

50. Internet Explorer pure CSS logo by Andreas Jacob

CSS50

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.


test

22 Responses to “CSS drawings, 50 great examples”

  1. Wonderful Collection, thanks for share!

  2. Great collection, such wonderful content already on this new blog. Keep up the great work,

  3. iconoclast
    July 13th

    CSS3 leaves us some very exciting possibilities… thanks for the post!

  4. takezo316
    July 13th

    Excelent drawings, I want CSS3 already working on any browser, it would make mi life a lot easier.

  5. Hi everyone, thanks for the feedback, coming soon more great articles.

  6. I just visited your site via Facebook..I found myself regurgitating what you said in your 1 and 2 points while answering the three questions. =) I’ll be brief insteadwould you be interested in becoming weblog partners?

  7. It\\\’s good right here. good research. I\\\’ve been searched this kind of information for quite a while. thanks

  8. Wherever is it, i like to read more about this particular post, thanks.

  9. This is a great post about style. I’m a student just trying to learn more about trends and I really enjoyed your post. Keep up the great job!

  10. Kseso?
    July 26th

    Thank you for including my CSS3 flags in your article.
    Just one more thing, could you change the name of the author “Ramajero Argonauta” by my nick “Kseso?” ?
    Gracias de nuevo.
    Un saludo

  11. superb blog & writing skills. you make this look easy lol. Keep up the great work I’ll be back to read more of your posts later my friend!

  12. Rafa Cano
    May 3rd

    This post has made me smile. Thanx!

    • WebDesignShock
      May 4th

      Who would’ve thought that, thanks Rafa!…

  13. Hi..
    Thanks for sharing this information its all about CSS Drawing its really nice and good collection of CSS Drawing templets
    web design company India

  14. this is nice collection

  15. [...] height:30px; width:85px; margin:4px 4px 4px 4px; } Tweet Having read different blog about css drawings of opera icon, pure css icons, etc. I also got inspired to do something similar drawing in css. I [...]

Leave a Reply

Comments

*