Il existe différentes techniques pour faire des ombres en css. Celle-ci à l'avantage de nécessiter peu de code, et de respecter un minimum la sémantique. Elle n'est pas parfaite, mais elle a l'avantage de s'adapter à la taille de l'objet à ombrer.
Note: La technique pour appliquer une ombre qui aura toujours la même taille, et simple, il suffit d'enregistrer l'image de l'ombre, l'appliquer en fond de l'objet, et mettre des marges intérieures à l'objet (padding).
Pour commencer, il faut des objets à ombrer…
<div
class="conteneur_ombre"
>
<div
id="boite_avec_ombre"
>Contenu
ombré</div>
</div>
<div
class="conteneur_ombre"
>
<img
src="image.png" alt="Image avec
ombre"/>
</div>
Avec cette technique, il faut un conteneur. Ça peut poser des problèmes sémantiquement…
Il faut ensuite avoir des images représentants l'ombre. Dans
cet exemple, ce sont des images png, 24 bits, où le fond
transparent est blanc (pour les navigateurs qui ne prennent pas
en compte la couche alpha).
Maintenant, il faut faire du css:
.conteneur_ombre{
background:url(“ombre1.png“)
no-repeat;
float:left;
clear:left;
}
.conteneur_ombre #boite_avec_ombre, .conteneur_ombre img{
background:url(“ombre2.png“)
no-repeat
bottom
right;
padding-bottom:8px;
padding-right:7px;
margin-left:5px;
margin-bottom:-6px;
margin-top:4px;
margin-right:-4px;
}
Voila un petit exemple:
Voilà, c'est pas bien compliqué, et ça peut faire jolie, en
attendant les css3, et des propriétés particulièrement adaptés
à ce genre d'effets.
Tuto
Le 19/04/2007 à 00:58
Pas mal :) Sauf que ça rends pas super aux coins bas-gauche et haut-droit… En plus, si tu veux ombrer de grandes images, ça te fait deux énormes images d'ombres :/
PS : "LE navigateur qui ne connait pas les couches alpha" ;)