So erstellen Sie einen voll funktionsfähigen CSS3-Content-Slider

Content-Slider sind eine großartige Möglichkeit, eine Website dynamischer zu gestalten. Sie fügen Flair hinzu und können bei richtiger Verwendung den Unterschied zwischen einem Kauf und einem Zurück-Button ausmachen. Normalerweise würden sie mit jQuery oder einer anderen Javascript-Bibliothek erstellt. Mit dem Aufkommen von CSS3 werde ich Ihnen jedoch zeigen, wie Sie eines nur mit CSS erstellen.

Das Ergebnis wird nicht die semantischste Sache sein, die jemals gemacht wurde, aber es wird nichtsdestotrotz voll funktionsfähig sein.

Etwas einfaches HTML für den Anfang

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Seite 1

						
Lorem ipsum dolor sit amet, consectur was auch immer blah.

					

				

				

					
					

						
Seite 2

						
Lorem ipsum dolor sit amet, consectur was auch immer blah.

					

				

				

					
					

						
Seite 3

						
Lorem ipsum dolor sit amet, consectur was auch immer blah.

					

				

				

					
					

						
Seite 4

						
Lorem ipsum dolor sit amet, consectur was auch immer blah.

					

				

				

					
					

						
Seite 5

						
Lorem ipsum dolor sit amet, consectur was auch immer blah.

					

				

				

					
					

						
Seite 6

						
Lorem ipsum dolor sit amet, consectur was auch immer blah.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Zugegeben, das sieht gruselig aus. Sehr gruselig. Denken Sie daran, dass dies nicht die semantischste Sache auf dem Planeten sein wird. Nun, lassen Sie mich erklären.

Wir haben ein „ content-slider “-Div, das den gesamten Inhalt enthält. Wir werden einfach „ margin: 0 auto “ und vergessen es.

Dann haben wir zwei Abschnitte: das „ content “ div und das „ nav “ ul. Das content div enthält alle unsere Seiten, und das „nav“ ul ermöglicht uns den Zugriff auf verschiedene Seiten.

Jetzt, direkt innerhalb des „content“-Divs, werden Sie 6 verschachtelte Divs bemerken: „ content-inner-1 “ bis „ content-inner-6 “. Diese 6 Divs sorgen dafür, dass die ganze Magie funktioniert, und ich werde später genau erklären, wie.

Das magische CSS

 #content-slider {
Schriftfamilie: arial;
Breite: 640px;
Rand: 0 automatisch;
Rand oben: 100px;
}

#Inhalt {
Überlauf versteckt;
Breite: 640px;
Höhe: 480px;
-Webkit-Box-Schatten: 0px 0px 50px 10px #c9c9c9;
-moz-Box-Schatten: 0px 0px 50px 10px #c9c9c9;
Box-Schatten: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
Breite: 10000 Pixel;
Höhe: 480px;
}

.Seite {
Breite: 640px;
Höhe: 480px;
Schwimmer: links;
}

Wie gesagt, alles, was wir mit dem „ content-slider slider “-Div gemacht haben, war, es zu zentrieren und es um 100 Pixel vom oberen Rand der Seite zu verschieben.

Das „ content “-Div-Styling ist sehr wichtig. Wir setzen seinen „Überlauf“ auf „versteckt“ – Dies stellt sicher, dass die Folien unsichtbar sind, bis sie ausgewählt werden.

Nun, das „ content-inner “ div enthält alle Seiten. Aus diesem Grund hat es eine Breite von 10.000 Pixel. Normalerweise würde Javascript ihm die richtige Breite geben, aber in diesem Fall verwenden wir kein Javascript.

Die Seiten haben eine Breite und eine Höhe, und sie werden nach links verschoben, um nebeneinander zu sein.

Jetzt haben wir ein generisches Styling. Wir gestalten die „ page-info “ und die „ nav “.

 .Seiteninfo {
Höhe: 90px;
Hintergrundfarbe: rgba(99, 99, 99, 0,6);
Position: relativ;
Rand oben: 0px;
unten: 103px;
Farbe: #dedede;
Polsterung links: 20px;
Polsterung oben: 10px;
}

.page-info h2 {
Schriftgröße: 21px;
Rand unten: 10px;
Rand oben: 0px;
Farbe: #fafafa;
}

.Seitentext {
Schriftgröße: 15px;
}

Wie Sie sehen können, ist es nur ein einfaches Styling, das die Seiteninformationen halbtransparent und den Text lesbar macht.

Als Nächstes fügen wir den Schaltflächen ein nettes CSS3-Styling hinzu.

 .Taste {
Schwimmer: links;
Hintergrund: #bababa;
Breite: 16px;
Höhe: 16px;
-Webkit-Randradius: 8px;
-moz-Randradius: 8px;
Randradius: 8px;
Rand links: 5px;
Rand rechts: 5px;
}

.button:hover {
-webkit-box-shadow: Einschub 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: Einschub 0px 0px 2px 2px #d4d4d4;
Box-Schatten: Einschub 0px 0px 2px 2px #d4d4d4;
}

.button:aktiv {
-webkit-box-shadow: Einschub 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: Einschub 0px 0px 2px 2px #7a7a7a;
Box-Schatten: Einschub 0px 0px 2px 2px #7a7a7a;
}

.button a {
Bildschirmsperre;
Breite: 16px;
Höhe: 16px;
}

Wir machten die Schaltflächen zu Kreisen und gaben ihnen eingesetzte Schlagschatten, um etwas Augenweide hinzuzufügen.

Schließlich fügen wir der Mischung die magische Zutat hinzu. Zuvor erkläre ich jedoch, wie das alles funktionieren wird.

Mit dem CSS3 :target pseudo-selector können wir Elemente gestalten, die in der URL enthalten sind. Zum Beispiel:

 #Beispiel {
Sichtbarkeit: versteckt;
}

#Beispiel:Ziel {
Sichtbarkeit: sichtbar;
}

Wenn wir uns nun an einer URL wie „http://www.example.com/index.html #example “ befinden, würden die obigen „:target“-Stile angewendet. In diesem Fall wäre das „Beispiel“-Div sichtbar.

Mit diesem Konzept können wir eine JavaScript-Klickfunktion nachahmen. Wenn der Benutzer auf einen Link klickt , der auf „http://www.example.com/index.html#example“ zeigt, werden die Stile auf „example“ angewendet.

In diesem Fall verwenden wir „:target“, damit unser Content-Slider funktioniert. Wenn der Benutzer auf eine der sechs Schaltflächen im Navigationsfeld klickt, wird das „Inhaltsinnere“ an die entsprechende Position verschoben, ähnlich wie bei einer Javascript-Version.

Hier ist der Code:

 #content-inner-1:Ziel #content-inner {
-Webkit-Übergang: Alle 400ms problemlos;
-moz-Übergang: alle 400 ms Ease;
-o-Übergang: alle 400 ms nachlassen;
Übergang: alle 400 ms Leichtigkeit;
linker Rand: 0px;
}

#content-inner-2:Ziel #content-inner {
-Webkit-Übergang: Alle 400ms problemlos;
-moz-Übergang: alle 400 ms Ease;
-o-Übergang: alle 400 ms nachlassen;
Übergang: alle 400 ms Leichtigkeit;
Rand links: -640px;
}

#content-inner-3:Ziel #content-inner {
-Webkit-Übergang: Alle 400ms problemlos;
-moz-Übergang: alle 400 ms Ease;
-o-Übergang: alle 400 ms nachlassen;
Übergang: alle 400 ms Leichtigkeit;
Rand links: -1280px;
}

#content-inner-4:Ziel #content-inner {
-Webkit-Übergang: Alle 400ms problemlos;
-moz-Übergang: alle 400 ms Ease;
-o-Übergang: alle 400 ms nachlassen;
Übergang: alle 400 ms Leichtigkeit;
Rand links: -1920px;
}

#content-inner-5:Ziel #content-inner {
-Webkit-Übergang: Alle 400ms problemlos;
-moz-Übergang: alle 400 ms Ease;
-o-Übergang: alle 400 ms nachlassen;
Übergang: alle 400 ms Leichtigkeit;
Rand links: -2560px;
}

#content-inner-6:Ziel #content-inner {
-Webkit-Übergang: Alle 400ms problemlos;
-moz-Übergang: alle 400 ms Ease;
-o-Übergang: alle 400 ms nachlassen;
Übergang: alle 400 ms Leichtigkeit;
Rand links: -3200px;
}

Fazit

Wir haben 6 „ content-inner-[number] “ divs und jedes div entspricht einer Seite. 6 Seiten sind 6 divs.

Das „content-inner“ :targeted ist ein untergeordnetes Element jedes „ content-inner-[number] content-inner-[number] -Div content-inner ” div entsprechend.

Da jede Seite 640 Pixel breit ist, setzen wir einfach den linken Rand des „ content-inner “-Div auf ein Vielfaches von 640.

Damit diese „ :target “-Stile funktionieren, müssen wir Links haben, die auf sie verweisen. Daher das „ nav “ ul unter den Seiten.

Um das „ content-inner “ tatsächlich zu animieren , geben wir ihm die üblichen CSS3-Animationseigenschaften, natürlich mit Vendor-Präfixen.

Nun, da haben Sie es: Ein voll funktionsfähiger, wenn auch nicht semantischer Content-Slider.