Effekte

Glow-Border

Rotierender conic-gradient()-Ring über einem ::before - kein Wrapper-Element nötig, funktioniert auf jedem Element mit eigenem Hintergrund. Der Winkel läuft über eine per @property typisierte Custom Property (--ncss-glow-angle), damit der Browser sauber interpolieren kann.

<button class="ncss-glow-border">Ask AI</button>

<!-- anpassen per Custom Property, pro Instanz -->
<button class="ncss-glow-border" style="--ncss-glow-speed: 1.5s;">Schneller</button>

Tokens: --ncss-glow-colors (Default: Marken-/Zweitfarbe/Erfolgsfarbe), --ncss-glow-speed (Default 4s), --ncss-glow-thickness (Default 2px), --ncss-glow-radius (Default --ncss-radius-lg).

Glow-Pulse

Pulsierender box-shadow - eigenständig einsetzbar, z.B. um einen einzelnen Call-to-Action hervorzuheben.

<button class="ncss-btn ncss-btn--primary ncss-glow-pulse">Jetzt starten</button>

Glass (Glassmorphism)

Halbtransparente Fläche + backdrop-filter: blur() saturate() - @supports-abgesichert, ohne Unterstützung bleibt eine normale halbtransparente Fläche ohne Unschärfe übrig.

<div class="ncss-glass">...</div>

<!-- Unschärfe/Farbe anpassen -->
<div class="ncss-glass" style="--ncss-glass-blur: 20px;">...</div>

Tokens: --ncss-glass-bg, --ncss-glass-border, --ncss-glass-blur (Default 12px).

Backdrop (Hintergrund-Bildwechsel)

Bilder überblenden langsam ineinander und zoomen dabei sanft aus - typisch als seitenweiter, fixierter Hintergrund hinter Glasflächen (components/backdrop.css + js/backdrop.js). Hier als eingebettete Variante .ncss-backdrop--contained; bei prefers-reduced-motion bleibt es beim ersten Bild, ohne Zoom.

Inhalt über dem Bild

Glasflächen bleiben lesbar, das Bild trägt die Atmosphäre. Wechsel alle 4 Sekunden, pausiert in Hintergrund-Tabs.

<!-- seitenweit, direkt in <body> -->
<div class="ncss-backdrop" data-ncss-backdrop data-interval="6000" aria-hidden="true">
  <img class="ncss-backdrop-item" src="a.jpg" alt="" fetchpriority="high">
  <img class="ncss-backdrop-item" src="b.jpg" alt="" loading="lazy">
</div>
<script src="dist/js/backdrop.js" defer></script>

<!-- nur eine Sektion füllen: Vorfahre mit position:relative -->
<div class="ncss-backdrop ncss-backdrop--contained" data-ncss-backdrop>...</div>

Tokens: --ncss-backdrop-fade (Überblendung, Default 1.6s), --ncss-backdrop-zoom (Startskalierung, Default 1.08, 1 = kein Zoom), --ncss-backdrop-tint (Schleier, z.B. light-dark(transparent, rgb(0 0 0 / 50%)) für ruhigere Flächen im Dark Mode).

Stamped (gravierter Rahmen)

Nur ein hauchdünner, zweifarbiger Rahmen (dunkel oben-links nach hell unten-rechts, wie eine ins Material gravierte Kante) - keine eigene Hintergrundfarbe, funktioniert deshalb auch auf reinem Weiß. .ncss-stamped allein hebt sich beim Hover an ("kommt nach vorne"); zusätzlich .ncss-stamped--press kehrt das um und sinkt beim Hover tiefer ein. Bei beiden sinkt :active (Klick/Touch gehalten) noch weiter ein.

<button class="ncss-stamped">Hebt sich beim Hover</button>
<button class="ncss-stamped ncss-stamped--press">Sinkt beim Hover</button>

Tokens: --ncss-stamped-thickness (Default 1px, Ringdicke), --ncss-stamped-dark/--ncss-stamped-light (Default rgb(0 0 0 / 35%)/rgb(255 255 255 / 90%)), --ncss-stamped-lift (Default 3px, Hub bei Hover/Active), --ncss-stamped-radius (Default --ncss-radius-lg).

Kombiniert mit .ncss-btn-Varianten: der Ring ist halbtransparentes Schwarz/Weiß (rgb(0 0 0 / 35%)/rgb(255 255 255 / 90%)) statt einer festen Farbe - er blendet sich beim Zeichnen automatisch mit der jeweiligen Button-Hintergrundfarbe (Alpha-Compositing), OHNE dass .ncss-stamped selbst irgendetwas über Markenfarbe/Variante wissen müsste. Nur die Eckenform übernimmt .ncss-stamped NICHT automatisch (eigener Default --ncss-radius-lg, größer als .ncss-btns --ncss-radius-sm) - dafür --ncss-stamped-radius explizit auf den passenden Wert setzen:

<button class="ncss-btn ncss-btn--primary ncss-stamped"
        style="--ncss-stamped-radius: var(--ncss-radius-sm);">
  Primary + Stamped
</button>

Grain (Korn-/Sandtextur)

Feines Rauschen per SVG-<feTurbulence>-Filter als data-URI - kein Bild-Asset, kein Build-Schritt. Dezent über --ncss-grain-opacity einstellbar, für einen "Sand"-Charakter Blend-Modus/Deckkraft anpassen. Der Default-Blend-Modus overlay verhält sich wie multiply auf dunklen und wie screen auf hellen Flächen - auf einer SEHR dunklen/gesättigten Fläche (z.B. .ncss-surface--brand-2) bleibt die Standard-Deckkraft dadurch praktisch unsichtbar, auf einer mittelhellen Fläche (links) zeigt sich derselbe Default deutlich. Für dunkle/gesättigte Marken-Flächen entweder die Deckkraft deutlich erhöhen oder auf --ncss-grain-blend: soft-light wechseln (rechts).

<div class="ncss-grain">...</div>

<!-- stärker/anders einfärben, für dunkle/gesättigte Flächen -->
<div class="ncss-grain" style="--ncss-grain-opacity: 0.4; --ncss-grain-blend: soft-light;">...</div>

Tokens: --ncss-grain-opacity (Default 0.12), --ncss-grain-blend (Default overlay).

Blend-Modi

.ncss-blend-* (helpers/elevation.css) sind 1:1-Utilities für mix-blend-mode - das Element blendet mit dem, was DAHINTER liegt (anderer Fall als --ncss-grain-blend oben, das ist background-blend-mode und blendet nur zwischen den eigenen Hintergrund-Ebenen eines Elements). Zwei überlappende Farbkreise als Beispiel: der obere Kreis trägt jeweils eine andere .ncss-blend-*-Klasse.

<div style="position: relative;">
  <div class="demo-circle-a"></div>
  <div class="demo-circle-b ncss-blend-multiply"></div>
</div>

Alle 15 CSS-Blend-Keywords als Klasse: multiply/screen/overlay/darken/lighten/color-dodge/color-burn/hard-light/soft-light/difference/exclusion/hue/saturation/color/luminosity.

Erzwungenes Farbschema pro Element

Nicht zu verwechseln mit dem seitenweiten Theme-Override über [data-theme] (colors.css, z.B. ein Umschalter in der UI) - dasselbe Prinzip (color-scheme), nur lokal auf ein einzelnes Element statt auf :root angewendet. color-scheme ist vererbbar - .ncss-scheme-dark/.ncss-scheme-light (helpers/surfaces.css) erzwingen ein Farbschema NUR für ein Element und seine Nachfahren, unabhängig vom Theme der restlichen Seite. Alle light-dark()-Tokens im Inhalt kippen dadurch automatisch, ganz ohne Werte zu duplizieren.

<div class="ncss-scheme-dark">...</div>