Las gradientes CSS nos permiten emular gradientes sin tener la necesidad de utilizar Photoshop, Fireworks o cualquier programa de edición de imágenes.

Es un efecto que se logra simplemente mediante la implementación de CSS, sin nada de javascript y mucho menos Flash. Funciona con Safari y Chrome.

Aquí hay un bonito ejemplo de gradientes CSS puestas en acción:

Implementación de gradiente en CSS

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. .albumInfo h1 {
9. font-weight: bold;
10. text-shadow: 0px -1px 1px black;
11. font-size: 1.2em;
12. }
13. ul.tracks {
14. background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
15. width: 25.7em;
16. }
17. ul.tracks li.odd {
18. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
19. }

Fuente: Ajaxian

[[Sigue en: http://cursotallers.blogspot.com]]