SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
CSS/fertige Layouts/Design08
Aus SELFHTML-Wiki
< CSS | fertige Layouts
Eine grafisch gelungene Seite mit einem großen Teaser, dessen Bilderklärung (figcaption) beim Überfahren mit der Maus einschwebt.
Design 08
- Download: ZIP-Datei (168KB, Prüfsumme: )
Besonderheiten beim Design
Pseudoelemente
Die Pfeile der Navigation sind keine Grafiken, sondern mit CSS erzeugte Pseudoelemente:
Pfeile durch Pseudoelelemente
nav a:after{
content: " ▶";
color: #fcb040;
display: inline-block;
width: 2em;
}
nav a:hover:after{
content: " ▼";
}
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.
Zierstreifen
header::after {
position: absolute;
content: "";
background: linear-gradient(to top, #feb040 25%, #282523 25%, #282523 50%, #34a2da 50%, #34a2da 75%, #0e76bc 75%);
height: 1.6em;
left: 0;
right: 0;
bottom: -1.6em;
}
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.
Hinweis:
Urheberrecht:
Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.
