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