Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

CSS/fertige Layouts/Design08

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Beispiel: Design 08
ScreenshotScreenshotScreenshot



Besonderheiten beim Design[Bearbeiten]

Pseudoelemente[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: " ▼"; }

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.

Beispiel: 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[Bearbeiten]

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.