CSS/Templates/Template6

Aus SELFHTML-Wiki
< CSS‎ | Templates
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.


Webseite mit responsivem Slider und einer Reihe von social-Buttons

Responsivität[Bearbeiten]

Auf Anzeigegeräten mit einer geringeren Breite als 1000px werden der Flexslider, die Suchmaske und die Spalten, sowie die darin befindlichen Bilder responsiv immer kleiner, solange die Lesbarkeit noch gewährleistet ist. Bei weniger als 700 Pixeln Breite wären die 3 Spalten zu schmal, so dass der Bildschirm nur noch 2 nebeneinander und unterhalb von 500 Pixeln alle Spalten untereinander anzeigt, so dass Überschriften, Bilder und Texte immer gut erkennbar sind.

Die Navigation wandert bei weniger als 700 Pixeln Breite nach unten und kann über den dann sichtbar werdenden Navigations-Button "☰" (vorher: {display:none;}) direkt erreicht werden.

Besonderheiten beim Design[Bearbeiten]

Die social buttons bestehen aus einem "sprite", das ist eine einzige Grafik, die vom CSS passend positioniert wird. Dadurch muss anstelle der 6x2 Buttons mit ihren alternativen Bildern beim Drüberfahren mit der Maus nur ein Bild geladen werden, was Zeit und Übertragungsrate spart.