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:

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:

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:

 

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 ;).

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *