Micaela 7 de junio de 2009 a las 09.11
   Imprimir artículo
elWebmaster.com

Gradientes con CSS en acci贸n


css-gradienteLas 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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. Nicol谩s dice:

    Estooo… 驴Notaron que para mostrar el gradiente se usa un estilo de Webkit?… Luego entonces, s贸lo funciona en Safari o Chrome. Tal y como se dice en la p谩gina del autor: http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/

  2. Daniel dice:

    Muy bueno, lastima que solo funciona con webkit, (safari, chrome)…

    驴O me estoy perdiendo de algo en el codigo?

    title

    item 1
    item 2
    item 3
    item 4
    item 5

  3. javier dice:

    -webkit- cualquier cosa
    es CSS propietario de los motores basados en webkit. motor con el cual no est谩 escrito ni Opera, ni Firefox, ni mucho menos IE en cualquiera de sus versiones. Este efecto s贸lo funcionar谩 en Chrome y en Safari ya que ambos usan el motor webkit. La fuente que citan no dice nada de la compatibilidad crossbrowsing. Chequeen sino el ejemplo ud mismos.

  4. Alejandra dice:

    Gracias a todos por la correcci贸n. Ya est谩 arreglado ;)

  5. PP dice:

    SI NO FUNCIONA EN IE E IE TIENE MAS DE LA MITAD DEL MERCADO
    ENTONCES PARA QUE LO HACEN 隆隆

  6. Morton dice:

    Hola PP
    Probablemente se hace para complacer al resto del mercado que utiliza mejores navegadores que IE.
    隆Un saludo!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder