🧪 Laboratorio CSS

Todo esto es CSS puro.
Sin imágenes. Sin librerías.

Una muestra de lo que se puede construir solo con hojas de estilo: botones, tarjetas, tipografía, formas, fondos animados, interacciones y loaders. Pasa el ratón por encima de cada bloque.

Botones

background · box-shadow · ::before/::after
hover gradiente + barrido con ::after
active box-shadow doble (luz/sombra)
hover mask-composite: exclude
active box-shadow sólido + translateY

Tarjetas

backdrop-filter · conic-gradient · transform-style
glass
Glassmorphism
@property
Borde degradado giratorio
hover
Inclinación 3D al pasar el ratón
hover
Pasa el ratón
¡Es la otra cara!

Tipografía

background-clip: text · text-stroke · steps()
animado
Texto en degradado
stroke
Contorno
glitch
Glitch FX
steps()
Máquina de escribir

Formas

clip-path · mask-image · border-radius animado
@keyframes
border-radius morphing
clip-path
mask-image
degradado como máscara de opacidad

Fondos

radial-gradient · feTurbulence · filter: blur
mesh
dots
aurora
grano SVG

Interacciones sin JavaScript

:checked · <details> · ::after content
:checked interruptor con checkbox oculto
<details>
¿Esto usa JavaScript?

No — es el elemento nativo <details>/<summary>, estilado solo con CSS.

hover Pasa el ratón aquí
:checked

Loaders

@keyframes · linear-gradient · background-position
spin
bounce
indeterminado
shimmer

Layout

CSS Grid · transform: translateX · mask-image
grid areas
marquee infinito
WordPressPrestaShopReactAngularPHPSymfonySEO WordPressPrestaShopReactAngularPHPSymfonySEO