To continue the trend of CSS3 gradients, I want to get a quick post out there about the advantages of using CSS3 for reflection gradients. Back in the day (well, still today until CSS3 is fully adopted) creating a scalable styled button was quite an endeavor.

This button was something I used on a recent project - it had to be scalable and styled exactly as seen. What you see requires some bulky images and html - in particular a <span> wrapped with an <a> wrapped with a <li>, and then an image sprite (or spliced images) to be positioned perfectly with margins and padding in all the right places. It's Messy. It's Hard. Luckily, it's oh-so-easy to recreate it with CSS.

HTML

No complex nested elements here, just one simple anchor tab:

<div class="sample">
	<a href="#">Product Tour</a>
</div>

CSS3

A quick gradient, nice border and you're done!

.sample a {
    overflow: hidden;
	display: block;
	border: 1px solid #656565;
	font: 14px/33px Arial;
	text-shadow: 0 -1px 0 #1c1c1c;
	color: #FFF;
	padding: 0 18px;
	background: #181818;
	background: -moz-linear-gradient(top, #484848 0%, #393939 50%, #212121 50%, #131313 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#484848), color-stop(50%,#E393939BEBEB), color-stop(50%,#212121), color-stop(100%,#131313));
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

Using this technique saves time exporting a bulk image sprite (or even more bulky spliced images), and a lot of superfluous html as well. Nothing here is rocket science, just simplicity at work. Check out the final product.

Now I've been focused on buttons, but obviously the concept applies any time you've used images to accomplish shading and reflections.