Comment créer un curseur de contenu entièrement fonctionnel pour CSS3 uniquement

Les curseurs de contenu sont un excellent moyen de rendre un site Web plus dynamique. Ils ajoutent du style et, s'ils sont utilisés correctement, peuvent faire la différence entre un achat et un bouton de retour. Normalement, ils seraient construits avec jQuery ou une autre bibliothèque Javascript. Cependant, avec l'avènement de CSS3, je vais vous montrer comment en créer un en utilisant uniquement CSS.

Le résultat ne sera pas la chose la plus sémantique jamais réalisée, mais il sera néanmoins complètement fonctionnel.

Quelques HTML simples pour commencer

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Page 1

						
Lorem ipsum dolor sit amet, consectur n'importe quoi blah.

					

				

				

					
					

						
Page 2

						
Lorem ipsum dolor sit amet, consectur n'importe quoi blah.

					

				

				

					
					

						
Page 3

						
Lorem ipsum dolor sit amet, consectur n'importe quoi blah.

					

				

				

					
					

						
Page 4

						
Lorem ipsum dolor sit amet, consectur n'importe quoi blah.

					

				

				

					
					

						
Page 5

						
Lorem ipsum dolor sit amet, consectur n'importe quoi blah.

					

				

				

					
					

						
Page 6

						
Lorem ipsum dolor sit amet, consectur n'importe quoi blah.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Certes, ça a l'air effrayant. Très effrayant. N'oubliez pas que ce ne sera pas la chose la plus sémantique de la planète. Maintenant, laissez-moi vous expliquer.

Nous avons une div « content-slider », qui contient tout le contenu. Nous allons juste " margin: 0 auto " et l'oublier.

Ensuite, nous avons deux sections : la div « content » et la « nav » ul. Le contenu div est ce qui contient toutes nos pages, et le "nav" ul est ce qui nous permet d'accéder à différentes pages.

Maintenant, juste à l'intérieur de la div « content », vous remarquerez 6 divs imbriqués : « content-inner-1 » à « content-inner-6 ». Ces 6 divs feront fonctionner toute la magie, et j'expliquerai exactement comment plus tard.

Le CSS magique

 #content-slider {
famille de polices : arial ;
largeur : 640 px ;
marge : 0 automatique ;
marge supérieure : 100px ;
}

#contenu {
débordement caché;
largeur : 640 px ;
hauteur : 480px ;
-webkit-box-shadow : 0px 0px 50px 10px #c9c9c9 ;
-moz-box-shadow : 0px 0px 50px 10px #c9c9c9 ;
boîte-ombre : 0px 0px 50px 10px #c9c9c9 ;
}

#content-inner {
largeur : 10 000 pixels ;
hauteur : 480px ;
}

.page {
largeur : 640 px ;
hauteur : 480px ;
flotteur : gauche ;
}

Comme je l'ai dit, tout ce que nous avons fait pour la div " content-slider " a été de la centrer et de la déplacer de 100 pixels à partir du haut de la page.

Le style div " content " est très important. Nous définissons son "débordement" sur "caché" - Cela garantit que les diapositives sont invisibles jusqu'à ce qu'elles soient sélectionnées.

Maintenant, la div " content-inner " est ce qui contient toutes les pages. C'est la raison pour laquelle il a une largeur de 10 000 pixels. Normalement, javascript lui donnerait la bonne largeur, mais dans ce cas, nous n'utilisons pas Javascript.

Les pages ont une largeur et une hauteur, et elles flottent vers la gauche pour être côte à côte.

Maintenant, nous avons un style générique. Nous allons styliser la « page-info », et la « nav ».

 .page-info {
hauteur : 90px ;
couleur d'arrière-plan : rgba (99, 99, 99, 0,6) ;
position : relative ;
marge supérieure : 0 px ;
bas : 103px ;
couleur : #dedede ;
rembourrage à gauche : 20 px ;
rembourrage en haut : 10 px ;
}

.page-info h2 {
taille de police : 21 px ;
marge inférieure : 10px ;
marge supérieure : 0 px ;
couleur : #fafafa ;
}

.page-texte {
taille de police : 15 px ;
}

Comme vous pouvez le constater, il s'agit simplement d'un style simple qui rend les informations de la page semi-transparentes et rend le texte lisible.

Ensuite, nous ajouterons un joli style CSS3 aux boutons.

 .bouton {
flotteur : gauche ;
arrière-plan : #bababa ;
largeur : 16px ;
hauteur : 16px ;
-webkit-bordure-rayon : 8 px ;
-moz-bordure-rayon : 8 px ;
rayon de bordure : 8 px ;
marge gauche : 5px ;
marge droite : 5 px ;
}

.bouton : survoler {
-webkit-box-shadow : encart 0px 0px 2px 2px #d4d4d4 ;
-moz-box-shadow : encart 0px 0px 2px 2px #d4d4d4 ;
boîte-ombre : encart 0px 0px 2px 2px #d4d4d4 ;
}

.bouton :actif {
-webkit-box-shadow : encart 0px 0px 2px 2px #7a7a7a ;
-moz-box-shadow : encart 0px 0px 2px 2px #7a7a7a ;
boîte-ombre : encart 0px 0px 2px 2px #7a7a7a ;
}

.bouton un {
bloc de visualisation;
largeur : 16px ;
hauteur : 16px ;
}

Nous avons fait des cercles de boutons et leur avons donné des ombres portées incrustées pour ajouter un peu de plaisir pour les yeux.

Enfin, nous ajouterons l'ingrédient magique au mélange. Avant cela, cependant, je vais vous expliquer comment tout cela va fonctionner.

En utilisant le :target pseudo-selector , nous pouvons styliser les éléments qui se trouvent dans l'url. Par exemple:

 #Exemple {
visibilité : masquée ;
}

#exemple : cible {
visibilité : visible ;
}

Maintenant, si nous étions sur une URL telle que "http://www.example.com/index.html #example , les styles ":target" ci-dessus seraient appliqués. Dans ce cas, la div "exemple" serait visible.

En utilisant ce concept, nous pouvons imiter une fonction de clic javascript. Si l'utilisateur clique sur un lien pointant vers "http://www.example.com/index.html#example", alors les styles seront appliqués à "example".

Dans ce cas, nous utiliserons ":target" pour faire fonctionner notre curseur de contenu. Lorsque l'utilisateur clique sur l'un des six boutons de la navigation, le "content-inner" glisse vers la position appropriée, un peu comme avec une version javascript.

Voici le code :

 #content-inner-1:target #content-inner {
-webkit-transition : toutes les 400 ms d'aisance ;
-moz-transition : toutes les 400 ms de facilité ;
-o-transition : toutes les 400 ms d'aisance ;
transition : toutes les 400 ms d'aisance ;
marge-gauche : 0px ;
}

#content-inner-2:target #content-inner {
-webkit-transition : toutes les 400 ms d'aisance ;
-moz-transition : toutes les 400 ms de facilité ;
-o-transition : toutes les 400 ms d'aisance ;
transition : toutes les 400 ms d'aisance ;
marge gauche : -640px ;
}

#content-inner-3:target #content-inner {
-webkit-transition : toutes les 400 ms d'aisance ;
-moz-transition : toutes les 400 ms de facilité ;
-o-transition : toutes les 400 ms d'aisance ;
transition : toutes les 400 ms d'aisance ;
marge gauche : -1280px ;
}

#content-inner-4:target #content-inner {
-webkit-transition : toutes les 400 ms d'aisance ;
-moz-transition : toutes les 400 ms de facilité ;
-o-transition : toutes les 400 ms d'aisance ;
transition : toutes les 400 ms d'aisance ;
marge gauche : -1920px ;
}

#content-inner-5:target #content-inner {
-webkit-transition : toutes les 400 ms d'aisance ;
-moz-transition : toutes les 400 ms de facilité ;
-o-transition : toutes les 400 ms d'aisance ;
transition : toutes les 400 ms d'aisance ;
marge gauche : -2560px ;
}

#content-inner-6:target #content-inner {
-webkit-transition : toutes les 400 ms d'aisance ;
-moz-transition : toutes les 400 ms de facilité ;
-o-transition : toutes les 400 ms d'aisance ;
transition : toutes les 400 ms d'aisance ;
marge gauche : -3200px ;
}

Conclusion

Nous avons 6 divs « content-inner-[number] », et chaque div correspond à une page. 6 pages c'est 6 divs.

La div "content-inner" est un enfant de chaque div " content-inner-[number] ", donc quand 6 de ces divs " content-inner-[number] " sont :targeted , nous pouvons styliser le " content-inner ” div en conséquence.

Étant donné que chaque page fait 640 pixels de large, nous définissons simplement la marge gauche de la div « content-inner » sur un multiple de 640.

Pour que ces styles « :target » fonctionnent, nous devons avoir des liens pointant vers eux. Par conséquent, le " nav " ul sous les pages.

Afin d' animer réellement le " content-inner ", nous lui donnons les propriétés d'animation CSS3 habituelles, avec des préfixes de fournisseur, bien sûr.

Eh bien, voilà : un curseur de contenu entièrement fonctionnel, bien que non sémantique.