Sviluppatori

Ricette CSS

Esempi compatibili basati sulle variabili pubbliche di NasDash.

Incolla una ricetta alla volta, verifica entrambe le modalità di colore e poi combinale.

Accento ciano e card nitide

: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;
}

Stile morbido e arrotondato

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

Densità mobile

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

Tavolozza degli stati accessibile

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

Non fare affidamento esclusivamente sul colore per comunicare uno stato. Le etichette e le icone del prodotto devono rimanere visibili.

CSS personalizzato

Usa il contratto pubblico per i temi, mantieni la compatibilità e ripristina un'interfaccia danneggiata.

Test e convalida

Esegui i controlli unitari, nel browser e sui container del prodotto.