CSS gradients

Something I've come across this last week is styling menus with CSS, that normally would have a gradient background.

It all started because my screen broke about 2 weeks ago and I couldn't use photoshop. So I decided that since I can't just stop building my freelance projects, I'll have to figure out another way to make it work. And voilá: MY CSS gradient was born.

The way it works is basically giving an element a background color and a top and bottom border, very similar but not exactly the same as the background color. The end result looks something like this:

And to make it even more interesting, I could use another background/border color scheme for the hover state :-)

Please check out my latest project, Kingdom Living Health Ministries, to see what I've done with this technique

May 4th, 2010