Guía CSS

Guía interactiva de gradientes, sombras y movimiento

Página de documentación con fragmentos listos para copiar y vistas previas en vivo para entender cómo funcionan los gradientes, las pilas de sombras y los keyframes. Los accesos rápidos llevan a subpáginas enfocadas para cada tipo de efecto.

Guía de gradientesGuía de sombrasGuía de animaciones
Ejemplos interactivosCSS para copiarChecklist + práctica

Subpaginas

Temas con demos en vivo

Cada subpagina es una guia breve: checklist, ejemplos visuales y codigo minimo que puedes copiar en CSS-Zone.

color + profundidad

Gradientes

Mezclas lineales, radiales y cónicas con control de ángulos y stops.

Mezcla por capas

  • Paleta a través del equilibrio entre luz y sombra
  • Rejillas de stops con transparencia
  • Fondos de dos capas para mayor claridad
Abrir subpagina5 ejemplos + checklist
profundidad

Sombras

Pilas de sombras múltiples sin bordes sucios.

Sombra por capas

  • Sombra suave + brillo de borde
  • Separación clara entre hover y active
  • Presets compatibles con glassmorphism
Abrir subpaginaRecetas de sombras múltiples
movimiento

Animaciones

Keyframes con easing, delays y notas de stagger.

Microanimación

  • Delays y pausas bien controlados
  • Estilos para marquee y loaders
  • Curvas de easing más útiles
Abrir subpaginaKeyframes listos para copiar

Conceptos basicos

Mini documentación CSS

Recordatorios clave para estilos limpios y predecibles en producción.

Layout

Mantén el flujo estable y evita layout shifts.

  • Usa propiedades lógicas (margin-inline, padding-block) para simplificar RTL.
  • Reserva espacio para contenido async con min-height o aspect-ratio.
  • Prefiere gaps de grid/flex en lugar de pilas de márgenes para evitar sorpresas.

Color y contraste

Interfaces legibles en temas claros y oscuros.

  • Mantén un contraste de al menos 4.5:1 para el texto.
  • Combina gradientes con overlays sólidos para mejorar la legibilidad.
  • Prueba el mismo componente en light y dark antes de publicarlo.

Rendimiento

Movimiento fluido sin ensuciar el layout.

  • Anima solo transform/opacity; evita transiciones de box-shadow y height.
  • Limita la duración de animaciones en loop (menos de 1.4s para loaders).
  • Usa will-change con moderación y solo en elementos que realmente se animan.

Practica

Mini playbook

Patrones listos para usar tal cual o ajustar cerca en el generador.

Tarjeta con gradiente

Fondo con contraste, sombra múltiple suave y profundidad sutil.

background: linear-gradient(135deg, #6ee7ff, #7c3aed);
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.28),
            0 8px 24px rgba(10, 10, 10, 0.25);
animate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadow

Ticker marquee

TranslateX con repetición continua y velocidad ajustable.

.marquee {
  display: flex;
  gap: 2rem;
  animation: ticker 14s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

Pulso de CTA

Dos capas (escala + blur) para un acento de foco suave.

@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.pulse::after { animation-delay: .6s; }