Morton 2 de noviembre de 2010 a las 09.11
   Imprimir artículo
elWebmaster.com

CSS3: Cómo crear gradientes sin usar imágenes


css3wide1Los gradientes CSS3 est√°n disponibles para ser utilizados con los navegadores con Webkit (Safari, Chrome) y Mozilla (Firefox). No son exactamente nuevos, pero es hora de empezar a utilizarlos.

Fuente original del artículo: Lee Munroe
Traducción realizada por elWebmaster.com

Entonces… Necesitas un gradiente, lo creas con CSS3. Pero, ¬ŅPor qu√© no utilizar im√°genes? Simple, estas son las razones:

  • Brinda mayor flexibilidad
  • Menos inconvenientes
  • Menor tr√°fico HTTP
  • Escalable

Así es como se aplica, dependiendo el estándar:

W3C

  1. linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
  2. radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Mozilla (Firefox)

Es como W3C, aunque utilizando -moz-

  1. -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
  2. -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Webkit (Safari, Chrome)

  1. -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Algunos ejemplos de utilización:

Gradiente lineal

  1. html{
  2.   height:100%;
  3. }
  4. body{
  5.   background-color:#440951;
  6.   background-image: -moz-linear-gradient(top, #b032cb, #440951);
  7.   background-image: -webkit-gradient(linear, left top,left bottom, from(#b032cb), to(#440951));
  8.   background-image: linear-gradient(top, #b032cb, #440951);
  9. }

Haz clic aquí para ver una demostración del gradiente lineal >>

Gradiente radial

  1. html{
  2.   height:100%;
  3. }
  4. body{
  5.   background-color:#440951;
  6.   background-image: -moz-radial-gradient(center 45deg,circle cover, #b032cb, #440951);
  7.   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#b032cb), to(#440951));
  8.   background-image: radial-gradient(center 45deg,circle cover, #b032cb, #440951);
  9. }

Haz clic aquí para ver una demostración del gradiente radial >>

Fuente original del artículo: Lee Munroe
Traducción realizada por elWebmaster.com


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

Comentarios (3)

  1. Alberto dice:

    Interesante tutorial. ¬ŅC√≥mo haces para colorear el c√≥digo fuente?

  2. beta2k dice:

    Muy bueno el articulo. Pero tengo un problema con el y wordpress, al hacer scroll hacia abajo me vuelve hacer el corte del degradado.
    Le he cambiado el height a body y a html pero nada.

  3. Ciencia Al Poder dice:

    Muy buen aporte. Yo ya lo conoc√≠a, pero est√° bien recordar esto de vez en cuando para aquellos que aun no lo sepan, pues se consiguen efectos muy interesantes y se ahorra el tener que usar im√°genes para eso, que ralentizan la p√°gina y no siempre funcionan si los elementos cambian de tama√Īo.

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