Pure Css Icon Sketcher

written on:11 Feb, 2008 by Alen Grakalic

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.

About the author:

cssglobe's image Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Comments

warnis on 11 Feb, 2008 wrote:

Haha that's use for CSS that's never crossed my mind. Very clever, kudos!
Dejan Cancarevic on 11 Feb, 2008 wrote:

it's great ;)
Ivan Nikolic on 11 Feb, 2008 wrote:

Hehe, this is awesome! :))
Lim Chee Aun on 12 Feb, 2008 wrote:

Interesting trick :D Now we need more colors...
Azeem on 12 Feb, 2008 wrote:

Heh, nice. At least it's innovative!
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.
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 !
Steven Wilson on 15 Feb, 2008 wrote:

Very Clever! .. Great job thinking outside the box!
Fedmich on 17 Feb, 2008 wrote:

Wow, impressive idea. But it really is useless though :)
Btw, you made me/us smile by that demo.
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
Akai on 23 Feb, 2008 wrote:

Genius!
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
Danish on 18 Mar, 2008 wrote:

How did this come to your mind? :)
It's cool idea :)
dibos on 11 Jun, 2008 wrote:

thanks man its very wonderful tutorial
Nika Sew on 14 Jun, 2008 wrote:

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