Geschichter
Diese Vignette sind mit 'purem' html erstellt. Sie sind eine Variation in html-Dur, CSS-Moll und 2-Ton-Bildern. Einfach um zu zeigen, dass von einem Grundansatz aus Varianten erstellt werden können, die mit dem ursprünglichen Kompositum "HCI" - H(tml) C(ss) I(mages) - scheinbar nichts mehr zu tun haben.
Rosaetten
Hier kommt auch wieder die ' display:flex - Klammer ' zur Anwendung, um die Vorteile dieser Formatierung für die Darstellung der Vignette nutzen zu können.
Die wLc-HTML-Absätze bieten - leider - nicht wie die anderen Absätze, die Möglichkeit, ein umgebendes div-Element zu erstellten, das dann auch die AbsatzÜberschrift einschließt. Diese vakiert deshalb im Flex-Container (in der -Klammer) und beeinträchtigt die Formatierung der darin sich befindenden Element.
Die absatz-eigene Überschrift (title) wird deshalb nicht verwendet.
Chaotika
Der OriginalBanner wurde ocker-latterit-farbig gestaltet. Davor liegt ein Kopfbild ca. 2800 x 277, das auf ein teilweises opacity gestellt ist.
Die Kombination Banner * Kopfbild läuft bis auf Breiten, wie sie auf handhelds üblich sind.
Ob das nicht zu viel für den Browser ist, müsste noch getetest werden.
StaumBaum
Der LinkAnker "Erfahren Sie mehr" wird mit ' pos:absolute, bottom:10px ' nach unten katapultiert. Das geht in den üblichen Höhen der Vignette ganz gut. Es gibt allerdings auch Grenzen! Die bei einem ' vernünftigen ' Layout so gut wie nicht überschritten werden.