Comment faire un texte en 3D avec CSS ?

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;



Ombre
.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.

Text 3D
.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.

Text 3D
.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);
}

Articles similaires :

Mots-clefs : , ,

Laisser une réponse