Guillaume Bizet's Blog | Blogging, Web2.0, Dotclear et Dotclear2

Je trouve cette solution très ingénieuse pour pouvoir appliquer un effet de gradient sur du texte et en CSS.
Cela peut paraitre compliqué, et pourtant !!! C'est là que l'on voit la puissance des CSS

Voici comme le réaliser.
Code xhtml

[html4strict]
<h1><span></span>CSS Gradient Text</h1>

et code CSS

[html4strict]
h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

la clé du succès se situe dans les paramètres h1 { position: relative } et h1 span { position: absolute }

Si vous le souhaitez vous pouvez très bien adapter ce système pour donner un effet web2.0 à tous vos titres.
Pour cela réalisez le png qui va bien ;)

Les avantages de cette technique :

• technique valide pour tous les navigateurs puisqu'elle n'intègre pas de javascript ou de flash
• vous pouvez utiliser la police que vous souhaitez

• Voir des démonstrations
• Télécharger un package de test

Merci WebDesignerWall

Vous connaissez bien sur les sites officiels pour faire valider la sémantique de votre site web :

• validator.w3.org pour contrôler la partie HTML de votre site/blog
• et jigsaw.w3.org/css-validator/ pour contrôler la partie CSS

et bien le site Xhtml CSS validator va vous faciliter la tâche puisqu'il fait les 2 validations en même temps.

Cliquez sur l'image pour la voir en grand

J'ai fait le test pour mon blog et voici le résultat

Cliquez sur l'image pour la voir en grand

Au passage si quelqu'un peut m'expliquer cette erreur CSS qui me fait ch***, je serai ravi de comprendre d'où elle vient puisque je ne trouve pas cette ligne dans mes fichiers CSS !!!

Vous pourrez même trouver sur ce site une extension pour firefox appelée BeValid! spécialement développée pour vérifier la validité Xhtml et CSS de l'url dans la barre d'adresse.

Alors, pratique non ?