CSS Gradients in Action

Category: CSS

<p>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:

PLAIN TEXT

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;
}
.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)));
}

to create elements like this:

4 Comments »

Comments feed TrackBack URI

Funny, I just came across a tool at westciv to play around with gradients:

Gradientifier:
http://tools.westciv.com/gradients/

Comment by davidlantner — May 27, 2009

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.

Comment by JohnAllsopp — May 27, 2009

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.

Comment by artViper — June 9, 2009

@artViper: I think this is where “progressive enhancement” kicks in

Comment by icoloma — June 11, 2009

Ajax Questions and Answers

Caching and dynamic views
My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...

JQuery Function Not Defined?

Hi there,

I'm trying to set a php session variable from a radio button. The idea is that a jquery function is called which...

IE 8 Crashing Problem
Hello Everyone, Here\'s the situation: two iSeries boxes - Dev and Prod both V5R4M0 We\'re using AJAX to dynamically load content using a tabbed...