CSS/fertige Layouts/Template8

Aus SELFHTML-Wiki
< CSS‎ | fertige Layouts(Weitergeleitet von CSS/Templates/Template8)
Wechseln zu: Navigation, Suche

Achtung!

Die Layoutvorschläge werden derzeit überarbeitet. Deshalb sind die Links auf die zip-Dateien vorübergehend entfernt worden. Bei Interesse an den Layouts schreiben Sie bitte eine Mail an projekt@selfhtml.org. Wir werden Ihnen zeitnah die aktuellen Versionen zusenden.

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.


Besonderheiten beim Design[Bearbeiten]

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.