Inhalte zum Tag: Tools

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.