CSS/fertige Layouts/Design06

Webseite mit responsivem Slider und einer Reihe von social-Buttons

Design 06

• Download: ZIP-Datei (440KB, Prüfsumme: )

Besonderheiten

Flexslider

Dieses Beispiel verwendet den flexslider.

Beachten Sie: Generell gilt für Slider und andere Karusselle:

• Inhalte sind nicht sofort ersichtlich und (mindestens) einen Klick oder Wischer vom Nutzer Ihrer Seite entfernt.
• Viele Nutzer warten nicht den Durchlauf eines Karussells ab, sondern verlassen die Seite vorher.

Schatten

Im Allgemeinen können Schatten, Verläufe und andere Dekorationsgrafiken mit CSS-Eigenschaften realisiert werden. Der dreidimensionale Effekt des Hochbiegens benötigt aber eine Hintergrundgrafik, die sich flexibel an die vorhandene Breite anpasst. Der rechte Schatten verwendet die gleiche Grafik, wird aber gespiegelt.

Schatten als Hintergrundgrafik

section#bar:before,
section#bar:after{    
    position:absolute;
    bottom: -2em;
    content: '';
    background: url('../img/shadow.png') no-repeat top left;
	background-size: cover; 	
    width: 50%;
    height: 2em;
}

#bar:before {
	left: 0;
}

#bar:after{    
	transform: scale(-1,1);
	right:0;
}

Mehrspaltigkeit

Die einzelnen Elemente der Startseite werden im Grid Layout nebeneinander angeordnet, sobald genügend Platz vorhanden ist. Dafür sind keine Media queries nötig, die einzelnen Grid Items werden erst ab einer gewissen Mindestbreite nebeneinander positioniert.

Mehrspaltigkeit mit Grid Layout

main {
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

article,
main > h1,
#bar {
	grid-column: 1 / -1;     /* nimmt volle Breite ein */	
}

Der Inhaltsbereit main wird zum Grid Container, dessen Kindelemente nebeneinander dargestellt werden. Die Breite dieser Grid Items beträgt mindestens 20em; der verfügbare Rest wird auf die einzelnen Items aufgeteilt. Sobald dieser Rest größer als 20em beträgt, wird ein neues Grid Item in der Reihe gebildet.

Mit grid-column wird festgelegt, dass die Infobar, eine Überschrift oder auch der article auf der Unterseite über die gesamte Seitenbreite gehen sollen. Dabei steht der erste Wert 1 für die erste, der zweite Wert -1 für die letzte Linie im Raster.

Auf der Unterseite wird ein anderer Ansatz gewählt. Da bei mehreren Textspalten trotzdem eine Spalte bis zum Ende gelesen wird, werden alle Kindelemente mit columns automatisch in Spalten dargestellt, sobald genügend Platz vorhanden ist.

Mehrspaltigkeit mit columns

article {
  -webkit-column-count: 4;  
  -webkit-column-width: 20em; 
  columns: 4 20em;  
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;  
}

Der Inhalt von article wird mit columns in bis zu 4 Spalten mit einer Mindestbreite von 20em aufgeteilt. Zur besseren Formatierung wird mit hyphens die Silbentrennung eingestellt.

Social buttons

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.

Mehrspaltigkeit mit columns

#social a {
	background: url("../img/social.png") no-repeat scroll left top transparent;
	width: 37px;
	height: 37px;
	overflow: hidden;
	...
}
#social a.dribbble  {
	background-position: 0px 0;
}
#social a.dot{
	background-position: -40px 0;
}
#social a.plus {
	background-position: -80px 0;
}
#social a.dribbble:hover, #social a.dribbble:focus {
	background-position: 0 -40px;
}
#social a.dot:hover, #social a.dot:focus {
	background-position: -40px -40px;
}
#social a.plus:hover, #social a.plus:focus {
	background-position: -80px -40px;
}

Für #social a wird nur eine Hintergrundgrafik referenziert und geladen, die dann mit background-position passend verschoben wird.

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.