follow me
L’arrivée d’Internet Explorer 9 va enfin nous permettre d’exploiter à fond le CSS3. Tous les navigateurs modernes supportant désormais cette technologie, l’utilisation de Photoshop pour les effets de styles sur le texte n’est plus automatique.
La propriété CSS text-3d n’existe pas en soit. Mais on peut créer l’effet 3D en superposant plusieurs ombres de texte (text-shadow).
La propriété text-shadow permet de créer l’ombre d’un texte avec un décalage en x et en y.
La couleur de l’ombre, ainsi que la diffusion de celle-ci peut être choisie.
text-shadow: position_x position_y diffusion couleur;
.texte_au_soleil{ text-shadow: 2px 3px 5px #CFB565; } |
La superposition des ombres est très simple à mettre en place, il suffit d’ajouter d’autres ombres à la propriété text-shadow de la manière suivante.
.texte_3D{ text-shadow: 1px 1px 1px #CFB565, 1px 2px 1px #CFB565, 1px 3px 1px #CFB565, 1px 4px 1px #CFB565, 1px 5px 1px #CFB565, 1px 6px 1px #CFB565, 1px 7px 1px #CFB565; } |
On peut donner plus de réalisme à l’effet 3D en ajoutant un jeu de lumière grâce à une ombre plus diffuse.
.texte_3D{ text-shadow: 1px 1px 1px #CFB565, 1px 2px 1px #CFB565, 1px 3px 1px #CFB565, 1px 4px 1px #CFB565, 1px 5px 1px #CFB565, 1px 6px 1px #CFB565, 1px 7px 1px #CFB565, 0 1px 1px rgba(68,68,68,.3), 0 5px 3px rgba(68,68,68,.2), 0 10px 4px rgba(68,68,68,.2), 0 15px 8px rgba(68,68,68,.2), 0 30px 10px rgba(68,68,68,.1); } |