Degradados con CSS

Aunque se trata de una característica experimental, sujeta a posibles cambios en el futuro, los navegadores más populares del mercado ya permiten hoy en día, en sus últimas versiones, la creación de fondos con degradados o gradientes sin necesidad de usar imágenes, utilizando exclusivamente CSS. Esto, cómo no, a excepción de Internet Explorer, con el que tenemos que usar su peculiar sistema de filtros.

Los desarrolladores del motor de renderizado que utilizan Safari y Google Chrome, Webkit, fueron los primeros en sugerir la creación de degradados utilizando CSS, a principios de 2008. Su implementación, disponible para Safari 4 y superiores y Google Chrome 1 y superiores, soportaba degradados lineales y radiales utilizando las sintaxis:

-webkit-gradient(linear, punto_inicio, punto_fin, parada[, parada]+)
-webkit-gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

Desde Mozilla se comenzó entonces a implementar una sintaxis similar a la de Webkit, ampliada, que se vería abandonada al poco tiempo, cuando la W3C propuso una sintaxis alternativa, que es la que se acabó por introducir en Firefox 3.6 (Gecko 1.9.2).

El borrador de la W3C define actualmente 4 funciones para la creación de degradados, a las que Mozilla añade el prefijo -moz-, por tratarse de una implementación propietaria de una característica experimental, que puede diferir de la de otros navegadores. Las funciones del borrador son:

  • linear-gradient(): para crear un degradado lineal
  • radial-gradient(): para crear un degradado radial
  • repeating-linear-gradient(): para crear un degradado lineal que se va repitiendo hasta el final del bloque
  • repeating-radial-gradient(): para crear un degradado radial que se va repitiendo hasta el final del bloque

A principios de este año 2011, Webkit (Safari 5.1 y Google Chrome 10) adoptó también estas funciones, aunque manteniendo las anteriores por razones de compatibilidad. Opera también se ha sumado a su implementación, introduciendo estas funciones en la versión 11.10 del navegador. Webkit y Opera utilizan, respectivamente, los prefijos -webkit- y -o- al utilizar estas funciones.

Por otro lado, Internet Explorer, como comentamos, no permite crear degradados con CSS, sino que tenemos que utilizar sus tristemente famosos filtros, y en concreto, el filtro gradient, disponible desde la versión 5.5. Estos hacen uso de DirectX, y pueden suponer un consumo exhaustivo de recursos, por lo que no os aconsejo excederos.

En resumen, para crear un bonito degradado entre dos tonos de azul, #2B93D2 y #77BCE6, que sea compatible con las últimas versiones de los navegadores más populares, podríamos hacer lo siguiente:

.degradado {
  /* Color alternativo para versiones que no soporten degradados */
  background-color:#2B93D2;

  /* Safari 4+ y Chrome 1+ */
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2B93D2), color-stop(1, #77BCE6));

  /* Safari 5.1+ y Chrome 10+ */
  background-image:-webkit-linear-gradient(#2B93D2, #77BCE6);

  /* Firefox 3.6+ */
  background-image:-moz-linear-gradient(top, #2B93D2, #77BCE6);

  /* Opera 11.10+ */
  background-image:-o-linear-gradient(top, #2B93D2, #77BCE6);

  /* Internet Explorer 5.5+ */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#2B93D2', EndColorStr='#77BCE6');
}

obteniendo el siguiente resultado (ten en cuenta que es necesario utilizar uno de estos navegadores para poder ver el resultado):

Veamos ahora la sintaxis exacta de estas funciones en cada uno de los navegadores.

Safari 4+ y Chrome 1+

Empecemos por la antigua sintaxis de Webkit. Los degradados lineales se crean de la siguiente manera:

-webkit-gradient(linear, punto_inicio, punto_fin, parada[, parada]+)

punto_inicio y punto_fin definen una recta que es la dirección en la que se aplicará el gradiente. Con left top como punto de inicio y right bottom como punto de fin, por ejemplo, el degradado se aplicará de la esquina superior izquierda a la inferior derecha.

Las “paradas” son funciones color-stop() que indican el color que tomará el degradado en un cierto punto de la línea. El valor color-stop(0.5, #333), indicaría que queremos un gris oscuro en la mitad del degradado. También se puede utilizar from() y to() para indicar el color al inicio y al final de la línea, respectivamente, en cuyo caso, obviamente, no hace falta especificar el punto.

El siguiente ejemplo crearía un degradado entre tres tonos de gris, de la esquina superior derecha a la inferior izquierda. Podéis ver el resultado un poco más abajo, si utilizáis Safari o Chrome.

background-image:-webkit-gradient(
    linear,
    right top,
    left bottom,
    color-stop(0.1, #88857D),
    color-stop(0.3, #999),
    color-stop(0.9, #CCC)
);

Los degradados radiales toman la siguiente forma:

-webkit-gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

centro_interno es el centro del círculo interno del degradado, mientras que centro_externo lo es del círculo externo. Se pueden utilizar las palabras clave left, center y right para designar la componente horizontal, y top, center y bottom para la componente vertical. También podemos usar porcentajes.

Por otro lado, radio_interno y radio_externo, como sus nombres indican, son los radios de estos dos círculos.

Por último tenemos una serie de paradas, que funcionan de forma similar a los degradados lineales.

Al utilizar la siguiente propiedad, por ejemplo:

background-image:-webkit-gradient(
    radial,
    center center,
    0,
    50% 50%,
    90,
    color-stop(0.1, #888),
    color-stop(0.3, #999),
    color-stop(0.9, #CCC)
);

el bloque tomaría el siguiente aspecto:

Safari 5.1+, Chrome 10+, Firefox 3.6+ y Opera 11.10+

Según el borrador de la W3C el degradado lineal se creará de esta forma:

linear-gradient([dirección,]?	parada[, parada]+);

O si queremos que el degradado se repita varias veces, hasta el final del bloque:

repeating-linear-gradient([dirección,]? parada[, parada]+);

El primer valor, opcional, es la dirección del gradiente. Este se puede especificar mediante un ángulo (0deg, 90deg, 200deg, …) o con un punto, siendo la dirección en este caso la línea que pasa por dicho punto y por el centro del elemento. Para especificar el punto se pueden utilizar las palabras clave left, center y right para la componente horizontal, y top, center y bottom para la componente vertical. En caso de no indicarse la dirección del gradiente, se utiliza top como valor por defecto, es decir, el gradiente iría de arriba a abajo en línea recta.

A continuación tenemos las paradas, compuestas por los colores, y, opcionalmente, la posición en la línea en la que se situará dicho color.

Las siguientes propiedades, por ejemplo, crearían un degradado entre dos tonos rojos en un ángulo de 170º, situándose el primero de los tonos a 30px del inicio de la recta y el segundo a 50px:

background-image:-moz-linear-gradient(170deg, #E04141 30px, #CD2727 50px);
background-image:-webkit-linear-gradient(170deg, #E04141 30px, #CD2727 50px);
background-image:-o-linear-gradient(170deg, #E04141 30px, #CD2727 50px);

Para los degradados radiales se utiliza la siguiente sintaxis:

radial-gradient(
	[centro,]? 
	[externo,]? 
	parada[, parada]+
)

El primer valor, opcional, es el centro del círculo interior en el que comienza el degradado. Si se omite, el valor por defecto es center.

El segundo valor, también opcional, define la circunferencia externa. Se indica primero la forma, usando las palabras clave circle (círculo, radio constante) o ellipse (elipse, radio vertical y horizontal), y a continuación el tamaño, usando las palabras clave:

  • closest-side: la figura externa toca el borde/s más cercano al centro del bloque
  • closest-corner: la figura externa toca la esquina/s más cercana al centro del bloque
  • farthest-side: la figura externa toca el borde/s más alejado del centro del bloque
  • farthest-corner: la figura externa toca la esquina/s más alejada del centro del bloque
  • contain: sinónimo de closest-side
  • cover: sinónimo de farthest-corner

Por último, se indican una o más paradas en la misma forma que los degradados lineales.

El siguiente ejemplo crea un degradado radial de rosa a rojo en la esquina superior izquierda:

background-image:-moz-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);
background-image:-webkit-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);
background-image:-o-radial-gradient(20px 20px, circle farthest-side, pink 0%, red 90%);

Internet Explorer 5.5+

Internet Explorer, como dijimos, también permite crear degradados, aunque para ello tendremos que hacer uso de su filtro progid:DXImageTransform.Microsoft.gradient. Su uso es bastante sencillo, por lo simple de su funcionalidad. Sólo hay que indicar el valor del color de inicio (startColorstr) y el de fin (endColorstr), de la siguiente forma:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8AAD28, endColorstr=#EEEFB1);



Comentarios
  1. que persona en su sano juicio con conocimientos de programacion usaria la basura de IE

    Responder

    • Bueno, IE 9 no es tan malo. No me extrañaría nada que hubiera personas con conocimientos avanzados que lo usaran.

      Pero sí, hay alternativas mejores.

      Responder

    • Luis

      El problema no es el sano juicio del técnico, el problema son los usosaurios 😉

      Responder

      • InikaDesign

        Concuerdo con Luis, como la mayoria de las compañias utilizan windows… por ende la gran mayoria de los usuarios utilizan IE, hay otras alternativas, pero como proveedores muchas veces debemos ajustarnos a lo que utilizan nuestros clientes.

        Responder

        • Es simple el cliente no sabe por eso contrata a un técnico, quien no sabe, no debe tener derecho a opinar. Que luego los informáticos sean todos unos arrastrados y terminen montando webs para que funcionen sólo en IE6 porque el cliente se lo pide es historia aparte.

          Responder

          • un pelín mal redactado/enredado lo que plantea @TeKNo dUKe, pero creo que por ahí va el tema de fondo.

            somos nosotros, los entendidos en la materia, quienes debemos guiar a los usuarios. ellos se dejan guiar.

          • KRM

            El problema es que el usuario no pide en realidad detalles técnicos, te pide resultados, y el resultado que espera es que sus usuarios puedan acceder al servicio.

          • anrose

            Cuando se crea una pagina web se hace de forma que se vea en todos los navegadores igual. No puedes hacer una web que cuando se abra con IE se vea muy fea, con firefox se vea muy pequeña, pero con chrome se vea bien.
            Las webs se hacen para que la vean diferentes usuarios con cualquier navegador. Si lo que quieres es una web para verla solo tu, entonces hazla como tu quieras…

          • Kivpson

            Pues la verdad es que somos los entendidos en la materia quienes debemos guiar a los usuarios, cuando un usuario solicita un sitio web o cualquier tipo de aplicación que funcione con un entorno web, el se adapta a las indicaciones del desarrollador, tengo varios sistemas que corren con entorno web y entre las especificaciones del manual de usuario les indico claramente que usen cualquier navegador excepto IE. Así mismo la persona encargada de la capacitación se encarga de explicarles el porque no usar IE y como usar mejores alternativas.

            FireFox y Chrome son navegadores muy reconocidos y usados por usuarios finales.

          • saiyo

            No se trata de NO opinar y/o ser arrastrados… se trata simplemente que si el cliente paga por algo, se le desarrolla eso… nada más ni nada menos,
            yo personalmente castigo en mis cobros cualquier filtro o aplicación que además de ser estandarizada también sea compatible con explorer (si mi cliente esta dispuesto a pagar, bien por el trabajo)

      • Carlos

        querras decir los DINOUSUARIOS… xD

        Responder

    • Jessy

      jaja opino lo mismo, aun no entiendo la existencia del IE

      Responder

      • roman

        IE existe solo para poder descargar el Chrome en windwos

        Responder

    • Marco

      En realidad no es que sea el developer quien lo use. En todo caso sería el usuario. Y la mayoría de gente (que no tengan conocimientos de computación, o tenga solo los básicos para trabajo de oficina) usan IE, desafortunadamente…

      Responder

  2. Por cierto, Opera 11.10 está en beta todavía, para los que sepan muy bien cómo andan los noruegos.

    Responder

  3. Silverdisc

    Ya decia yo, pensaba que tenia la 11.10, y en realidad tengo la 11.01…. Ya iba a trollear un poco con mi indignación si no me llego a fijar xD

    Responder

  4. Nada como colocar una imagen en vez del chorizo de CSS para la degradación…
    (Yo uso Explorer, aguante Explorer!)

    Responder

  5. Por fortuna la cuota de mercado de IE no hace más que descender. Aqui en México he visto como personas que usaban el IE por borreguera ahora usan Firefox o Chrome (especialmente el último, por alguna razón). Los beneficiados son los desarrolladores.

    Responder

  6. No se ustedes, pero yo desde que aparecio el Chrome me parecio el mejor ante todos, es sencillo, rapido y no pesa mucho como los el Firefox ni el Explorer.

    Responder

    • anonimus

      Chrome es para el usuario final, por lo simple, pero Mozilla es de lejos para la mesa de trabajo de un desarrollador

      Responder

  7. Cuando tenga un poco de tiempo voy a empezar a leer sobre CSS

    Responder

  8. falin

    Magnífico aporte. Estoy descubriendo CSS en un proyecto web en el que estoy metido y me ha encantado.

    Enhorabuena!

    PD: Cuando este montado ya lo mostraré

    Responder

  9. charlie

    IE9 trabaja directamente con el sistema operativo, le bajo el sombrero a windows por esto. en la administracion de los recurso es muy bueno. y mucho mas velos que firefox

    Responder

    • anonimus

      por eso te menten virus por esa coladera

      Responder

    • Kivpson

      Charlie parece ser que poco has probado el resto de navegadores, IE es pesado y lento, inseguro, compila muy mal y tolera errores o no se apega al estándar, eso provoca que desarrolladores que recién inician generen una mala conducta de desarrollo, el que un programa trabaje directamente con el OS no significa que sea eficaz, es más aquello es uno de los problemas de Windows, es intolerable que un programa eche abajo a todo el sistema operativo.

      Saludos.

      Responder

  10. GerweX

    Según Dortorpc es mejor usar una imagen que dicho código para crear un degradado.
    La idea de ésto es que un código carga más rápido que una imagen, por eso es mejor realizar un degradado con CSS, la única desventaja es se no funciona con IE.

    Responder

  11. omaro

    Me da risa muchos de ustedes, se creen informáticos y son unos cerrados de mente. Hay que saber manejar todas las tecnologías. Me parece que es patético que tu página funcione en el explorador que tú quieras. Hay que saber trabajar en todos los exploradores, que no puedan significa que carecen de los conocimientos para hacerlo.
    Si es que son informáticos de verdad tienen que trabajar con todas las tecnologías de la misma forma.

    Responder

    • anonimus

      Tu lo has dicho tecnologías, yo te pregunto desde cuando IE lo ha sido, este explorador en el mundo de la tecnología es como un producto chino

      Responder

    • Kivpson

      Omaro soy desarrollador no solo de aplicaciones web si no de aplicaciones de escritorio y móviles, y pues con respecto a tu comentario lo que puedo decirte es que aquello se aplica a sitios webs públicos, más no a aplicaciones con entorno web (entiéndase por aplicaciones dedicadas) ya que el cliente debe apegarse a las especificaciones de uso, y porque IE al ser un pésimo navegador no garantiza estabilidad, esto sin mencionar seguridad, y pues es una perdida de tiempo emplear muchas más lineas de código para que un entorno sea compatible con algo que no sirve, no se trata de falta de conocimientos, si no de tiempos de desarrollo y producción y esto se traduce en dinero, diferente es si el cliente solicita que la aplicación corra en IE por a o b motivo, pero créeme no se me ah dado el caso, todos entienden el porque no usar IE.

      Ahora si de web publica se trata, no está de más lanzar un mensaje en el sitio que indique que el sitio funciona mucho mejor con FireFox o Chrome y proporcionar instrucciones de como descargarlo e instalarlo, aquello ayuda a que usuarios finales conozcan mejores alternativas, y pues te comento que cada vez es menor el uso de IE.

      Saludos.

      Responder

  12. Hola, para ie9 solamente se agrega en la hoja de estilos el filter? o donde va?

    Saludos

    Responder

  13. El problema con las imagenes, si la intención es de colocarlas de fondo, es que toca diseñarlas en principio de acuerdo al tamaño final que uno quiere que tome en el sitio, pues de lo contrario se van a crear mosaicos que van a dañar la presentación de la página.

    Responder

    • Kesymaru

      Si eso es un echo, si necesitas aplicar un degradado de color a diferentes paginas, tablas y otros con diferentes anchuras y alturas lo mejor es el css, ademas de ser mucho mas rapido nos permite un usu mas generico, algo que en imagenes significaria crear barias y ajustarlas al tamaño requerido.

      Responder

  14. Kesymaru

    Una agregado, para internet explorer ese codigo no funciona bien, pero no es cualpa del programador sino del browser que nunca busca la compatibilidad clasico de M$ por otro lado creo que el codigo le falta algo al final GradientType=0, quedaria asi:

    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#92D050′, EndColorStr=’#ffffff’, GradientType=0 );

    Responder

  15. Cj

    Es el mejor tutorial que he visto hasta el momento de css, acerca de degradados, muchas gracias me ha sido de muchísima utilidad.

    Responder

  16. Eduardo

    Este tutorial es muy bueno y no se trata de ver los errores del programador, con el IE, al final de cuentas es buscar la alternativa para poder desarrollar funciones de las paginas… ojala y sigas con más Tutorial, en mi caso que soy principiante me ha sido muy útil.

    Responder

  17. Locuras ! El problema no es que tengamos que saber como crear una pagina para todos los navegadores, nosotros tenemos nuestro trabajo que queremos cumplirlo al pie de la letra y a veces se nos vuelve complicado por las “empresas” que hacen lo que quieren, por sus malditas incompatibilidades COSA QUE ESTA EXTREMADAMENTE MAL nosotros nos complicamos, es sencillo:

    Ellos tienen que cumplir con un estandar de todos los navegadores.

    Y nosotros solo añadir la linea css necesaria y estandar SIN PREFIJOS por que me parece una ridicules que tengamos que agregar 25552131 prefijos para todos los navegadores…

    Responder

  18. Me ha venido muy bien para actualizar mi web

    Gracias

    Responder

  19. jorvel

    Por que están pensando en ustedes y no en la creatividad que pueden utilizar para generar nuevas estrategias de programación.

    Responder

  20. Anónimo

    gracias el tutorial es muy bueno… pero tengo un problema el degradado se repite una y otra ves en todo el body y no le puse el repeat q hago???

    Responder

  21. David Lozano

    Y cómo quedaría el filtro de Internet Explorer para que el degradado de la cabecera fuera en horizontal y no en vertical?

    Responder

Deja un comentario