Ancho/alto de pantalla (solo CSS)

Temani Afif suele aparecer en esta lista con demostraciones de CSS. Esta vez, debido a algo impresionante: combinando propiedades personalizadas con funciones trigonométricas y de propiedad, puede mostrar la altura y el ancho de la pantalla... ¡sin JavaScript en absoluto!

Blobs interactivos WebGL

Pasa el mouse sobre estas lindas manchas para verlas reaccionar y moverse (incluso más de lo que ya lo hacen). Esta es una demostración divertida con WebGL de Ksenia Kondrashova que podría usarse como fondo interactivo (y que distraiga) en un sitio web.

Hack de citas de películas

Si te gustan las citas de películas y los trepidantes juegos del ahorcado, esta demostración de Alexandre Vacassin es para ti: adivina la cita de la película haciendo clic en las letras (sin opción de teclado, afaik). Pero cuidado: tendrás un minuto para completar la tarea y cada intento fallido te restará 5 segundos.

Laberinto de anillos

Otro juego, esta vez de ZIM. Este laberinto tridimensional, creado con ThreeJS, tiene forma de anillo. En esta entretenida demostración codificada para un desafío CodePen, la bola seguirá al mouse por el laberinto (a veces puede ser un desafío).

Efecto de desplazamiento de navegación

Veronica Hristova codificó esta navegación interactiva. Utiliza los pseudoelementos ::before y ::after para duplicar el texto especificado en un atributo de datos y generar un efecto 3D colorido al pasar el mouse. Sencillo y genial.

Manzana Blobby de Three.Js

Esta es otra demostración de Ksenia Kondrashova. Gira alrededor de esta manzana que se mueve con fluidez a medida que gira, pierde su forma y recupera una nueva: un bonito experimento con ThreeJS.

Aplicación Divisor de billetes

Inspirado en un diseño encontrado en Dribbble (vinculado en la descripción del codepen), Dilum Sanjaya codificó una versión en vivo de este divisor de billetes usando React y Tailwind. Se ve limpio.

Gorrión

Últimamente ha habido poco arte CSS en esta serie, y este hermoso dibujo de gorrión de Alina es un regreso notable. Basado en un dibujo de Behance (vinculado en el código), la simplicidad del código contrasta con la limpieza del dibujo. Trabajo increíble.

Criatura de la laguna IK

Mueve el mouse por la pantalla y observa cómo esta criatura/blob lo sigue. Inicialmente adherido a la parte superior, este gusano (¿sanguijuela? ¡criatura!) se desprenderá y crecerá a medida que se mueva. Liam Egan desarrolló esta demostración.

Jenga 3D - CSS

Un juego CSS 3D programado por Josetxu. Si bien el Jenga no es totalmente jugable, puedes hacer clic en las piezas del medio, que se animarán y se moverán (luego puedes empujarlas hacia adentro en el "Jenga inverso").

Si te gustan estas demostraciones, consulta el artículo anterior con 10 demostraciones geniales de CodePen de junio de 2024.