Wednesday, May 27th, 2009

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:

  1. .albumInfo {
  2.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
  3.     height: 8em;
  4.     padding: 1em;
  5.     border-top: 1px solid #858585;
  6.     border-bottom: 1px solid #505050;
  7. }
  8.  
  9. .albumInfo h1 {
  10.     font-weight: bold;
  11.     text-shadow: 0px -1px 1px black;
  12.     font-size: 1.2em;
  13. }
  14.  
  15. ul.tracks {
  16.     background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
  17.     width: 25.7em;
  18. }
  19.  
  20. ul.tracks li.odd {
  21.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
  22. }

to create elements like this:

Related Content:

Posted by Dion Almaer at 7:50 am
4 Comments

++++-
4 rating from 79 votes

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

Leave a comment

You must be logged in to post a comment.