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 60s infinite;
ANIMATION-DIRECTION:normal;
}
Ändern, die wichtigsten Möglichkeiten
animation: slide 60s infinite:Der frei zu vergebenen Name der Animation lautet hier 'slide', die Dauer des Durchlaufes für alle 8 Fotos beträgt 60 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 8 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.
Hinweis: Wie gesagt, einfach den entsprechenden Wert bei 'animation-direction' eintragen. Nur weil wir in diesem Template mal 'normal, reverse und alternate' alle zusammen anzeigen wollten, haben wir diese folgenden CSS-Klassen gebildet (die sind normalerweise nicht nötig):
CSS
#slider.reverse {
ANIMATION-DIRECTION:reverse;
}
#slider.alternate {
ANIMATION-DIRECTION:alternate;
}
Ergebnis:
Auf den Seiten Home, Secundus und Quartus läuft die Animation standardmässig vorwärts ab, auf den Seiten Primus, Tertius und Quintus lasssen wir die Slideshow rückwärts ablaufen (animation-direction: reverse). Und auf der Seite Sextus läuft die Animation vorwärts durch und gleich danach rückwärts (animation-direction: alternate).
Die Spalten / Bilder
Worum geht es
Thema ist die Anordnung der Boxen bzw. wie regelt man mehrspaltige Boxen. Sobald man alles nur einspaltig untereinander anordnet, braucht man sich keine Gedanken zu machen, wobei so eine einspaltige Anordung im heutigen Webdesign natürlich kaum vorkommt. Wenn man aber mehr als eine Box/Spalte verwendet, welche nicht mehr nur untereinander sondern in Boxen/Spalten auch nebeneinander stehen sollen, ist für die Verwaltung der Boxen/Spalten irgendein individuell frei auszuwählendes Bildsystems (genannt: GRID, ein sog. Gestaltungsraster) zu bestimmen, um eine Anordnung in Spalten und Reihen zu verwalten. Dieses Gestaltungsraster bestimmen alleine Sie durch Ihre Codierung von HTML und CSS.GRID-System
Grid heißt soviel wie Gitter oder Netz. Ein GRID-System ist im Prinzip die Basis für die Anordnung von Texten, Bildern oder anderen Objekten innerhalb einer Webseite. Ganz grob geht es darum, eine unterschiedliche Anzahl von Boxen in so einem Spalten-Netz zu arrangieren und zu bestimmen, mit welcher Technik sich diese Boxen verhalten sollen.Hinweis dazu: Es gibt unterschiedliche Techniken, die alle ihre Vor-und Nachteile haben, wie z.B. float oder display:inline-block oder display:table oder display:flex.
Responsive GRID-System
Nun geht es darum eine Webseite responsive zu gestalten. In einem zweiten Schritt wird deshalb aus einem GRID-System ein Responsive GRID-System, d.h. mit Hilfe der CSS-Media-Queries, also den Bildschirmabfragen, erfolgt eine Anpassung der Boxen in Breite und Anzahl an die verschiedenen Bildschirmgrößen von Smartphone bis Desktop-PC.Unser 'RESPONSIVE GRID' funktioniert so
Hier in diesem Template sind esübrigens zwei Systeme mit unterschiedlicher Technik.- Gridsytem #1 arbeitet mit der Technik 'display:inline-block'.
- Gridsytem #2 arbeitet mit der Technik 'display:table'.
Klar kommt man auch mit einem einzigen Grid-System aus, das zweite (mit der Technik'display:table') ist für besondere Situationen, denn es ermöglicht, das die Boxen auch bei unterschiedlich langem Inhalt der Boxen alle auf einer Höhe abschließen. Ein weiterer Vorteil ist die unkomplizierte vertikale Zentrierung mit CSS-vertical-align (top / middle / bottom). Nachfolgend eine Hilfestellung zu den wesentlichen Einstellungen:
Allgemeine Einstellungen
Bevor wir zu den 2 GRID-Systemen kommen, erst einmal wichtige allgemeine CSS-Einstellungen. Diese gelten wir beide GRID-Systeme bzw. sind auch gültig, wenn Sie keine der GRID-Systeme verwenden. Max-with auf dem 'img' ist dafür da, wenn sie eigene Bilder unabhängig von diesem Bildsystem einsetzen. Diese Bilder sind dann maximal so gross wie die Original-Abmessungen des Bildes bzw. des umgebenen Containers und skalieren responsive.
CSS
img {max-width: 100%;
height: auto;
margin:0 auto;
}
Hier ist das Border-Box-Modell eingeschaltet, d.h. padding und border werden in die Box hinein gerechnet und nicht oben drauf addiert.
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
GRIDSYSTEM #1
Die Technik mit 'display:inline-block':
Nachfolgend ein Beispiel, so oder ähnlich könnte es aussehen:
1. Die 'img' im Bildsystem bekommen 100% responsive Breiten-Anpassung.
CSS
.wrapper-box img {width: 100%;
display:inline-block;
height: auto;
margin:0 auto;
}
2. Jetzt werden die Boxen für das Bildsystem angelegt. Alle Boxen bekommen an linker und rechter Seite einen 'minus-margin' um den bekannten INLINE-BLOCK-WHITESPACE-BUG auszugleichen. Da unsere Seite ja 'mobile-first' angelegt ist, starten alle Boxen mit einer Breite von 100%, d.h. alle Boxen stehen zunächst untereinander.Um die Boxen in Spalten mit Prozent von 100%, 50%, 33.33% und 25% anzuordnen, genügen uns die folgenden CSS-Klassen:
.box-1_of_1
.box-1_of_2
.box-1_of_3
.box-1_of_4
Um für die Boxen namens '.box-1_of_2', .box-1_of_3' und '.box-1_of_4' eine Alternative für einen davon abweichenden Breakpoint zu haben, könnte man als Beispiel zusätzlich noch die folgenden CSS-Klassen angelegen:
.box-1_of_2b
.box-1_of_3b
.box-1_of_4b
CSS
.wrapper-box {
text-align:center;
padding:1rem;margin: 0;
}
.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_2b ,
.box-1_of_3 ,
.box-1_of_4,
.box-1_of_4b
{width:100%;
display:inline-block;
vertical-align:top;
padding:1rem;
margin:0 -.25rem 0 -.25rem;
}
3. Mit den Bildschirmabfragen (Media Queries) setzen wir nun die Breakpoints. Wie immer sind diese Breakpoints nicht festgesetzt und können verändert und erweitert werden.
CSS
@media (min-width: 480px) {
.box-1_of_4 {width: 50%;}
}
@media (min-width: 768px) {
.box-1_of_1 {width: 50%;}
.box-1_of_2 {width: 50%;}
.box-1_of_2b {width: 100%;}
.box-1_of_3 {width: 33.33%;}
.box-1_of_4 {width: 25%;}
.box-1_of_4b {width: 50%;}
}
@media (min-width: 800px) {
.box-1_of_2b {width: 50%;}
}
GRIDSYSTEM #2
1. Die Technik mit 'display:table': So sieht es bei zwei Boxen aus, 'table-cell' stellt die Boxen nebeneinander und 'mit 'table-row' werden die Boxen untereinander platziert, mit 'height' kann eine Mindesthöhe angegeben werden.
CSS
.wrapper-box-table {
display:table;
width:100%;
text-align:center;
}
.box-tabcell-2 {
display:table-cell;
width: 100%;
height:20rem;
vertical-align:middle;
padding:1rem;
}
/* tabellenzelle-reihe */
.tabrow {display:table-row;
}
HTML
<div class="wrapper-box-table">
<span class="box-tabcell-2">
...Inhalt...
</span>
<span class="tabrow"></span>
<span class="box-tabcell-2">
...Inhalt...
</span>
</div>
2. Mit den Bildschirmabfragen (Media Queries) setzen wir nun die Breakpoints. Die Box bekommt jetzt 50% Breite und die Zellenreihe (table-row) wird mit 'display:none' ausgeschaltet, so das jetzt beide Boxen nebeneinander stehen.
CSS
@media (min-width: 1024px) {
.box-tabcell-2 {width: 50%; }
.tabrow {display:none }
}
Die Schrift
Webfonts
In diesem Template werden Google Webfonts verwendet. Diese sind ja kostenlos und beliebt. Es ist die Schriften 'OPEN SANS', welche direkt im Template integriert ist und somit auch ohne Internet-Verbindung angezeigt wird. Die Schrift 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.Die Font-Icons
Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Viele weitere Icons sind möglich, denn die sehr verbreitete kostenlose Icon-Schrift vom Anbieter "Fontawesome" wird ja durch einen entsprechenden Link im Kopfbereich des Templates aufgerufen. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.