Last Monday was day 1 of my post-SXSW initiative to set aside time each week for web design and development learning. I took a tip from one of the sessions I attended, Getting Good: Practical Tips for New Designers, which was to pick one problem to solve at a time and learn how to solve it.
I’d begun a website for my upcoming family reunion, but I had not yet completed the buttons on the registration page. The buttons, one for registering online and one for registering offline, use CSS sprites which combine all of the button art for inactive states and active hover states. The buttons then link to the next step for the respective registration option.
This was my first work with CSS sprites, which was pretty easy. The most difficult part was the on hover action, which required having some sort of element within the <a> tag, not having that element show and, an issue I that I hadn’t thought about before my readings, having an alternative for users who have images turned off but CSS turned on.
In the before I had not yet mastered sprite positioning and my link text is showing. I had also not yet even added the actual links. In the finished work I’ve corrected my image in PhotoShop — I’d used a jpg instead of a png so my button corners were not transparent, and the online button text was not correctly positioned for the hover state, so the transition was not seamless — I corrected the dimensions of the parent element and the position of the background image, I used a transparent gif to have text without having text in the <a> tag, then I had to turn off my default img decoration. Here is the finished product: http://reunion2012.areliajones.com/register.htm.
My next steps are to try to consolidate the CSS more and to play with the CSS declarations so that I understand what each one is doing.
These were the articles I used to create the buttons and get them working:
How to Create a Slick and Clean Button in Photoshop (http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/) – I initially copied the CSS and HTML from this tutorial but I ended up having to use the other resources to actually learn the needed code and make the feature work.
Sitepoint – Background-position (http://reference.sitepoint.com/css/background-position)
Hide the Text of a Link and Show a CSS Image (http://makeitmobile.wordpress.com/2008/05/08/hide-the-text-of-a-link-and-show-a-css-image/)
There are probably aspects that I should have done differently, so feedback is welcome.