soy Kseso y esto EsCSS

Transiciones entre colores de los gradientes CSS

Cómo lograr transiciones CSS entre los colores que forman los gradientes CSS que por definición no las admiten. Logrado con la función CSS.registerProperty

Transiciones entre colores de los gradientes CSS

·Por Kseso ✎ 6

Los gradientes CSS desde siempre han tenido un pequeño inconveniente al ser utilizados en el valor de la propiedad background-image: no se pueden aplicar transiciones CSS en los cambios de colores.

Pese a ello el ingenio también ha funcionado para emular la transición en puro CSS. Bien sea actuando sobre el tamaño del gradiente background-size, bien sobre el canal alfa del color o la opacidad del elemento, recurriendo a los pseudoelementos CSS... étc.

Tampoco es posible con las custom properties de CSS que tantos problemas e inconvenientes han solucionado.

Puedes hacer todas las pruebas que quieras en el siguiente pen:

See the Pen LjZGPL by Kseso (@Kseso) on CodePen.

Así que después de esta demo y la introducción al artículo ya estarás llamándome de todo por el título y por hacerte perder el tiempo. ¿No? Bueno, ya que estás aquí dame un minuto más y prueba el siguiente pen, ¿te parece?

See the Pen Color transition on #CSS gradients by @Kseso by Kseso (@Kseso) on CodePen.

La función CSS.registerProperty

La función CSS.registerProperty que hace posible la transición en el gradiente CSS del pen previo la encontramos en el documento CSS Properties and Values API Level 1 y lo que hace es extender las CSS custom properties:

Abstract
This CSS module defines an API for registering new CSS properties. Properties registered using this API are provided with a parse syntax that defines a type, inheritance behaviour, and an initial value.

Su sintaxis en la forma más sencilla y funcional requiere de forma obligada el definir el nombre de la propiedad de autor: name, el tipo de sintaxis según la propiedad o valor que vayamos a usar syntax, si se hereda o no y un valor inicial:

CSS.registerProperty({ name: "--color", syntax: "", inherits: true, initialValue: "rgba(0,0,0,0)" });

Y ahora ya podemos usar la propiedad --color en el CSS y como parte del gradiente y hacer que funcionen las transiciones CSS en él.

Más info de la función CSS.registerProperty

Ya sabes que para mi Javascript es tierra de dragones, así que te remito al documento que te reseñé antes y a San Google para ampliar información y casos de usos de la función CSS.registerProperty

Y como no, la invitación se extiende a compartir con todos tus descubrimientos y ejemplos usando los comentarios del blog.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso