Entwicklung

CSS-Rezepte

Kompatible Beispiele basierend auf den öffentlichen Variablen von NasDash.

Fügen Sie ein Rezept nach dem anderen ein, überprüfen Sie beide Farbmodi und kombinieren Sie sie anschließend.

Cyan-Akzent und klare Karten

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

Weicher, abgerundeter Stil

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

Mobile Dichte

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

Barrierefreie Statuspalette

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

Verlassen Sie sich nicht ausschließlich auf Farbe, um einen Status zu vermitteln. Produktbezeichnungen und Symbole müssen weiterhin sichtbar bleiben.

Eigenes CSS

Verwenden Sie den öffentlichen Theme-Vertrag, stellen Sie die Kompatibilität sicher und beheben Sie eine fehlerhafte Benutzeroberfläche.

Testen und Validierung

Führen Sie die Unit-, Browser- und Container-Prüfungen des Produkts aus.