Slider (Bildwechsler)

Bei der automatisch startenden CSS-Slideshow wurden die Fotos als CSS Hintergrund-Grafiken eingebaut. Außerdem gibt es einen Bildanzeiger, sprich die farbigen Kreise (Font-Icons), welche die Gesamtzahl der Fotos sowie das aktuelle Foto anzeigen. Alles zu finden in der css-Datei 'animation.css'. Die Animation wird durch den CSS-Befehl 'animation' ausgelöst, wie nachstehend:

CSS
#slider {
ANIMATION: slide 100s infinite;
ANIMATION-DIRECTION:normal;
}

Ändern, die wichtigsten Möglichkeiten

animation: slide 100s infinite:
Der frei zu vergebenen Name der Animation lautet hier 'slide', die Dauer des Durchlaufes für alle 10 Fotos beträgt 100 Sekunden, wobei die Slideshow als Loop unendlich (infinite) läuft, also immer wieder von vorne beginnt. Sie können den Wert für die Dauer ändern sowie auch statt des Schlüsselwortes 'infinite' eine beliebige Zahl festlegen, z.B.:
'animation: slide 120s 4' bedeutet, das die 10 Fotos in 2 Minuten getauscht werden und die Animation 4 x durchläuft und danach stoppt.

animation-direction:normal:
Hier läßt sich die Richtung der Animation beinflussen, statt 'normal' (vorwärts abspielen), können Sie auch folgendes wählen:
reverse = Die Animation wird in jedem Durchlauf rückwärts abgespielt.
alternate = Die Animation ändert in jedem Durchlauf die Richtung, spielt also abwechselnd vorwärts und rückwärts ab. Somit werden die Schritte der Animation also in jedem zweiten Durchgang rückwärts durchgeführt.
alternate-reverse = Ähnlich wie 'alternate', startet aber mit Rückwärts-Durchlauf.

Die Abschnitte im Inhaltsbereich

Mit Pseudo-Element 'nth-child(n)'

Auf der Startseite (index.html) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen könnten, erklären wir Ihnen nachstehend.

Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv. Mehr Info zu 'nth-child()' erhalten Sie ggfls. hier bei SELFHTML-Wiki und noch viel übersichtlicher und mit vielen Beispielen erklärt es die Webseite h5c3

So haben wir den 'nth-child-Selektor' für die Abschnitte in der Datei 'format.css' eingesetzt. Und zwar haben wir den nth-child-Selektor auf unsere CSS-Klasse namens 'section-content' gelegt.

'nth-child(odd)' spricht die ungeraden Abschnitte an.
D.h. Abschnitt 1, Abschnitt 3, Abschnitt 5 usw. sind identisch.

'nth-child(even)' ist für die geraden Abschnitte zuständig.
D.h. Abschnitt 2, Abschnitt 4, Abschnitt 6 usw. sind identisch.


Nachfolgend ein allgemeines Beispiel:

CSS
.section-content:nth-child(odd)  {
background:white;
color:black;
}
.section-content:nth-child(even) {
background:green;
color:yellow;
}

So sieht ein Abschnitt in der HTML-Datei aus:

HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

So sehen zwei Abschnitte in der HTML-Datei aus:

HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 1 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 2 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

Fazit: Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der selbe, egal wieviele Abschnitte.

Auf den Unterseiten wollen wir nur einen einzigen Abschnitt haben. Da wir mit den selben Farben arbeiten wollen, wie im bereits definierten Abschnitt 1, müssen wir nichts weiter tun.

Die Schrift

Webfonts

In diesem Template werden Google Webfonts verwendet. Diese sind ja kostenlos und beliebt. Es ist die Schrift 'OPEN SANS LIGHT', welche direkt im Template integriert sind und somit auch ohne Internet-Verbindung angezeigt werden. Die Schriften haben wir über das HTML Link-Element eingebunden.

HTML
<link rel="stylesheet" href="css/font-open-sans-light.css" type="text/css">

Wenn Sie diese Schriften nicht verwenden wollen bzw. sich für andere Schriften entscheiden, so nehmen Sie einfach den Link-Verweis aus der HTML-Seite heraus, damit die Schriften nicht geladen werden.

Bilder

Hinweis: Die Fotos in dieser Vorlage sind von https://picjumbo.com/ . Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Icons

Wir verwenden Font-Icons

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.
Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.