Menú Cerrar

Degradados con CSS3 I

Hablando en plan retro antes de la llegada del CSS3, para poner un degradado en cualquier parte de una página web, la mejor y única solución era crear una imagen con Photoshop a medida. Pero gracias al CSS3 eso pasó a la historia. Sí, ya se lo que dirán algunos, ¿y el GIMP? Con GIMP también, pero el Photoshop es más antiguo. Paint, Photopaint, etc, no pretendo acordarme de todos los programas de dibujo y retoque fotográfico.

Hacer degradados con CSS3 es bastante sencillo, al igual que las animaciones vistas en el anterior post, basta casi con indicar los colores que limitan un degradado y el navegador hace el resto. Naturalmente todo se puede complicar al gusto. Con una sola línea se puede completar perfectamente un degradado y con la última sintaxis oficial no es necesario incluir los prefijos para cada navegador. La sintaxis sería algo como:

background: linear-gradient(dirección/ángulo, color1 distancia1, color2 distancia2, color3 distancia3, colorX distanciaX...);

Para que la dirección cumpla con el último estándar y siempre que no sea un ángulo tendrá que llevar «to» delante. Las distancias de cada color se pueden expresar en porcentaje o en cualquier unidad de medida admitida en el CSS y sirve para establecer lo que ocupará la transición hacia ese color. Ya que se trata de crear efectos vistosos manejando colores lo mejor es verlo:

1

No es obligatorio indicar la dirección y es necesario que haya como mínimo dos colores. Las opciones para la dirección son:

bottom, top, left y right

Si no se indica la opción por defecto para la dirección será top. También existe la opción de que la dirección sea en diagonal para lo que habrá que indicar la esquina:

1

La dirección del degradado también se puede indicar como un ángulo, con grados (deg):

1

También se pueden establecer transparencias utilizando el formato rgba(r,g,b,a) para indicar cada color. El canal alfa tendrá valores entre 0 y 1 mientras que los colores tendrán valores entre 0 y 255:

1

Hasta aquí sólo he puesto ejemplos con dos colores pero en linear-gradient se pueden poner los colores que se quieran/necesiten, por no decir infinitos ya que a efectos prácticos es imposible. Los degradados más básicos serían:

1

Y la versión del degradado en diagonal:

1

Con ángulo en grados:

1

Por último añadiendo repeating tendremos repeating-linear-gradient, con lo que podremos repetir los degradados:

background: repeating-linear-gradient(dirección/ángulo, color1 distancia1, color2 distancia2, color3 distancia3, colorX distanciaX...);

Con repeating-linear-gradient se pueden utilizar todas las opciones vistas anteriormente y como me parece excesivo repetir uno por uno todos los ejemplos para mostrar una opción más, aquí os dejo un pequeño resumen:

1

EDITADO 13/11/2015: Corregidos algunos errores y vicios a la hora de escribir el código ;).

Y con este último ejemplo concluyo esta pequeña recopilación de ejemplos de degradados lineales con CSS3. El próximo post lo dedicaré a los degradados radiales con CSS3, los cuales veréis que son muy parecidos a los lineales pero a la vez distintos ;).