CSS/fertige Layouts/Design08

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.