Un effet gradient sur du texte en CSS

Publié le vendredi 15 février 2008, 11:19 - modifié le 16/04/08 - Xhtml / CSS - Lien permanent

Article
Commentaires (10)
Fichiers attachés (0)

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

Auteur: Guillaume BIZET

Restez au courant de l'actualité et abonnez-vous au Flux RSS du blog ou du Flux RSS de cette catégorie

Tweeter

Vincent V · 15 février 2008, 11:19

Effectivement c'est tout simple, il suffisait d'y penser.

Ca devrait permettre à ceux qui ne veulent pas remplacer le h1 de leur header dans Wordpress ou Dotclear par une image d'avoir un titre sympa.

Belle trouvaille.

ShadowKris · 15 février 2008, 11:19

Marche partout sauf qu'il faut un hack pour IE6 ^^
C'est pas mal quoi.

Haza · 15 février 2008, 11:48

Effectivement, IE6 ne gerant pas nativement la transparence du PNG, on ne peux pas dire que la version, telle qu'elle est présenter ici, fonctionne sur tous les navigateur.

Il existe des "hack" permettant de gerer les png correctement sous IE6, mais on devient alors dépendant de javascript/activex

Cedynamix · 15 février 2008, 12:12

Oui belle astuce . Merci

dhoko · 16 février 2008, 15:13

Sympa mais avec les superbes navigateurs de Microsoft sa va être une partie de plaisir...

Jean-Michel · 17 février 2008, 22:32

Guillaume, tu penses qu'on peut l'adopter sur un thème Dotclear 2 ? J'ai tenté le coup mais je pèche quelques part.

Christophe Lefevre · 19 février 2008, 09:43

Génial

digiboy · 19 février 2008, 12:57

Pour IE6, c'est vrai que c'est genant mais si tout le monde y met de sa mauvaise volonté les utilisateurs de IE6 migreront vers IE7 ou, mieux, Firefox.
Il existe aussi une initiative pour kicker IE6 du web:
http://www.digiboy.fr/2008/01/30/li...

digiboy · 19 février 2008, 12:59

Mymoun · 06 juillet 2008, 15:34