Cum să construiți un glisor de conținut complet funcțional numai pentru CSS3

Glisoarele de conținut sunt o modalitate excelentă de a face un site web mai dinamic. Ele adaugă fler și, dacă sunt folosite corect, ar putea fi diferența dintre o achiziție și un buton înapoi. În mod normal, acestea ar fi construite cu jQuery sau altă bibliotecă Javascript. Cu toate acestea, odată cu apariția CSS3, vă voi arăta cum să construiți unul folosind doar CSS.

Rezultatul nu va fi cel mai semantic lucru care a fost realizat vreodată, dar va fi totuși complet funcțional.

Niște HTML simplu pentru a începe

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Pagina 1

						
Lorem ipsum dolor sit amet, consectur orice blah.

					

				

				

					
					

						
Pagina 2

						
Lorem ipsum dolor sit amet, consectur orice blah.

					

				

				

					
					

						
Pagina 3

						
Lorem ipsum dolor sit amet, consectur orice blah.

					

				

				

					
					

						
Pagina 4

						
Lorem ipsum dolor sit amet, consectur orice blah.

					

				

				

					
					

						
Pagina 5

						
Lorem ipsum dolor sit amet, consectur orice blah.

					

				

				

					
					

						
Pagina 6

						
Lorem ipsum dolor sit amet, consectur orice blah.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Desigur, asta pare înfricoșător. Foarte înfricoșător. Ține minte, acesta nu va fi cel mai semantic lucru de pe planetă. Acum, lasă-mă să explic.

Avem un div „ content-slider ”, care deține tot conținutul. Vom doar „ margin: 0 auto ” și vom uita de el.

Apoi, avem două secțiuni: div-ul „ content ” și ul „ nav ”. Div-ul de conținut este ceea ce deține toate paginile noastre, iar ul „nav” este ceea ce ne permite să accesăm diferite pagini.

Acum, chiar în interiorul div-ului „conținut”, veți observa 6 div-uri imbricate: „ content-inner-1 ” prin „ content-inner-6 ”. Aceste 6 div-uri vor face ca toată magia să funcționeze și voi explica exact cum mai târziu.

CSS-ul magic

 #content-slider {
familie de fonturi: arial;
latime: 640px;
marja: 0 auto;
margine-top: 100px;
}

#conținut {
preaplin: ascuns;
latime: 640px;
înălțime: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
casetă-umbră: 0px 0px 50px 10px #c9c9c9;
}

#conținut-interior {
lățime: 10000px;
înălțime: 480px;
}

.pagina {
latime: 640px;
înălțime: 480px;
plutește la stânga;
}

După cum am spus, tot ce am făcut la div-ul „ content-slider ” a fost să-l centram și să-l mutăm la 100 de pixeli din partea de sus a paginii.

Stilul div „ content ” este foarte important. Îi setăm „depășirea” la „ascuns” – Acest lucru ne asigură că diapozitivele sunt invizibile până când sunt selectate.

Acum, div content-inner ” este ceea ce deține toate paginile. Acesta este motivul pentru care are o lățime de 10.000 px. În mod normal, javascript i-ar da lățimea potrivită, dar în acest caz, nu folosim Javascript.

Paginile au o lățime și o înălțime și sunt plutite spre stânga pentru a fi una lângă alta.

Acum, avem un stil generic. Vom stila „ page-info ” și „ nav ”.

 .page-info {
inaltime: 90px;
culoare de fundal: rgba(99, 99, 99, 0,6);
poziție: relativă;
margin-sus: 0px;
jos: 103px;
culoare: #dedede;
padding-stânga: 20px;
padding-top: 10px;
}

.page-info h2 {
dimensiunea fontului: 21px;
margine-jos: 10px;
margin-sus: 0px;
culoare: #fafafa;
}

.page-text {
dimensiunea fontului: 15px;
}

După cum puteți vedea, este doar un stil simplu care face informațiile din pagină semi-transparente și face textul lizibil.

În continuare, vom adăuga un stil CSS3 frumos la butoane.

 .button {
plutește la stânga;
fundal: #bababa;
latime: 16px;
înălțime: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
chenar-rază: 8px;
margine-stânga: 5px;
margine-dreapta: 5px;
}

.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
casetă-umbră: inserție 0px 0px 2px 2px #d4d4d4;
}

.button:activ {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
casetă-umbră: inserție 0px 0px 2px 2px #7a7a7a;
}

.button a {
afisare: bloc;
latime: 16px;
înălțime: 16px;
}

Am făcut cercuri pentru butoane și le-am dat umbre interioare pentru a adăuga niște bomboane pentru ochi.

În cele din urmă, vom adăuga ingredientul magic la amestec. Înainte de asta, însă, voi explica cum vor funcționa toate acestea.

Folosind CSS3 :target pseudo-selector , putem stila elementele care se află în url. De exemplu:

 #exemplu {
vizibilitate: ascuns;
}

#example:țintă {
vizibilitate: vizibil;
}

Acum, dacă ne-am afla la o adresă URL precum „http://www.example.com/index.html #example , s-ar aplica stilurile „:target” de mai sus. În acest caz, div-ul „exemplu” ar fi vizibil.

Folosind acest concept, putem imita o funcție de clic javascript. Dacă utilizatorul face clic pe un link care indică „http://www.example.com/index.html#example”, atunci stilurile vor fi aplicate la „example”.

În acest caz, vom folosi „:target” pentru ca glisorul de conținut să funcționeze. Când utilizatorul face clic pe oricare dintre cele șase butoane din navigare, „conținutul interior” va aluneca în poziția corespunzătoare, la fel ca în cazul unei versiuni javascript.

Iată codul:

 #content-inner-1:țintă #content-inner {
-webkit-tranziție: toate 400ms ușurință;
-moz-tranziție: toate 400ms ușurință;
-o-tranziție: toate 400ms ușurință;
tranziție: toate 400ms ușurință;
margine-stânga: 0px;
}

#content-inner-2:țintă #content-inner {
-webkit-tranziție: toate 400ms ușurință;
-moz-tranziție: toate 400ms ușurință;
-o-tranziție: toate 400ms ușurință;
tranziție: toate 400ms ușurință;
margine-stânga: -640px;
}

#content-inner-3:țintă #content-inner {
-webkit-tranziție: toate 400ms ușurință;
-moz-tranziție: toate 400ms ușurință;
-o-tranziție: toate 400ms ușurință;
tranziție: toate 400ms ușurință;
margine-stânga: -1280px;
}

#content-inner-4:țintă #content-inner {
-webkit-tranziție: toate 400ms ușurință;
-moz-tranziție: toate 400ms ușurință;
-o-tranziție: toate 400ms ușurință;
tranziție: toate 400ms ușurință;
margine-stânga: -1920px;
}

#content-inner-5:țintă #content-inner {
-webkit-tranziție: toate 400ms ușurință;
-moz-tranziție: toate 400ms ușurință;
-o-tranziție: toate 400ms ușurință;
tranziție: toate 400ms ușurință;
margine-stânga: -2560px;
}

#content-inner-6:țintă #content-inner {
-webkit-tranziție: toate 400ms ușurință;
-moz-tranziție: toate 400ms ușurință;
-o-tranziție: toate 400ms ușurință;
tranziție: toate 400ms ușurință;
margine-stânga: -3200px;
}

Concluzie

Avem 6 div-uri „ content-inner-[number] ” și fiecare div corespunde unei pagini. 6 pagini înseamnă 6 div.

Div-ul „conținut-intern” este un copil al fiecărui div „ content-inner-[number] ”, așa că atunci când oricare dintre aceste 6 div-uri „ content-inner-[number] ” sunt :targeted , putem content-inner „conținut- content-inner ” div în consecință.

Deoarece fiecare pagină are 640 px lățime, pur și simplu setăm marginea din stânga a div content-inner ” la un multiplu de 640.

Pentru ca aceste stiluri „ :target ” să funcționeze, trebuie să avem legături care să indice ele. Prin urmare, „ nav ” ul de sub pagini.

Pentru a anima efectiv „ content-inner ”, îi dăm proprietățile obișnuite de animație CSS3, cu prefixe de furnizor, desigur.

Ei bine, iată-l: un glisor de conținut complet funcțional, deși non-semantic.