Ombre portée avec box-shadow

Si vous vous êtes demandé comment ajouter un effet d'ombre portée ou ombrage à un élément HTML sans utiliser une technique d'image en arrière plan, ce qui suit va vous intéressez :). Il existe en CSS3 une propriété nommé box-shadow qui permet (si votre navigateur est récent) de créer une ombre portée. Cette propriété comme la propriété border-radius à besoin d'être préfixé pour certains navigateur par -moz- sur Gecko ou par -webkit- sur Webkit .

Les exemples ci-dessous affiche tous une ombre externe ou interne. Si vous ne voyez pas cette ombre, c'est que votre navigateur ne prend pas en charge cette propriété.
.mon_div{
box-shadow: 8px 8px 12px #555;
}
 

Le premier chiffre 8px correspond à l'espace horizontale de l'ombre (distance à partir du bord droit de l'élément HTML). Si la valeur du premier chiffre est négatif, l'ombre sera placée à gauche.

Le second chiffre 8px correspond à l'espace verticale de l'ombre (distance à partir du bas de l'élément HTML). Si la valeur du second chiffre est négatif, l'ombre sera placée au dessus.

Le troisième chiffre 12px correspond au flou de l'ombre. Plus ça valeur est grande, plus l'ombre sera flou et inversement.

Le dernier élément #555 correspond à la couleur de l'ombre au format hexadécimal. On peut également utiliser le format RGB rgba(255, 255, 255, 0.5) et ainsi appliquer une effet d'opacité sur l'ombrage grâce à la dernière valeur.

Pour les navigateurs utilisant Gecko ou Webkit :
.mon_div{
box-shadow: 8px 8px 12px #555;
/*Gecko*/
-moz-box-shadow: 8px 8px 12px #aaa;
/*Webkit*/
-webkit-box-shadow: 8px 8px 12px #aaa;
}
Grâce à la propriétée inset, l'ombre peut être situé à l'intérieure de l'élément au lieu d'être à l'extérieure.
.mon_div{ 
box-shadow: inset 8px 8px 12px #555;
}
 

inset peut être placé au début ou à la fin de l'élément.
.mon_div{ 
box-shadow: 8px 8px 12px #555 inset;
}
Il est également possible d'augmenter le rayon d’étendue de l'ombre en intercalent un quatrième chiffre entre l'espace verticale et le flou.
.mon_div{ 
box-shadow: 8px 8px 30px 12px #555;
}
 


On peut également obtenir une couleur différente pour chaque côté de l'élément. Pour cela, il faut répéter le code de l'ombre séparée par une virgule en "jouant" avec les espaces et les couleurs :
.mon_div{ 
box-shadow: 0px -8px 2px green , 8px 0px 2px blue , 0px 8px 2px red , -8px 0px 2px yellow;
-moz-box-shadow: 0px -8px 2px green , 8px 0px 2px blue , 0px 8px 2px red , -8px 0px 2px yellow; 
-webkit-box-shadow: 0px -8px 2px green , 8px 0px 2px blue , 0px 8px 2px red , -8px 0px 2px yellow; 
}
.mon_div{
border:1px solid #DDD;
padding:5px;
width:500px;
height:auto;
background: #DDD;
box-shadow: 0px -8px 2px green , 8px 0px 2px blue , 0px 8px 2px red , -8px 0px 2px yellow;
-moz-box-shadow: 0px -8px 2px green , 8px 0px 2px blue , 0px 8px 2px red , -8px 0px 2px yellow;
-webkit-box-shadow: 0px -8px 2px green , 8px 0px 2px blue , 0px 8px 2px red , -8px 0px 2px yellow;
}

<div class="mon_div">***</div>

Il est à noter que la propriété box-shadow peut être utiiser sur pratiquement tout élément HTML.

On peut également utiliser la propriété shadow en le préfixant avec l'élément text- afin d'obtenir un effet d'ombrage sur du texte :
.mon_div{
text-shadow : 5px 5px 1px purple;
}

Voici un texte ombré.
Voir/déposer un commentaire (0) | Signaler un problème