SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
CSS/fertige Layouts/Design08
Eine grafisch gelungene Seite mit einem großen Teaser, dessen Bilderklärung (figcaption) beim Überfahren mit der Maus einschwebt.



- Download: ZIP-Datei (168KB, Prüfsumme: )
Besonderheiten beim Design
Pseudoelemente
Die Pfeile der Navigation sind keine Grafiken, sondern mit CSS erzeugte Pseudoelemente:
Da sie kein Teil des Inhalts sind, werden sie nur durch den Browser erzeugt und können dann mit CSS gestaltet werden.
Der 4-farbige Streifen unter dem header ist mit einem Farbverlauf innerhalb eines Pseudoelements realisiert.
Bildunterschriften
Ist Ihnen das weiße Fragezeichen auf dem Bild aufgefallen? In diesem Tutorial sehen Sie, wie man eine Bildunterschrift (figcaption) mittels einer css-transition einschieben kann.