Wednesday, May 27th, 2009
CSS Gradients in Action
Chris Williams has been having some fun with CSS gradients on a quest to create nice looking elements without images.
He uses CSS like this:
CSS:
.albumInfo {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
height: 8em;
padding: 1em;
border-top: 1px solid #858585;
border-bottom: 1px solid #505050;
}
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
height: 8em;
padding: 1em;
border-top: 1px solid #858585;
border-bottom: 1px solid #505050;
}
.albumInfo h1 {
font-weight: bold;
text-shadow: 0px -1px 1px black;
font-size: 1.2em;
}
ul.tracks {
background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
width: 25.7em;
}
ul.tracks li.odd {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
}
Funny, I just came across a tool at westciv to play around with gradients:
Gradientifier:
http://tools.westciv.com/gradients/
Very nice subtle use of gradients, and a great example of progressive enhancement to boot.
Thanks for the mention of Gradientifier David – I only released it yesterday, and sent the Ajaxian folks an email abut it.
Right now it does linear gradients, but I’m working on radial (and SVG as well as CSS output) as well.
While looking nice, this is nothing to use in everydays design work, as it is propietary and only works in 2 browsers. So far, useless but nice looking.
@artViper: I think this is where “progressive enhancement” kicks in