written on:11 Feb, 2008 by Alen Grakalic

Pure Css Icon Sketcher

Delicious StumbleUpon Reddit Subscribe

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.

About the author

cssglobe's image

Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

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

Delicious StumbleUpon Reddit Subscribe

Read more! Here are our most recent articles:

View All Articles

Comments

  1. warnis 11 Feb, 2008

    Haha that's use for CSS that's never crossed my mind. Very clever, kudos!

  2. Dejan Cancarevic 11 Feb, 2008

    it's great ;)

  3. Ivan Nikolic 11 Feb, 2008

    Hehe, this is awesome! :))

  4. Lim Chee Aun 12 Feb, 2008

    Interesting trick :D Now we need more colors...

  5. Azeem 12 Feb, 2008

    Heh, nice. At least it's innovative!

  6. Jacorre 12 Feb, 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 13 Feb, 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 15 Feb, 2008

    Very Clever! .. Great job thinking outside the box!

  9. Fedmich 17 Feb, 2008

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

  10. Polkovnik 19 Feb, 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 23 Feb, 2008

    Genius!

  12. Boris 14 Mar, 2008

    thats an amazing and unconventional way to sue css. great idea that brings some silly fun to css. hehehe

  13. Danish 18 Mar, 2008

    How did this come to your mind? :)
    It's cool idea :)

  14. dibos 11 Jun, 2008

    thanks man its very wonderful tutorial

  15. Nika Sew 14 Jun, 2008

    Clear idea. And it's really works with minimal time spending.

  16. marius 8 May, 2009

    how do you set the random number for each link ?

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

CSSG Ads

Useful Links

Friends