Home

Donner un effet d'ombre à un titre

Submitted by PiTiLeZarD on Tue, 01/18/2005 - 14:48
Tagged:

Le CSS permet de définir un style pour une balise a l'intérieur d'une autre, et ce, indépendament du style qu'elle aurait du avoir ... Ce qui nous permet de définir une ombre pour un titre ... par exemple la balise <h1>. Si on fait :

 <h1>Titre<span>Titre</span></h1>

Alors évidemment on définit 2 fois la même chose ... mais d'un point de vue CSS on peut faire :

 h1 {
   position:relative;
   color:black;
 }
 
 h1 span {
   position:absolute;
   top:-2px;
   left:2px;
   color:red;
 }

et la il suffit de changer les couleurs et de faire varier le top et le left pour obtenir ce qu'on veut ...

Comments

Submitted by xian (not verified) on Fri, 03/04/2005 - 11:21.

Sémentiquement parlant, cette astuce n'est pas très propre... ;o)

Submitted by PiTiLeZarD (not verified) on Fri, 03/04/2005 - 21:06.

Je ne suis pas bien certain de comprendre la remarque :

si sémantique = conforme xHTML c'est propre, par contre si c'est au point de vue du sens même de la balise titre, c'est vrai que la répétition n'a en soit pas lieu d'être ...

disons que j'ai plus tendence a faire un <h1><span>Titre</span></h1> et remplacer le span par une image, mais je trouvais intéressant le tuyau ... tu penses pas ?

Submitted by xian (not verified) on Wed, 03/09/2005 - 11:15.

Oui l'astuce est en soit intéressante c'est vrai, mais le problème est que dans un navigateur qui ne prend par en compte les css l'utilisateur verra 2 fois le titre, et c'est ça qui me gène le plus...

Submitted by Futal (not verified) on Sun, 07/31/2005 - 11:15.

Pas très propre en effet le doublement du titre, surtout que la propriété CSS existe, tient en une ligne et permet même d'avoir une ombre floue donc plus réelle. Présente dans CSS2.0 et CSS3.0, elle s'appelle "text-shadow". Malheureusement elle ne fonctionne pour l'instant qu'avec les navigateurs dignes de ce nom, à savoir Konqueror et Safari.

Submitted by PiTiLeZarD (not verified) on Sun, 07/31/2005 - 18:56.

Et c'est en partie le pourquoi du comment du workaround :)