Efecto de distorsión de agua ligera

Ksenia Kondrashova creó una demostración con un hermoso sombreador con efecto agua. Parece realista, como el agua que se mueve en una piscina. Se siente calmante e hipnótico.

Efecto de paralaje 3D al pasar el mouse

Temani Afif crea efectos sorprendentes utilizando una sola etiqueta de imagen. Este es un gran ejemplo: una etiqueta HTML crea un sorprendente efecto 3D... ¡y el código es muy simple! ¡La demostración apenas requiere 18 líneas de CSS!

Saturación selectiva al pasar el mouse

Otra demostración interesante que utiliza un solo elemento de imagen. Ana Tudor usó filtros SVG para aplicar una máscara de interpolación de color y resaltar elementos de la imagen según el color.

La patata molesta

Necesitarás los parlantes encendidos para esta divertida demostración de Sophia Wood (también conocida como Fractal Kitty). Haz clic en los botones de sonido o presiona los botones del 1 al 8 para que la papa hable... pero ten cuidado, puede ser igualmente entretenido y molesto.

Galería de ruedas (solo CSS)

Una galería circular animada creada por Chris Bolson. Pase el cursor sobre las imágenes y véalas animadas. Me gusta cómo aparece el título junto con el movimiento de la foto. Liso.

puntillismo Imágenes de la NASA

Otra demostración de Sophia Wood. Usó P5 para generar puntos que se generan infinitamente. En cada ciclo tendrán un tamaño más pequeño, revelando una imagen espacial. Como siempre, una combinación creativa de arte y código.

mesa de damas de contraste de color

Esta es más bien una demostración de accesibilidad "nerd": una cuadrícula con todos los nombres de colores CSS y su combinación de contraste de colores. Dave Rupert utilizó la especificación WCAG 2.1 para determinar los resultados.

Mi signo de patio

Chris Coyier replica este letrero icónico, aplicando animaciones de desplazamiento para que todas las líneas ajusten dinámicamente (el texto es editable) su fuente para que todas las líneas ocupen el mismo ancho. Debido a que utiliza la propiedad de rango de animación, esta demostración solo funcionará en Chrome.

Pila de tarjetas animadas con desplazamiento y eventos instantáneos de desplazamiento

Paul Noble crea una impresionante pila de cartas que combina animaciones basadas en desplazamiento con eventos de desplazamiento rápido. Tienes que usar un trackpad (esta demostración no funciona con un mouse) para disfrutar de las agradables transiciones.

Doble progreso rápido

Otro demo de Ana Tudor. El código es limpio, breve y semántico. Me gustó el diseño de este componente (¿de una pregunta de Reddit?) y me veo usando algo similar en algunos proyectos.

Si te gustó esta lista, ¡mira las demostraciones del mes pasado!