[Techniques CSS] Des titres avec des dégradés en CSS

Publié le par xylpho

Il y a un moment déjà, j'avais vu cette technique sur un site anglophone mais je n'ai jamais vu, même dans un blog "glitter-bling bling- kikoolol" l'exploitation de cette méthode. Pourtant elle est super cette technique, pas besoin de javascript et elle marche sur tous les navigateurs avec un poil de ruse de sioux.

Allez, je te fais la démo et l'explication en français qui va avec :

Mettons, tu as un titre

Je suis un titre

En html, ça te donne ça :

 <h2>Je suis un titre</h2> 

Pour que la technique commence à marcher il faut avoir en plus de la balise h2 une balise span :

 <h2><span></span>Je suis toujours un titre</h2> 

Voilà, c'est tout ce qu'il y a à faire au niveau de ton html, il n'y a pas plus simple…

Maintenant la css :

 h2 { font: bold 31px/44px "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 50px; color: #464646; } h2 span { background: url(images/gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; } 

Et c'est tout… Je pars du principe que tu sais faire un dégradé en png d'une couleur solide vers du transparent hein.

Allez, une démo

 Hoooooooooo, je suis un titre tout beau

C'est tout pour aujourd'hui, rangez vos trousses et vos cahiers…

Ha, un dernier détail, si tu veux que ça marche aussi sur Internet Explorer il faut ça en plus :

 .gradient h2 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gradient-white.png', sizingMethod='scale'); } 

Et là tu me dis comment que je fais pour que IE et seulement IE lise ce truc ?

Si ça merdouille dans IE7, tu dois te retaper la déclaration (donc la dupliquer) et rajouter cette fois-ci une "*" devant chaque déclaration.

Qui a dit que IE n'est pas brise-burnes?

Publié dans Blog

Commenter cet article