written on:11 Feb, 2008 by Alen Grakalic

Pure Css Icon Sketcher

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

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 Digg StumbleUpon Reddit Subscribe to RSS Feed

Read more! Here are our most recent articles:

View All Articles

Comments

  1. warnis on 11 Feb, 2008 wrote:

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

  2. Dejan Cancarevic on 11 Feb, 2008 wrote:

    it's great ;)

  3. Ivan Nikolic on 11 Feb, 2008 wrote:

    Hehe, this is awesome! :))

  4. Lim Chee Aun on 12 Feb, 2008 wrote:

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

  5. Azeem on 12 Feb, 2008 wrote:

    Heh, nice. At least it's innovative!

  6. Jacorre on 12 Feb, 2008 wrote:

    I don't see anything happen when I click. The screen stays blank and nothing is drawn. I'm using Firefox 2.

  7. Catar4x on 13 Feb, 2008 wrote:

    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 on 15 Feb, 2008 wrote:

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

  9. Fedmich on 17 Feb, 2008 wrote:

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

  10. Polkovnik on 19 Feb, 2008 wrote:

    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 on 23 Feb, 2008 wrote:

    Genius!

  12. Boris on 14 Mar, 2008 wrote:

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

  13. Danish on 18 Mar, 2008 wrote:

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

  14. dibos on 11 Jun, 2008 wrote:

    thanks man its very wonderful tutorial

  15. Nika Sew on 14 Jun, 2008 wrote:

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

  16. marius on 8 May, 2009 wrote:

    how do you set the random number for each link ?

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Subscribe to CSSG Feed

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend