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 🙂
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.
Comments (16 Comments)
Sorry, the comment form is closed at this time.