Définition de la css box-shadow

Propriété css : box-shadow

Détails des versions feuilles de style css box-shadow
css3
Détails de compatiblilité de la feuilles de style css box-shadow pour les navigateurs
Mozilla + et Firefox +
Internet Explorer 9+
Chrome +
Internet Explorer 4+
Internet Explorer 7
Internet Explorer 8

Définition de box-shadow

La propriété de feuille de style css box-shadow permet d'ajouter une un effet d'ombre à un élément HTML.
Exemple de code :
.identifiant{
  box-shadow : 5px 10px 0.5em 0.5em red;
}

La feuille de style css box-shadow accepte comme valeur (dans l'ordre) :
- inset : valeur optionnelle (mot clé), si elle est spécifier l'ombre est à l'intérieur sinon l'ombre est à l'extérieur du de l'élément HTML.
- offset-x : valeur numérique obligatoire qui spécifie la distance horizontale de l'ombre, si elle est négative l'ombre est placée à gauche.
- offset-y : valeur numérique obligatoire qui spécifie la distance verticale de l'ombre, si elle est négative l'ombre est placée au dessus.
- blur-radius : valeur optionnelle numérique positive suivie de px ou % ou pt ou em, correspond à la largeur de l'estompage de l'ombre (flou). Pour la valeur 0 l'ombre est nette.
- spread-radius : valeur optionnelle numérique positive suivie de px ou % ou pt ou em, correspond à la longueur du rayon d'étendue(voir image).
- color :valeur optionnelle de type hexadécimal(#ffffff), nommée (green), rvba (rgba(255,0,0,0.5)). Si omise la couleur sélectionné dépendra du navigateur.
L'ombre prend l'arrondi de la propriété de feuille de style css border-radius si elle est spécifiée.

Exemple de code box-shadow

Application des box-shadow

La propriété de feuille de style css filter:shadow est applicable sur l'ensemble des balises HTML ou XHTML.
La propriété de feuille de style css box-shadow css n'a pas d'équivalant en HTML.

Problèmes des box-shadow

La propriété de feuille de style css box-shadow n'est pas reconnue par les anciens navigateurs, en règle général tous les navigateurs d'avant 2010.
La propriété de feuille de style css box-shadow est reconnue par Firefox 4.0+
La propriété de feuille de style css box-shadow est reconnue par Chrome 10.0+
La propriété de feuille de style css box-shadow est reconnue par Internet Explorer 9.0+

FAQ

Répond aux questions suivantes :

Comment faire une ombre sur un élément HTML?
Liste des questions les plus fréquemment posées en css.

Exemples et astuces css

Transparence des ombres

Vous pouvez spécifier une ombre transparente en utilisant une couleur au format rgba.
Avec alpha :
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);

Sans Alpha :
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);

Copie d'écran de ce vous devez voir :

Une ombre pour chaque coté

Vous pouvez spécifiez une ombre pour chaque coté.
Il vous suffit de répéter 4 fois les valeurs de box-shadow séparer par une virgule.
J'ai pas réussi à faire en sorte que les coins soit bien fusionnés.
Vous pouvez aussi changer les autres valeurs.
Exemple de code :
<div style="margin-left:20px;width:350px;height:80px;box-shadow:0 10px 5px 0 #000,10px 0 5px 0 blue, 0 -10px 5px 0 red ,-10px 0 5px 0 gold;">box-shadow:0 10px 5px 0 #000, 10px 0 5px 0 blue, 0 -10px 5px 0 red , -10px 0 5px 0 gold;</div>

box-shadow:0 10px 5px 0 #000,
10px 0 5px 0 blue,
0 -10px 5px 0 red ,
-10px 0 5px 0 gold;


Copie d'écran de ce vous devez voir :

Compatibilité antérieures

Pour les versions de Firefox >= 3.1 et <4.0 utilisez la propriété css -moz-box-shadow qui accepte les même paramètres.
Cependant, il semble qu'il y ai une petite différence de rendu de la valeur blurRadius :
blurRadius(-moz-box-shadow) égale à environ blurRadius(box-shadow) × 1.4
blurRadius(box-shadow) égale à environ blurRadius(-moz-box-shadow) × 0.7
Exemple de code :
.identifiant{
  -moz-box-shadow:0 10px 5px 0 #000;
}

Pour les versions de Chrome >= 1 et Safari >= 3.0 utilisez -webkit-box-shadow
Exemple de code :
.identifiant{
  -webkit-box-shadow:0 10px 5px 0 #000;
}

Pour les versions de Internet Explorer < 9.0 utilisez la propriété css filter DropShadow ou shadow.
Exemple de code :
.identifiant{
  -webkit-box-shadow:0 10px 5px 0 #000;
}

ce qui donnerai :
Exemple de code :
.identifiant{
  filter: progid:DXImageTransform.Microsoft.shadow ( color=#000,direction=45,strength=5 );
  -moz-box-shadow:0 10px 5px 0 #000;
  -webkit-box-shadow:0 10px 5px 0 #000;
  box-shadow:0 10px 5px 0 #000;
}

BUG INTERNAUTE

Explication

Vous trouverez ci-dessous divers bugs d'interprétation de la css box-shadow.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.

Reporter un bug

Voir les Bugs[0]


Reporter un bug ou problème d'interprétationavec la propriété box-shadow
La propriété de feuille de style css BORDER-RADIUS permet de d'arrondir les coins d'une bordure..identifiant{ BORDER-RADIUS : 5px; } La propriété de ...[Voir]shadow n'est pas une propriété de feuille de style css mais une valeur du de la css filter qui est une feuille de style Microsoft. La valeur SHADOW de...[Voir]La propriété de feuille de style css BOX-SHADOW permet d'ajouter une un effet d'ombre à un élément HTML. .identifiant{ BOX-SHADOW : 5px 10px 0.5em 0...[Voir]