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 septembre 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
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 id="default-example">
<img
class="transition-all"
id="example-element"
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 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-xdecalage-y(required)-
Deux valeurs de longueur ( type
<length>) qui déterminent le décalage de l'ombre.decalage-xindique la distance horizontale, les valeurs négatives décalant l'ombre vers la gauche de l'élément.decalage-yindique 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écolorqui 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
Loading…
Voir aussi
<filter-function>et les autres fonctions associées- La propriété CSS
box-shadow