Css3 – text-shadow : Un effet 3D et profondeur de champs

Posté le 6 oct 2011 dans Css, html5 | 0 commentaire

Hello à tous. Aujourd’hui nous allons voir un effet intéressant découvert sur un site merveilleux. Le site en question est Simurai.com, vous pouvez y découvrir des effets CSS3 juste magnifique. Je vous invite vraiment à y faire un tour, celà en vaut le coup et vous découvrirai vraiment la puissance du CSS3. 

Le seul problème de ce superbe labo Css3 c’est qu’il n’explique pas du tout comment procéder pour obtenir de tel rendu. Je vais donc ici vous expliquer en profondeur les divers propriétés CSS3 qu’il a utilisé dans son exemple  afin de faire un effet 3D sur un texte et y appliquer une sorte de profondeur de champs

1) Le html

Voyons d’abord la partie html. Rien de plus simple: Un div #wrapper contenant 3 paragraphes. Notez que nous mettons le paramètre « contenteditable= »true » »  sur le wrapper, celui ci permet de rendre le contenu éditable afin que l’internaute puisse taper son propre message: magie du html 5

<div id="wrapper">
<p>Web</p>
<p>is just a</p>
<p>Poetry</p>
</div>

2) Le css3

Voyons maintenant la plus grosse partie qui va nous permettre de faire un effet 3D et un effet de profondeurs de champs (comme sur un appareil photo), à savoir le CSS3.
Tout d’abord le #wrapper

#wrapper {
	text-align: center;
	font-weight: bold;
	font-family: 'Sansita One', cursive, Lucida, Verdana, sans-serif;
	margin: 10px auto;
	width: 600px;
	padding: 7em 0;
 
}
#wrapper:focus {
	outline: none;
}

Ici, rien de vraiment spécial. Juste une typo google font ( pour ceci: rajouté « <link href=’http://fonts.googleapis.com/css?family=Sansita+One’ rel=’stylesheet’ type=’text/css’> » dans votre head html et mettez « font-family: ‘Sansita One’, cursive, Lucida, Verdana, sans-serif; »)

Voyons maintenant les styles des paragraphes: 

#wrapper p {
	margin:0px;
	font-size: 5em;
	color: #9a1d0d;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	-webkit-transition: -webkit-transform .1s ease-in;
}
#wrapper:hover p {
	color: #9a1d0d;
	-webkit-transform: rotate(1deg) rotateX(28deg) skewX(-4deg);
	-moz-transform:  rotate(1deg);
	transform:  rotate(1deg);
	-webkit-transition: -webkit-transform .1s ease-out;
}

Ici nous voyons l’état intitial et l’état au hover.
Plusieurs choses importantes:

• « -webkit-transition: -webkit-transform .1s ease-in; » pour définir le temps de transition à la sortie du rollover, ici 0.1s (ultra rapide)
• « -webkit-transition: -webkit-transform .1s ease-out; » pour définir le temps de transition à l’entré du rollover, ici 0.1s (ultra rapide)
• « -webkit-transform: rotate(1deg) rotateX(28deg) skewX(-4deg);« : la rotation pour Chrome et Safari. »"
• « -moz-transform: rotate(1deg);« : la rotation pour Firefox
• « transform: rotate(1deg);« : la rotation pour une fois que la propriété sera normée et inclues sur tous les navigateurs

Voyons maintenant les styles des paragraphes: 

#wrapper:hover p:nth-child(1) {
	font-size: 4em;
	text-shadow: 	#9a1d0d 0 0 10px,
			#fff 0 4px 3px,
			#fff 0 9px 3px,
			#ccc 0 12px 1px,
			rgba(255,255,255,0.7) 0 14px 5px,
			rgba(255,255,255,0.1) 0 20px 10px,
			rgba(255,255,255,0.2) 0 15px 80px;
	text-indent: 0.3em;
}
#wrapper:hover p:nth-child(2) {
	font-size: 5em;
	text-shadow: 	#9a1d0d 0 0 1px,
			#eee 0 4px 3px,
			#ddd 0 9px 3px,
			#ccc 0 12px 1px,
			rgba(0,0,0,0.2) 0 14px 3px,
			rgba(0,0,0,0.1) 0 20px 10px,
			rgba(0,0,100,0.2) 0 15px 80px;
}
#wrapper:hover p:nth-child(3) {
	font-size: 6em;
	text-shadow: 	#9a1d0d 0 0 2px,
			#eee 0 4px 5px,
			#ddd 0 9px 5px,
			#ccc 0 12px 10px,
			rgba(0,0,0,0.2) 0 14px 5px,
			rgba(0,0,0,0.1) 0 20px 10px,
			rgba(0,0,100,0.2) 0 15px 80px;
}

• #wrapper:hover p:nth-child(X) pour pointer le X ieme P du #wrapper lors de son hover
• text-shadow permet de définir une ou plusieurs ombres sur son texte

Ici le point vraiment important c’est le « text-shadow« . Comme vous pouvez le voir il y a plusieurs ligne par « text-shadow » et plusieurs paramètres par ligne

Prenons d’abord les paramètres d’un ligne dans l’ordre : d’abord la couleur en héxadécimale(#) ou rgb(rgba). On utilise rgba quand on veut définir une opacité (la dernière valeur entre parenthese). Les 3 valeurs suivantes (en px) sont, dans l’ordre, le décalage de l’ombre de droite à gauche (axe Y), le décalage en vertical de l’ombre (axe Y), et sa diffusion (pour la rendre + ou – « smooth » )

Ensuite, si ici il y a plusieurs lignes c’est que nous allons, grâce à ses ombres, donner l’effet 3D en les superposants l’une par dessus l’autre (en jouant seulement avec la position verticale ). La premiere ligne est en rouge, car elle va representer le dessus de la lettre, les lignes suivantes sont blanches car elle represente la tranche de la lettre et les 3 dernieres lignes represente l’ombre des lettres sur le « sol », elle sont donc en noir mais avec des opacités très faibles. C’est aussi grâce a ce jeu d’ombre que l’on peut emuler cet effet de profondeur de champs. En effet si vous regarder la premiere ligne des « text-shadow » sur les paragraphes 1 et 3 on peut voir que le « smooth » est plus elevé que sur le paragraphe 2.

Pour finir nous allons faire voler la ligne du milieu au hover de celle ci.

#wrapper p:nth-child(2):hover {
	color:transparent;
	text-shadow: 	#9a1d0d 0 -5px 1px,
					#eee 0 -1px 3px,
					#ddd 0 4px 3px,
					#ccc 0 7px 1px,
					rgba(0,0,0,0.2) 0 15px 5px,
					rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,0,0.2) 0 15px 80px;
}

Ici, au hover du 2ème P, nous jouons avec le « text-shadow » » en montant toutes les ombres de 5 pixels sur l’axe Y et en laissant les 3 dernières à leurs positions initiales. Ainsi on aura l’impression que les lettres flottent

J’espère avoir était suffisamment clair. N’hésitez pas à commenter au besoin.
Have Fun