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.

Share on FacebookTweet thisDeliciousStumbleUpon 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 : http://www.dbdreams.net/Sprite_creator.php 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

    Genius!

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.