drop-shadow()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
La fonction CSS drop-shadow()
permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur <filter-function>
.
Exemple interactif
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 sous la boîte entière d'un élément. En revanche, la fonction drop-shadow()
permet de créer un ombre qui épouse la forme (le canal alpha) de l'image même.
Syntaxe
drop-shadow(decalage-x decalage-y rayon-flou couleur)
La fonction drop-shadow()
accepte un paramètre de type <shadow>
(tel que défini dans la documentation de box-shadow
), mais pour lequel le mot-clé inset
et le paramètre spread
ne sont pas acceptés.
Paramètres
decalage-x
decalage-y
(required)-
Deux valeurs de longueur ( type
<length>
) qui déterminent le décalage de l'ombre.decalage-x
indique la distance horizontale, les valeurs négatives décalant l'ombre vers la gauche de l'élément.decalage-y
indique la distance verticale, les valeurs négatives décalant l'ombre vers le haut de l'élément. Si les deux valeurs sont0
, l'ombre est placée directement sous l'élément. rayon-flou
(optional)-
Le rayon de flou de l'ombre, indiqué comme une longueur (type
<length>
). Plus la valeur est grande, plus l'ombre sera grande et floue. Si cette valeur n'est pas fournie, elle prendra 0 comme valeur par défaut, ce qui créera une ombre au contour net. Les valeurs négatives ne sont pas autorisées. couleur
(optional)-
La couleur de l'ombre, indiquée sous la forme d'une valeur de type
<color>
. Si cette valeur n'est pas fournie, c'est la couleur indiquée par la propriétécolor
qui est utilisée.
Exemples
Définir une ombre portée avec des décalages et un rayon de flou exprimés en pixels
/* Une ombre noire avec un rayon de flou de 10px */
drop-shadow(16px 16px 10px black)
Définir une ombre portée avec des décalages et un rayon de flou en rem
/* Une ombre rougeâtre avec un rayon de flou de 1rem */
drop-shadow(.5rem .5rem 1rem #e23)
Spécifications
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
<filter-function>
et les autres fonctions associées- La propriété CSS
box-shadow