Transiciones entre colores de los gradientes CSS 2.8.17
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
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: "
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.
Kseso
the obCSServer ᛯ 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 Kseso
Me sabe mal ser aguafiestas pero... ¿en qué navegador has probado el efecto? Yo lo he hecho en las últimas versiones de Firefox (v54), Chrome (v60) y Edge (v15) y no se produce la transición. De hecho, la función CSS.registerProperty no existe en ninguno de esos navegadores.
ResponderEliminarHola Jorge
Eliminar¿Aguafiestas? Para nada.
En Chrome Versión 60.0.3112.78 (Build oficial) (64 bits)
En macOS Sierra v10.124
Yo sí que veo la diferencia al :hover en segundo pen. Diferencia que me hiciste pensar que fuese debido al repaint o que se debiese a sobrecarga en el equipo para manejar al gradiente (??) así que jugué un poco con el tiempo de la transición e incluso con 'delay' y las variaciones en esos parámetros se reflejan en la demo.
Un saludo
Para más detalles, lo he probado en Chrome Versión 60.0.3112.90 (Build oficial) (64 bits) en Windows 10 versión 1703 en un equipo nuevo (no tiene ni 1 año). Pero tampoco me funciona en Android 7.1.1, ni en Chrome (59.0) ni en Firefox (54.0).
EliminarLo curioso es que en todas mis pruebas he ejecutado alert(typeof CSS.registerProperty); y he obtenido undefined (la propiedad no existe, si existiera debería devolver function).
Sería raro pero quizás sea algo exclusivo de macOS aunque no lo puedo comprobar, en estos momentos no dispongo de ningún Macintosh.
Bueno, es una sospecha que tenía tras ver el pen en la portada de Codepen y la escasez de reacciones.
EliminarHecha la misma prueba, Jorge, el resultado que yo obtengo es function
[img]https://2.bp.blogspot.com/-YP4CjAuSRtM/WYM16WMhMDI/AAAAAAAANn8/arOlri0wmzATL-jkpW9vRSHArmRtpXfKACLcBGAs/s700/captur.png[/img]
Así que podemos concluir que esta es una diferencia más del mismo navegador en sistemas operativos diferentes.
Un saludo, Jorge, y gracias.
Hola gente.
EliminarA mí tampoco me anda, pero no tengo un solo navegador actualizado, así que no soy referencia de nada.
Encontré este enlace con algo de data, en Blink/Chromium está en desarrollo, y por eso no debe funcionar aún en todas las plataformas, Mozilla tambien lo desarrolla, pero no tengo más datos, de los demás ... no hay noticias.
Existen varios métodos para agregar propiedades, valores, atributos y funciones a un navegador, y se valen de javascript. La función 'registerProperty()' evidentemente graba una propiedad en el CSS. Pero es JS; si lo vamos a usar, creo que lo mejor es terminar en puro JS, que es compatible y ya probamos que funciona bien cambiando colores con la transición prehecha de CSS. Para cuando la API esté terminada ¿no sería lógico que la propiedad viniera ya registrada en el navegador? Este truco me parece genial (como usar 'defineProperty', 'setAttribute' o 'prototype'), pero creo que es para experimentar de momento, aprovechando que alguna plataforma ya lo tiene en prueba y su JS lo reconoce, así le habilitamos un color de prepo y queda registrado para que el mismo navegador lo cambie por programación. Que en definitiva es lo mismo que hemos hecho en varias demos de este blog usando javascript; ahora ya no necesitamos escribir las lineas de programa.
Fe de Burratas.
EliminarResulta que más arriba dije que ya cambiamos valores de color con JS y funcionaron con transiciones ... pero eran valores de propiedad, nunca se cambió un valor dentro de una función CSS como es 'radial-gradient'. Eso ya va siendo más difícil y de momento lo único que se me ocurre es simular a 'tansition', lo que es un despropósito.