They say programmers have a special personality type: we are able to dive in deep into very small details and stay with them until we find a solution.
I don’t know if that’s true or not, but I know this morning when I asked myself “Wouldn’t it be cool to have numbers inside of circles for signup pages?” I didn’t realize I was heading off on a multiple-hour adventure.
I was thinking of something like this:
So a couple of hours later, here it is:
First, this code is crap. I hate all the markup involved for something so simple and I suspect I could collapse it down quite a bit given time. It’s also pretty loose: I have a feeling there’s stuff in there that could easily be removed, and I’d like to comment it up some more. Also I could have spent a large chunk of my life worry about browser compatibility, but I did not. Works on webkit.
But this is the internet. You pays your money and you takes your chances. The main goal for me was to demonstrate to myself that this is possible. If I ever want to use it in production I’ll come back and honk around with it some more. Or not. If you need something similar, hopefully this can be a good starting point for you.
Some cool things you could do from here if you have the time and patience. Hover effects on these little guys would be awesome, as would making them work automatically in an ordered list — although I believe a bit of JQuery might be involved for that to happen.
Note that the shadows of each circle have a hint of the circle’s color in them. Also note the background of the circles around the circles are gradients, as are the backgrounds of the numbers themselves. You could have a nice red-to-yellow colored font for you numbers on a green-to-black circle if you wanted. Then you could make it dance around. And sing. But I’ll leave all of that as an exercise for the reader. I need to get back to actually working.
If you are interested using this, there’s a bit more complexity behind-the-scenes than you might expect.
Finally, here’s the code working on the page:
UPDATE: *sigh* I went back and added in the hover. Just too cool to pass up. So now they are numbered circles which also work as buttons. The comments show what to take out just to have them be numbered circles again.If you've read this far and you're interested in Agile, you should take my No-frills Agile Tune-up Email Course, and follow me on Twitter.