Desarrolladores

Recetas de CSS

Ejemplos compatibles basados en las variables públicas de NasDash.

Pega una receta a la vez, verifica ambos modos de color y luego combínalas.

Acento cian y tarjetas nítidas

:root {
  --nd-accent: #22d3ee;
  --nd-accent-glow: rgba(34, 211, 238, 0.16);
  --nd-accent-dim: rgba(34, 211, 238, 0.1);
  --nd-card-border: rgba(34, 211, 238, 0.2);
  --nd-card-hover-border: rgba(34, 211, 238, 0.48);
  --nd-card-radius: 14px;
}

Estilo suave y redondeado

:root {
  --nd-card-radius: 22px;
  --nd-blur: 20px;
  --nd-card-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
  --nd-transition: 180ms ease;
}

Densidad en móvil

@media (max-width: 700px) {
  :root {
    --nd-card-radius: 12px;
    --nd-blur: 6px;
    --nd-card-bg-opacity: 0.96;
  }
}

Paleta de estados accesible

:root {
  --nd-green: #22c55e;
  --nd-yellow: #eab308;
  --nd-orange: #f97316;
  --nd-red: #ef4444;
  --nd-blue: #3b82f6;
  --nd-purple: #a855f7;
}

No dependas únicamente del color para transmitir un estado. Las etiquetas de producto y los iconos deben permanecer visibles.

CSS personalizado

Use el contrato público de temas, mantenga la compatibilidad y recupere una interfaz dañada.

Pruebas y validación

Ejecute las comprobaciones de unidades, del navegador y del contenedor del producto.