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

Gradientes con CSS en acción

Diseño, Trucos, CSS, gradientes, gradient, degradé

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

Artículos relacionados

Comentarios (6)

  1. Nicolás dice:
    Domingo, 7 de Junio de 2009 a las 19.07

    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:
    Domingo, 7 de Junio de 2009 a las 20.00

    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:
    Lunes, 8 de Junio de 2009 a las 05.10

    -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:
    Lunes, 8 de Junio de 2009 a las 13.31

    Gracias a todos por la corrección. Ya está arreglado ;)

  5. PP dice:
    Viernes, 14 de Agosto de 2009 a las 11.11

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

  6. Morton dice:
    Viernes, 14 de Agosto de 2009 a las 11.33

    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
Iniciar sesión