Une ombre pour donner du relief en CSS
Ajouter une ombre sous une boite de texte ou sous une image peut se faire en HTML et CSS sans JavaScript ni framework.
Depuis CSS 3 qui est supporté par les navigateurs modernes, on peut utiliser des propriétés d'ombrage.
.shadow
{
-moz-box-shadow: 4px 4px 10px #888;
-webkit-box-shadow: 4px 4px 10px #888;
box-shadow:4px 4px 6px #888;
}Mais pour les navigateurs plus anciens, il faut recourir à des substituts.
Imbriquer des calques
Le principe consiste à imbriquer des calques l'un dans l'autre, avec un décalage et une couleur de fond de teinte progressivement assombrie.
<div class="box" style="width:400px">
<div class="offset color1" >
<div class="offset color2">
<div class="offset color3">
<div class="offset inner">
Message
</div>
</div>
</div>
</div>
</div>Il suffit alors d'insérer ce code dans la page et de lier la feuille de style qui réalise l'ombre (dans la démo, le code CSS est dans la page HTML).
Voici le code pour le décalage et les couleurs:
.offset { position: relative; left:-1px; top:-1px; }
.color1 { background: #F0F0F0; }
.color2 { background: #DBDBDB; }
.color3 { background: #B8B8B8; } La largeur de la boite doit être spécifiée dans le code HTML si on utilise des boites de taille différentes.
Dans le cas d'une image, il faut aussi spécifier la taille de l'image pour le calque qui la contient, et un padding de 0, contrairement au texte qui doit avoir une marge.
div class="offset inner" style="padding:0;height:400px;width:258px" border="0" >
<img src="images/20.jpg" />
</div>Exemple d'ombre sous une boite de texte ou image avec des calques
Démonstration d'une boite de texte avec une ombre en CSS.
Démonstration d'une boite d'image avec une ombre....
Utilisation d'une image pour l'ombre
Le méthode précédente à l'avantage de n'utiliser que du code CSS, mais elle requiert que l'on insère un bloc de code HTML important.
On peut le simplifier en utilisant une image pour créer l'ombre de la boite. Pour cela on réalise une image blanche dotée d'un bord gris dégradé sur le coté droit et en bas.
On l'utilise cette image avec cette propriété CSS:
.shadedimg
{
background: url(images/shadedborder.gif) no-repeat bottom right;
} L'image devient le fond d'un conteneur qui contiendra soit un autre calque pour un message textuel, soit directement une balise img.
Dans le second cas le code HTML est minimal:
<div class="shadedimg" style="height:410px;width:268px">
<img src="images/20.jpg" />
</div>Dans le premier cas, l'ajout d'un conteneur interne le complique un peu:
<div class="shadedimg" style="width:400px;">
<div class="innershade">
...contenu...
</div>
</div>La balise img ou le calque inner sont décalés de quelques pixels a gauche et vers le haut par rapport au conteneur externe pour faire apparaître l'ombre à droite et en bas.
Démonstration pour une boite de texte
L'ombre étant obtenue avec une image comme fond du conteneur externe, et un calque interne est doté d'un bord.
Exemple de boite de message
L'ombre est créée par une image utilisée comme fond pour le conteneur.
On donne une marge interne de 8 pixels pour le message.
Le code CSS:
.shadedimg
{
background: url(images/shadedborder.gif) no-repeat bottom right;
}
.innershade
{
position:relative;
bottom:5px;
right: 5px;
padding:8px;
margin: 0;
z-index:2;
background:white;
border: 1px solid gray;
} Démonstration pour une image
Aucun conteneur n'est requis pour l'image, mais il faut un conteneur pour l'ombre.
Le code CSS complet:
.shadedimg
{
background: url(images/shadedborder.gif) no-repeat bottom right;
}
.shadedimg img
{
position:relative;
margin:0 0 0 0;
z-index:2;
border: 1px solid black;
overflow:hidden;
}