Self-Wiki: Farbe

[Rolf B]

Matthias schrub:

@Rolf B hatte eine zündende Idee,hsl() interaktiv zu visualisieren, das kommt demnächst!

Hier mal der Arbeitsstand zum Anschauen:

https://wiki-test.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Farben-HSL-Visualize.html

Da sind jetzt mehr Dinge drin als am Ende bleiben sollen.

• Der Blickwinkel soll am Ende einen fixen Wert haben und der Slider entfallen. Er ist zum Ausprobieren und für die 3D Fehlersuche drin.
• Die Radiobuttons für den Anzeigemodus sind als Checkbox-Hack implementiert und sollen später auch wieder raus. Ich wollte nur schnell mal beide Modi zum Ausprobieren drin haben.

Ein großer Teil der Anzeigesteuerung inclusive der 3D-Modellierung erfolgt im CSS. Eigentlich sollte der Lightness-Balken bloß ein Div mit Farbverlauf werden, aber das sah beim Erstellen der Schrägansicht einfach nicht mehr gut aus. Ein echter Balken aus 7 Rechtecken und einem Kreis als Deckel ist einfach schicker 😉.

Für die 3D-Operationen hatte ich dann auch mal eine Anwendung für trigonometrische Funktionen in CSS.

CSS Nesting für das HSL-Modell hatte ich drin, musste es aber wieder rausnehmen, weil die Chrome-Entwicklertools immer noch darüber zerbrechen. Vor allem, wenn man einzelne Eigenschaften deaktiviert und reaktiviert.

Das ganze Ding ist in seinen Abmessungen jedenfalls hoch parametrisiert. Der Ausgangswert ist die Breite der Viewerbox, der Rest wird davon abgeleitet. Ich überlege auch noch, eine echte Maussteuerung zu integrieren, aber das wird dann eigentlich zu viel Arbeit.

Rolf