Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
drop-shadow()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2016.
LafonctionCSSdrop-shadow() permet d'appliquer une ombre portée sur une image. Le résultat de cette fonction est une valeur<filter-function>.
Exemple interactif
filter: drop-shadow(30px 10px 4px #4444dd);filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));filter: drop-shadow(0 0 0.75rem crimson);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné avec une couleur donnée et fusionné sous l'image.
Note :Cette fonction s'apparente à la propriétébox-shadow. La propriétébox-shadow permet de créer une ombre rectangulaire sousla boîte entière d'un élément. En revanche, la fonctiondrop-shadow() permet de créer un ombre qui épouse la forme (le canal alpha) del'image même.
Syntaxe
/* Deux valeurs de longueur *//* drop-shadow( <length> <length> ) */drop-shadow(5px 5px)/* Trois valeurs de longueur *//* drop-shadow( <length> <length> <length> ) */drop-shadow(5px 5px 15px)/* Deux valeurs de longueur et une couleur *//* drop-shadow( <length> <length> <color> ) */drop-shadow(5px 5px red)/* Trois valeurs de longueur et une couleur *//* drop-shadow( <length> <length> <length> <color> ) */drop-shadow(5px 5px 15px red)/* L'ordre des valeurs couleur et longueur peut être inversé *//* drop-shadow( <color> <length> <length> <length> ) */drop-shadow(#ee2233 0.5rem 0.5rem 1rem)/* Empiler plusieurs ombres en passant plusieurs drop-shadow en tant que filtre */drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)La fonctiondrop-shadow() accepte un paramètre de type<shadow> (tel que défini dans la documentation debox-shadow), mais pour lequel le mot-cléinset et le paramètrespread ne sont pas acceptés.
Paramètres
<color>FacultatifDéfinit la couleur de l'ombre. Si elle n'est pas précisée, la valeur de la propriété
colordéfinie sur l'élément parent est utilisée.<length>Définit la longueur de décalage de l'ombre. Ce paramètre accepte deux ou trois valeurs. Si deux valeurs sont précisées, elles correspondent à
<offset-x>(décalage horizontal) et<offset-y>(décalage vertical). Une valeur négative pour<offset-x>place l'ombre à gauche de l'élément. Une valeur négative pour<offset-y>place l'ombre au-dessus de l'élément. Si une valeur n'est pas précisée,0est utilisé par défaut. Si une troisième valeur est précisée, elle correspond à<standard-deviation>, c'est-à-dire l'écart type utilisé pour la fonction deflou gaussien. Plus la valeur de<standard-deviation>est grande, plus l'ombre sera grande et floue. Les valeurs négatives pour<standard-deviation>ne sont pas autorisées.
Syntaxe formelle
<drop-shadow()> =
drop-shadow([<color>?&&<length>{2,3}])
Exemples
Définir une ombre portée
<div>drop-shadow(16px 16px)</div><div>drop-shadow(16px 16px red)</div><div>drop-shadow(red 1rem 1rem 10px)</div><div>drop-shadow(-16px -16px red)</div><div> drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red) drop-shadow(-1px -1px red)</div>div { display: inline-block; margin: 0 0.5rem 2rem 1rem; padding: 0.5rem; height: 100px; width: 190px; vertical-align: top; background-color: #222222; color: lime;}div:nth-child(1) { filter: drop-shadow(16px 16px);}div:nth-child(2) { filter: drop-shadow(16px 16px red);}div:nth-child(3) { filter: drop-shadow(red 1rem 1rem 10px);}div:nth-child(4) { filter: drop-shadow(-16px -16px red);}div:nth-child(5) { filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);}En l'absence de valeur<color> dans la fonctiondrop-shadow() du premier bloc, l'ombre utilise la valeur de la propriétécolor de l'élément (lime). Les deuxième et troisième ombres illustrent que l'ordre des valeurs de longueur et de couleur peut être inversé. La troisième ombre montre l'effet de flou lorsqu'une troisième valeur<length> est précisée. La quatrième ombre utilise des décalages négatifs, ce qui déplace l'ombre vers la gauche et le haut. Le cinquième exemple montre comment appliquer plusieurs ombres portées à un même élément.
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Compatibilité des navigateurs
Voir aussi
- Les fonctions
<filter-function>: - La propriété
filter - La propriété
backdrop-filter - La propriété
box-shadow - La propriété
text-shadow - Introduction aux ombres portées sur le texte
- Le module deseffets de filtre CSS