przemek

I'm html5 & css3 enthusiast. I also specialize in back-end programming (oo PHP, MySQL). When not coding, amateur musician and writer. Currently freelancer at purplebreak.com. My twitter profile @przemek

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Pierre-Louis says

    Hi,

    Like the collection you created. Like Saeed said, (get it?!?) it’s nice to see a lot of creativity in one place. Do you know if there are some PSD versions of these vectors anywhere? I would like to try my hand at customizing them a bit? Or really, just any old PSD icons?

  2. Saeed Neamati says

    I love these types of lists. You simply get lots of examples in one place, without searching much ;). In my opinion, Opera Logo is the masterpiece here. I think the level of CSS knowledge for producing it, is at not one, but many higher levels than an ordinary web designer.

  3. Dan says

    A very nice and interesting collection! Congratulations!

    I think that you will be interested in my website, and maybe you could add it to this collection.

    Thanks

  4. Jeffrey Bennett says

    Something tells me it’s ironic that you can’t view the Internet Explorer logo using Internet Explorer… Great collection regardless!

  5. Jason Sims says

    Clever idea, and really nice work. This isn’t a practical use of CSS though. SVG is far better suited for this purpose.

  6. says

    It is truly amazing the things you can do with CSS3. I would never have thought about creating icons using it. Normally I would have jumped into Photoshop to create these icons. I sure hope IE9 has full CSS3 compatibility. Even then, we’ll have to wait years before the web design world can use CSS3 without having to worry about Microsoft.

  7. Chris says

    While this is great and all, you REALLY need to proofread your articles. You have sentences that are missing at least 4 words, and you misspell “jQuery” multiple times.

  8. says

    Fantastic examples, it just goes to show what can be achieved with CSS. Although i think cross-browser compatibility could be an issue as a logo needs to be consistent throughout….
    Thanks for posting.

  9. says

    The hacker in me thinks these are really amazing. I can totally respect the effort it must have taken to create these.

    But my practical side fails to understand the use for this on a typical website or web application. Even if all browsers supported this, it seems like the amount of markup required would exceed the size of a simple PNG icon file. I suppose one use would be if you need to scale them really large, or allow dynamic scaling. Still, I don’t see myself needing these.

    So if the objective is to do cool stuff with CSS3, well done to those who created these! If there are other good use cases for actual sites and webapps, please explain!

    Tauren

    • stahlstift says

      Hey Tauren,

      think about a VectorGraphic (Inkscape, Illustrator) to CSS3 converter – that would mean no markup required for us coders and we could use images, that can scale in every direction. I am sure about the point, when css3 is accepted and used, there will be a converter :)

      Greetings,
      Markus

  10. przemek says

    I like that you like it. @aaron: Android icon is well made. Keep up your site and gather more resources for designers.

  11. IsTI37 says

    Really nice.
    When I first saw what it’s possible with CSS I didn’t believed my eyes.
    The iOS icons impressed me the most.

    I must try to make my logo in CSS3.

  12. aaron says

    Great round-up! I am particularly fond of the Bahamas recreation. I have showcased a few of these on my website, as well as created an Android logo using pure css.

    The Peculiar Icons set is great and looks very similar to a set I’m working that will be up soon on my site.