Le 21 avril 2011 8

Billets

[Webdesign] Créer du texte 3D en pur CSS

• •
 

Cela faisait longtemps que je n’avais pas fait un billet de pur webdesign. Je suis tombé sur une bonne technique sur un forum, que je vous retranscris ici.

Si vous cherchez à créer du texte ou un logo textuel 3D qui sort de l’ordinaire, sans pour autant recourir à des images, voici un bon moyen de le faire.

Tout d’abord, on commence par le résultat :

test3d 500x101 [Webdesign] Créer du texte 3D en pur CSS

Le code est assez simple. Il suffit de créer le texte dans une balise de votre choix; j’ai choisi <h1>.

<html>
<head>
<title>Test Texte 3D</title>
<h1>Websourcing.fr</h1>
</html>

Le code CSS correspondant sera :

body {
background-color: #f5f5f5;
color: #fff;
font-size: 36px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c8c8c8,
               0 3px 0 #b1b1b1,
               0 4px 0 #b8b8b8,
               0 5px 0 #a1a1a1,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

Verbeux, mais une fois compressé et minifié, cela sera extrêmement moins lourd que l’image correspondante.

Je trouve le résultat pas mauvais. Bien entendu, cela ne fonctionne que dans un navigateur compatible CSS3 qui prend ne charge le text-shadow (donc IE9, FF3.5+, …).

Qu’en pensez vous ?