piskaty
piskaty
hello@piskaty.at
alle experimente
interaktionsstudie · beispiel

Chromatic dial

Ein wenig Farbe, mit Spielraum zum Drehen.

Drehe den Ring. Ändere seine Farbe. Typisierte CSS-Eigenschaften lassen den Verlauf selbst weich übergehen.

Anpassen

40°
155°
80°

Browser-Unterstützung wird geprüft …

Die Idee

Ein ruhiges Instrument zum Erkunden von Farbe. Drehe einen Bogen, verändere seine Breite oder wechsle zwischen Moos, Ton und Iris. Der Ring bleibt stehen, während sich sein Farbverlauf verändert.

CSS erklären, was eine Variable bedeutet

Gewöhnliche Custom Properties bestehen aus Zeichenfolgen. Durch die Registrierung mit @property erhält eine Eigenschaft einen Typ. Dadurch kann der Browser Zahlen und Winkel interpolieren, statt zwischen Zeichenfolgen zu springen.

Beispiel
css
@property --study-angle {  syntax: "<angle>";  inherits: false;  initial-value: 40deg;}
@property --study-hue {  syntax: "<number>";  inherits: false;  initial-value: 155;}
.dial {  background: conic-gradient(    from var(--study-angle),    oklch(76% .12 var(--study-hue)),    oklch(48% .11 var(--study-hue)) 80deg,    transparent 125deg,    oklch(90% .035 var(--study-hue))  );  transition: --study-angle .6s, --study-hue .8s;}

OKLCH trennt Helligkeit, Farbsättigung und Farbton. Wenn die ersten beiden Werte weitgehend konstant bleiben, lassen sich Farbtöne leichter vergleichen. Die Demo nutzt zurückhaltende Sättigung; das Ergebnis hängt trotzdem vom Farbraum des Bildschirms ab.

Ausprobieren

Wähle eine Farbvorgabe, um den Übergang zu sehen. Passe anschließend Drehung und Bogenbreite an. Die Regler verändern CSS-Variablen; eine JavaScript-Animationsschleife ist nicht nötig.

Unterstützung und Zugänglichkeit

Alle Bedienelemente sind beschriftete native Range-Inputs oder Buttons. Bei reduzierter Bewegung entfällt die Interpolation. Ältere Browser können einen neutralen Farbverlauf oder unmittelbare Änderungen anzeigen. Registrierte Eigenschaften tragen ein Präfix, weil ihre Registrierung für das gesamte Dokument gilt, auch innerhalb eines CSS-Moduls.

Weiterlesen