La propriété CSS3 box-shadow

La propriété box-shadow est une des propriétés introduites dans CSS3 pour permettre aux développeurs  d'ajouter des effets d'ombre aux éléments HTML.

Les propriétés CSS

Définition et utilisation de la propriété CSS3 box-shadow

La propriété box-shadow est utilisée pour appliquer une ou plusieurs ombres à un élément HTML.

La propriété CSS box-shadow est utilisée pour attacher une ou plusieurs ombres à un élément HTML. Vous pouvez créer des ombres portées sur n'importe quel élément HTML. Vous pouvez même leur donner un effet de « floue » (également connu sous le nom "flou gaussien"). Vous pouvez aussi spécifier de quelle couleur l'ombre devrait être et même préciser de combien qu'il est décalé de sa boîte (c'est-à-dire dans quelle mesure il devrait tomber à l'extérieur de l'élément HTML auquel vous appliquez l'ombre ).

La propriété box-shadow accepte une liste d’ombres séparée par des virgules, chacun spécifié par  2 à 4 valeurs, une couleur en option et un mot-clé facultatif inset.

Valeur par défaut : aucun
Héritée : no
Animer : Oui.
Version: CSS3
Syntaxe JavaScript : objet. style.boxShadow="10px 20px 30px #eee"

Appui de navigateur de la propriété box-shadow

Les nombres dans le tableau spécifient la version à partir de laquelle  le navigateur prend totalement en charge la propriété box-shadow.

Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné  avec ce préfixe.

Propriété  | Navigateur

Google Chrome

Internet Explorer

Firefox

Safari

Opera

box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

Syntaxe CSS de la propriété box-shadow

box-shadow: none|h-shadow v-shadow blur spread color|inset|initial|inherit;

Valeurs de propriété box-shadow

Valeur Description
none Valeur par défaut, aucune ombre n’est appliquée
h-shadow Obligatoire. La position de l’ombre horizontale Les valeurs négatives sont autorisées
v-shadow Obligatoire. La position de l’ombre verticale Les valeurs négatives sont autorisées
blur Optionnel. La distance du flou
spread Optionnel. La taille de l'ombre. Les valeurs négatives sont autorisées
color Optionnel. La couleur de l'ombre. La valeur par défaut est noir.
inset Optionnel. Modifie l'ombre d'une ombre extérieure (de départ) à une ombre interne
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite  cette propriété de son élément parent.

Remarque: Dans Safari (sur PC), le paramètre de couleur est nécessaire. Si vous ne spécifiez pas la couleur, l'ombre n’est pas affichée.


Exemple
Sélectionner le code

<!doctype html>
<html>
<head>
<style type="text/css">
div {
width:200px;
height:60px;
padding:10px;
border: 1px solid limegreen;
margin:30px;
}
.drop-shadow {
/* Safari et Chrome */
-webkit-box-shadow: 7px 7px 20px 0px  rgba(0,0,0,0.3), 40px 40px 10px -40px  rgba(0,0,0,0.6) inset;
/* Firefox */
-moz-box-shadow: 7px 7px 20px 0px  rgba(0,0,0,0.3), 40px 40px 10px -40px  rgba(0,0,0,0.6) inset;
/* Internet Explorer */
-ms-box-shadow: 7px 7px 20px 0px  rgba(0,0,0,0.3), 40px 40px 10px -40px  rgba(0,0,0,0.6) inset;
/* Opera */
-o-box-shadow: 7px 7px 20px 0px  rgba(0,0,0,0.3), 40px 40px 10px -40px  rgba(0,0,0,0.6) inset;
/* CSS3 */
box-shadow: 7px 7px 20px 0px  rgba(0,0,0,0.3), 40px 40px 10px -40px  rgba(0,0,0,0.6) inset;
}
</style>
</head>
<body>
<div class="drop-shadow">
Cet élément a une ombre exterieur et une ombre interieur
</div>
</body>
</html>

 

Par Gerywa 11 Janvier 2016
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction join, join

    Alias de implode

    fonction str_repeat,

    R p te une chaîne

    Balise basefont

    Non pris en charge HTML5. Obsolète en HTML 4.01. Spécifie une couleur par défaut, la taille et la police pour tout le texte dans un document