CSS/Templates/Template8

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.


Eine grafisch gelungene Seite mit einem großen Teaser, dessen Bilderklärung (figcaption) beim Überfahren mit der Maus einschwebt.


[Bearbeiten] Besonderheiten beim Design

Die Pfeile der Navigation sind keine Grafiken, sondern mit CSS erzeugte Pseudoelemente:

Beispiel: Pfeile durch Pseudoelelemente
nav a:after{ content: " ▶"; color: #fcb040; display: inline-block; width: 2em; } nav a:hover:after{ content: " ▼"; }

Der 4-farbige Streifen unter der Überschrift ist mit einem Farbverlauf realisiert.

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.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML