Algunos enlaces sobre degradados CSS

De vez en cuando, el zeitgiest de los blogs parece unirse en torno a un tema determinado y es como si los artículos guardados en mi carpeta de favoritos estuvieran teniendo una conversación. La conversación que se encuentra allí ahora es sobre los degradados de CSS y pensé en vincular algunas de las piezas más interesantes.

• Día 22: gradientes cónicos — Manuel Matuzovic analizó los gradientes cónicos el día 21 de su serie de 100 días sobre CSS moderno, lo que brinda una mirada agradable de alto nivel a los colores, los ángulos, la ubicación y las paradas de color. Entonces, en Día 22, lo pone en uso en el ::backdrop pseudo-elemento. (Por cierto, Twitter inesperadamente suspendió su cuenta — ayudemos a enderezar ese barco si podemos.)
• ¿Realmente entiendes los gradientes radiales de CSS? - Patricio Brosset ha hecho un trabajo digno de guía aquí y, sinceramente, todavía estoy trabajando para superarlo. Pero ya aprecio sus claras explicaciones y demostraciones de las cosas que todavía arruino, como palabras clave para el tamaño y la forma de un degradado radial. Ya estoy vinculando esto en el nuestro. Guía de degradados CSS!
• Gradientes de fondo altamente personalizables — Oye, hablando de gradiente radial, scott vandeheyLa receta de uno con múltiples paradas de color hizo rondas la semana pasada. Su desafío era crear un patrón de degradado que pudiera admitir diferentes variaciones de color, lo que normalmente sería un lío de clases CSS y valores de color para cada variación si no fuera por el uso propiedades personalizadas. De esta manera, puede asignar una propiedad personalizada para los diferentes colores y valores de ubicación para cada parada de color, luego simplemente actualizar los valores según el contexto. Y lo que es más, la forma en que se pueden actualizar las propiedades personalizadas con JavaScript permitió a Scott construir una herramienta para personalizar su patrón de degradado, que se comparte generosamente al final de la publicación.
• Patrones de semitonos CSS - michelle barker con un desglose detallado de los patrones de "medios tonos" de Ana Tudor. El efecto es algo así como la impresión de tinta punteada de los periódicos de la vieja escuela. Mientras Ana usa Houdini bajo el capó de la animación y los efectos de desplazamiento, Michelle observa específicamente el efecto de medios tonos en sí mismo y cómo se construye con un degradado radial. Me encanta especialmente la forma en que Michelle muestra cómo pasar de una cuadrícula de puntos sencilla a una en la que el patrón está un poco escalonado. Y quédate hasta el final para ver cómo acentúa el efecto con un mask-image que utiliza un degradado lineal para crear un efecto de desvanecimiento. Hice un riff con este patrón un poco, también, y terminó con algo limpio que parece un filtro de mancha de tinta que moquea.
• Una solución de barra de navegación elegante — A Eric Meyer se le encomendó un interesante desafío de diseño para un menú en el que una línea punteada sale del enlace "página actual" y se convierte en parte de un borde punteado más grande a lo largo del borde izquierdo del contenedor de contenido. Eric es siempre un gran ejemplo de cómo pensar como un desarrollador front-end, y lo hace aquí mientras describe la ruta alternativa que tomó usando un gradiente lineal cuando se topó con un obstáculo con el enfoque estándar de configuración border-style: dotted en el elemento.
• Líneas discontinuas de degradado enmascarado — Eric con un seguimiento de ese último enlace que muestra no solo cómo conectó los guiones de un borde izquierdo con los guiones de una imagen de trama, sino cómo su perspicaz ojo de diseño lo convenció de cambiar su solución para imitar la resolución más baja del guiones de la imagen usando dos degradados de fondo lineales repetidos como un mask-image en el gradiente de fondo. ¡Tan nerd y genial!