Fondos con gradientes – degradados con CSS3

En este artículo explicamos las dos formas que hay de hacer fondos con gradientes en CSS3, con códigos de ejemplo para entender mejor el procedimiento.

Los gradientes o degradados son una de las técnicas más utilizadas por el diseño gráfico para resaltar y estilizar fondos en las páginas web. Su aplicación en casi cualquier situación puede resultar beneficiosa para agregar cierta personalidad al sitio, creando en el mayor número de situaciones una mejor sensación que al utilizar un fondo monocromático.

El uso del término gradiente se refiere a la creación de una transición gradual, suave y sin saltos bruscos, de un color a otro creando una secuencia de colores que puede ser utilizada para crear efectos como el de sombra y desvanecimiento.

Antes de la llegada de las hojas de estilo y la programación dinámica, los gradientes eran realizados únicamente con programas de ilustración, teniendo que crear dicho degradado de manera manual y una vez termino había que cargar la imagen en nuestro servidor web y colocarla como fondo de nuestro sitio.

Con el paso del tiempo hubo quienes se aventuraron a crear ciertos scripts o programas para colocar gradientes de forma dinámica desde el lado del servidor web, calculando y estableciendo las propiedades de estilo con lenguajes como PHP.

Crear un programa o una imagen únicamente para mostrar dicho efecto en nuestro fondo resultaba bastante inflexible, y pronto fue considerado como una mala práctica por el tiempo que se consumía en cargar el sitio o quizás porque en algunos navegadores el efecto no era el esperado.

Con la llegada de CSS3 y su incorporación en la mayoría de los navegadores de renombre, ahora tenemos la oportunidad de crear gradientes de manera sencilla, con el menor de los esfuerzos, sin necesidad de algún programa de edición digital como Photoshop y con sólo código, nada de imágenes.

Formas de crear degradados para tus fondos con CSS3

Hasta el momento existen dos formas establecidas por CSS3 para crear un gradiente, ya que desafortunadamente Webkit y Mozilla no llegaron a un acuerdo en lo que a este tema se refiere, aunque los dos hayan adoptado la misma sintaxis para casi el resto de CSS3.

Webkit es un framework que esta presente en navegadores como Safari y Chrome, mientras que el kit de Mozilla controla el CSS3 en Firefox. Es esto y la sintaxis lo único que diferencia a los dos códigos que utilizaremos en este artículo, ya que producen básicamente el mismo resultado.

La sintaxis del gradiente Webkit es la siguiente:

  -webkit-gradient(<tipo>,  <punto> [, <radio>]?, <punto> [, <radio>? [,  <parada>]*)

El tipo puede ser “linear” o “radial”, es decir que el degradado se haga mediante lineas o mediante círculos Un punto es un par de valores separados por espacios, puede ser indicado con números, porcentajes o las palabras clave “top”, “bottom”, “left” y “right”.

Radio es un número y sólo se puede especificar cuando el tipo de degradado es radial. Una parada es una función con dos argumentos, un número y un color, indicando donde debe terminar el gradiente, también se pueden utilizar las funciones “from” y “to” para especificar esto.
Entonces, si queremos definir un degradado lineal que abarque todo el fondo de nuestra página y que vaya del color “granate” al color “carmesí”, incluiremos en nuestro CSS la siguiente línea:

body{
background: -webkit-gradient(linear, 0 0,  0 100%, from(maroon), to(crimson));
}

De esta manera estamos indicando con “linear” que es de tipo lineal, “0 0” que va de la esquina superior izquierda, “0 100%” hasta la esquina inferior izquierda, “from(maroon)” de granate, “to(crimson)” a carmesí.

Es entonces que si queremos que el gradiente únicamente cubra una parte del fondo basta con cambiar el porcentaje en el segundo parámetro, si indicamos “0 20%” el degradado se terminará en el 20% del fondo y el otro 80% será del color que le dimos al final en la función “to()”.

En caso de que queramos incluir un tercer color en el gradiente utilizaremos “color-stop” de la siguiente manera:

background: -webkit-gradient(linear,  0 0, 0 100%, from(maroon), color-stop(50%, crimson), color-stop(90%, red) ); 

Esto indica que el color carmesí empezara en el 50% y el color rojo en el 90%, creando un gradiente entre tres colores lo que da un efecto diferente a los degradados comunes.

Como mencioné al principio, se pueden hacer fondos con gradiente en CSS3 de dos maneras. Ya vimos como poder realizar el efecto con Webkit, ahora veamos como hacer un fondo con gradiente con Mozilla. Primero que nada la sintaxis aquí sería de la siguiente manera:

-moz-linear-gradient(  [<punto> || <ángulo>,]? <parada>, <parada> [,  <parada>]*)

El “tipo” en este caso está definidio al inicio de la sentencia, como vemos linear está en el nombre “-moz-linear-gradient”, el “punto” está para definir la posición horizontal y vertical en donde iniciará el degradado, y se puede usar con porcentaje, pixeles, o palabras claves (left, center, right para horizontal y top, center, bottom para vertical), si no es especificado se inicia en el centro por defecto.

También se puede usar un ángulo en vez de dar un punto, por ejemplo si damos 15deg (15 grados) en la sentencia “-moz-linear-gradient (left 15deg, marron, crismon);” obtendremos un degradado que inicia con 15 grados de inclinación de izquierda a derecha.

Al igual que en Webkit, con Mozilla se puede utilizar el “color-stop” como parada para definir hasta donde queremos que llegue un color, y donde inicia otro.

Conclusiones

Como podemos ver son sentencias muy parecidas que varían en muy pocas situaciones, con ellas podemos crear miles de combinaciones y experimentando podemos llegar a crear efectos muy buenos para nuestro sitio Web.

Recuerda que Internet Explorer aún no puede interpretrar CSS3 por lo tanto tampoco gradientes, en cuanto a Safari y Firefox si tienes una versión mayor a la tres podrás usarlos, al igual que en Google Chrome.

Para no dejar a nadie resentido o con un fondo que tu no quieres mostrar, trata de incluir un color base para aquellos navegadores que aún no soporten el gradiente, esto lo puedes hacer simplemente incluyendo dentro de “body” en el CSS la siguiente sentencia “background: #000000;”, con esto si el usuario usa Internet Explorer verá el fondo de color negro.