Box-shadow - Propriété CSS
Résumé des caractéristiques de la propriété box-shadow
none | insetnonebox-shadow passe progressivement d'une valeur à une autre.. Sauf pour la valeur inset qui est animée sans transition.Schéma syntaxique de box-shadow.
box-shadowLes liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
colorest la couleur de l'ombrage, dans une des syntaxes reconnues par CSS. Voir les couleurs CSS.xetysont deux valeurs numériques suivies d'une unité de dimension.blurest une valeur numérique suivie d'une unité de dimension, caractérisant le flou de l'ombrage.spreadest également une valeur numérique avec une unité de dimension. Il n'est pas possible de spécifierspreadsans avoir indiqué une valeur pourblur.- Plusieurs syntaxes de ce types peuvent être répétées, en les séparant par des virgules, pour définir plusieurs ombres.
Description de la propriété box-shadow.
box-shadow ajoute un effet d'ombrage sur l'élément.
De nombreux paramètres permettent de définir cette ombre : dimensions, couleur, effet de flou, etc.
Si les angles de l'élément sont arrondis (voir border-radius), l'ombre aura également des angles
arrondis.
La présence d'une ombre sur un élément ne modifie pas la position des éléments suivants. L'ombre peut donc empiéter sur d'autres éléments mais tout en restant toujours derrière eux.
L'ombrage de box-shadow suit la forme globale de l'élément qui est rectangulaire. Vous pouvez également
consulter la page sur text-shadow pour ombrer le texte.
Syntaxes pour box-shadow.
- box-shadow: none;
Valeur par défaut. Aucune ombre n'est ajoutée.
- box-shadow: #808080 15px 15px 10px 5px inset coul x y f a
Syntaxe générale de
box-shadow: une série de valeurs séparées par des espaces.x:une valeur positive ou négative suivie d'une unité de dimension (voir les unités CSS de dimension). C'est le décalage horizontal de l'ombre.y:une valeur positive ou négative avec une unité de dimension. C'est le décalage vertical de l'ombre.f:une valeur positive avec une unité de dimension. Elle définit le rayon du flou. Une valeur égale à 0 ou omise indique une ombre nette.a:une valeur positive ou négative avec une unité de dimension. Les valeurs positives indiquent un agrandissement de l'ombre. Et bien sûr les valeurs négatives une réduction de la taille de l'ombre.
Siaest supérieur àxou ày, l'ombre peut apparaître tout autour de l'élément.
Lorsqu'elle est omise, cette valeur prend la valeur0.coul:une indication de couleur (voir les couleurs CSS) qui sera la couleur de l'ombre. La valeur par défaut est celle du texte (currentcolor).inset:lorsqu'elle est présente, cette valeur indique une ombre à l'intérieur de l'élément.A part
xety, toutes ces valeurs sont optionnelles, mais elles doivent être énumérées dans cet ordre. - box-shadow: blue 5px 5px 5px, green 10px 10px;
Plusieurs séries de valeurs séparées par des virgules. Chaque série de valeurs définit un ombrage. L'ensemble des ombrages est appliqué à l'élément.
Valeurs communes à toutes les propriétés :
box-shadow: initial (none)
box-shadow: inherit
box-shadow: revert
box-shadow: revertLayer
box-shadow: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Exemples.
Ombre dure : pas de flou, avec un décalage de 10 pixels dans les deux sens (horizontalement et verticalement).
Ombre douce : avec un flou sur 15 pixels.
D'autre part, les angles arrondis de l'élément sont repris à l'identique sur l'ombrage.
Ombre intérieure, donnant l'impression que l'élément est en creux.
Ombre étendue de 15 pixels. Cette valeur étant supérieure au décalage (qui est de 5 pixels), l'ombre apparaît tout autour de l'élément.
Cette ombre ne comporte pas de décalage ; elle est seulement étendue. L'ombre apparaît tout autour de l'élément de façon symétrique.
Ombre inversée : les décalages x et y ont été fixés à -10 pixels.
Deux ombrages ont été appliqués à cet élément.
Animation de box-shadow.
La propriété box-shadow peut être animée sur une ou plusieurs de ses valeurs.
Les valeurs numériques passent progressivement d'une valeur à l'autre. Seul le changement de la valeur inset se fera brutalement, forçant les autres
valeurs à évoluer également de façon non progressive.
Voici des exemples d'animation de chacune des valeurs individuellement, mais on peut bien sûr faire évoluer plusieurs valeurs dans la même animation.
Animation sur le décalage (valeurs x et y).
Animation de la
quantité de flou.
Animation de l'agrandissement de l'ombre.
Animation de la
couleur de l'ombre.
Animation incluant la
valeur inset
Manipulation de la propriété box-shadow par Javascript ou JQuery.
Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler,
en l’occurrence le cercle bleu ci-dessous.
Modifier la valeur de box-shadow en Javascript.
En Javascript, voici comment modifier la valeur de box-shadow pour un élément el.
Javascript propose deux syntaxes : la première avec le nom de la propriété écrit en kebab-case, et la deuxième avec le nom de la propriété
écrit en camel-case.
function setBoxShadow(el) {
el.style['box-shadow']='none';
// ou
el.style.boxShadow='none';
}
Lire en Javascript la valeur de box-shadow.
Pour que ce code fonctionne, la propriété doit avoir été affectée directement à l'élément lui-même et non pas en passant par un sélecteur. La valeur est renvoyée telle qu'elle a été définie.
function getBoxShadow(el) {
alert(el.style['box-shadow']);
// ou
alert(el.style.boxShadow);
}
Lire la valeur calculée de box-shadow en Javascript.
La valeur calculée est, soit la valeur appliquée par un style, soit celle qui résulte du mécanisme d'héritage.
function getCalcBoxShadow(el) {
alert(window.getComputedStyle(el).getPropertyValue('box-shadow'));
}
Modifier la valeur de la propriété box-shadow avec JQuery.
JQuery reconnaît lui aussi le nom de la propriété écrit en kebab-case ou en camel-case.
function setBoxShadow(el) {
$(el).css('box-shadow','5px 5px 2px');
// ou
$(el).css('boxShadow','5px 5px 2px');
}
Lire la valeur calculée de la propriété box-shadow avec JQuery.
function getCalcBoxShadow(el) {
alert($(el).css('box-shadow'));
// ou
alert($(el).css('boxShadow'));
}
Prise en charge par les navigateurs (compatibilité).
box-shadow.
inset dans la syntaxe de box-shadow.
box-shadowinsetmultiples
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété box-shadow.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Première présentation de la propriétébox-shadow.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi : bordures et arrière-plans.
Le module de spécification CSS Backgrounds and Borders Module définit tout ce qui conerne les bordures et les arrière-plans. Vous y trouverez notamment la description des propriétés suivantes :