posted on:February 11, 2008

Pure Css Icon Sketcher

Here’s an useless trick but I thought it’d be interesting to share. I am sure that you have seen online icon drawing applications. Looking at one of those recently I had an idea of how to draw old school pixelated shapes using only css. So I am presenting what might be a world’s first pure css drawer 🙂

Take a look at the Pure Css Icon Sketcher

The Concept

So how to “draw” with nothing but css? There’s not much to work with as you can imagine. My idea was to create a 32 x 32 grid made of <a> elements. Each <a> has random id and href attribute. By default links have “transparent” backgrounds. When link is clicked on, :visited pseudo class is applied. I have styled :visited links with dark grey background. So, marked as visited, link is no longer transparent.

That gives us a feeling that we’re coloring boxes and – actually drawing.

IE users will not be able to use this tool repeatedly because when page loads, IE treats all anchors as visited.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (16 Comments)

  1. warnis
    February 11, 2008

    Haha that's use for CSS that's never crossed my mind. Very clever, kudos!
  2. Dejan Cancarevic
    February 11, 2008

    it's great ;)
  3. Ivan Nikolic
    February 11, 2008

    Hehe, this is awesome! :))
  4. Lim Chee Aun
    February 12, 2008

    Interesting trick :D Now we need more colors...
  5. Azeem
    February 12, 2008

    Heh, nice. At least it's innovative!
  6. Jacorre
    February 12, 2008

    I don't see anything happen when I click. The screen stays blank and nothing is drawn. I'm using Firefox 2.
  7. Catar4x
    February 13, 2008

    hello, I'm french. And I have make and edited a sprite creator with colors. You can see in : It's a beautiful source !
  8. Steven Wilson
    February 15, 2008

    Very Clever! .. Great job thinking outside the box!
  9. Fedmich
    February 17, 2008

    Wow, impressive idea. But it really is useless though :) Btw, you made me/us smile by that demo.
  10. Polkovnik
    February 19, 2008

    I' am sorry, but it doesn't work for me. I can move the pixel, but I cannot paint... I am on XP, using Firefox2.0
  11. Akai
    February 23, 2008

  12. Boris
    March 14, 2008

    thats an amazing and unconventional way to sue css. great idea that brings some silly fun to css. hehehe
  13. Danish
    March 18, 2008

    How did this come to your mind? :) It's cool idea :)
  14. dibos
    June 11, 2008

    thanks man its very wonderful tutorial
  15. Nika Sew
    June 14, 2008

    Clear idea. And it's really works with minimal time spending.
  16. marius
    May 8, 2009

    how do you set the random number for each link ?

Sorry, the comment form is closed at this time.