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. (1)
(1) Sauf pour la valeur inset qui est animée sans transition (discrete). Cette valeur, lorsqu'elle est changée
par l'animation, force toutes les autres valeurs à se comporter comme discrete.
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.xetysont deux valeurs numériques suivies d'une des unités de dimension. c'est le décalage de l'ombre.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.
Valeurs pour box-shadow.
- box-shadow: none;
Valeur par défaut. Aucune ombre n'est ajoutée.
- box-shadow: #808080 15px 15px 10px 5px inset col x y b a
Syntaxe générale de
box-shadow: une série de valeurs séparées par des espaces.xune valeur positive ou négative suivie d'une unité de dimension (voir les unités de dimension). C'est le décalage horizontal de l'ombre.yune valeur positive ou négative avec une unité de dimension. C'est le décalage vertical de l'ombre.b: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.colune indication de couleur (voir Les couleurs) qui sera la couleur de l'ombre. La valeur par défaut est celle du texte (currentColor).insetlorsqu'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.
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.
let el = document.getElementById('id');
el.style['box-shadow'] = 'red 5px 5px 2px';
// ou
let el = document.getElementById('id');
el.style.boxShadow = 'red 5px 5px 2px';
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.
let el = document.getElementById('id');
el.style['box-shadow'] = 'red 5px 5px 2px';
// ou
let el = document.getElementById('id');
el.style.boxShadow = 'red 5px 5px 2px';
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, soit encore la valeur initiale
(none dans le cas de box-shadow).
let el = document.getElementById('id');
let value = 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.
$('#id').css('box-shadow', 'red 5px 5px 2px');
// ou
$('#id').css('boxShadow', 'red 5px 5px 2px');
Lire la valeur calculée de la propriété box-shadow avec JQuery.
let value = $('#id').css('box-shadow');
Faites le test vous même.
En cliquant sur les boutons ci-après. Le premier affiche la valeur telle qu'elle a été affectée à l'élément, sauf s'il s'agit d'une valeur
incorrecte. Et le deuxième bouton affiche la valeur calculée. On notera en particulier que les couleurs sont converties en rgb(),
et que toutes les dimensions sont ramenées en pixels.
Prise en charge par les navigateurs (compatibilité).
box-shadow.inset dans la syntaxe de box-shadow.box-shadow.Remarques :
(1) inset doit être le dernier mot de la déclaration.
box-shadowinsetmultiples
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Firefox pour Androïd
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Samsung Internet
Safari
Safari sur IOS
KaiOS Browser
Opéra mini
Historique de la propriété box-shadow.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Concernantbox-shadow. 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 module CSS - Arrière-plans et bordures définit tout ce qui concerne les bordures et les arrière-plans. Vous y trouverez notamment la description des propriétés suivantes :