Inhalte zum Tag: CSS

Tool zur Visualisierung von HSL-Werten & Umrechnung in RGB/HEX

Tool zur Visualisierung von Flexbox-Eigenschaften. Stellt beispielhaft die Verteilung von Flexbox-Items in einem Flexbox-Container dar und visualisiert die Haupt- und Kreuzachse. Optimal zum explorativen Kennenlernen von Flexbox-Eigenschaften.

Der Flexbox Helfer ist ein kleines Tool, das den Einstieg ins Thema CSS Flexbox vereinfachen soll. Es zeigt einen Flexbox-Container sowie drei Flexbox-Items an. Man kann interaktiv CSS Code für den Container eingeben und so die verschiedenen flex-Eigenschaften wie "justify-content" oder "align-items" ausprobieren. Zusätzlich wird die Haupt- und Kreuzachse visualisiert, wodurch der Zusammenhang der Eigenschaften zur visuellen Darstellung verdeutlicht wird.

Der CSS HSL Farbhelfer soll die Verwendung von HSL-Farbcodes, wie zum Beispiel hsl(0, 50%, 50%), vereinfachen. Neben einem Farbkreis, über den sich der (H)ue Parameter beeinflussen lässt können die SuS auch die (S)aturation, (L)ightness sowie den (A)lpha Kanal beeinflussen. Die Änderungen werden live auf der Website dargestellt, wodurch ein direkter Bezug von Parameter und visueller Wirkung hergestellt wird.