Drop-shadow() - Fonction CSS

drop-shadow()

Résumé des caractéristiques de la fonction drop-shadow()

Description rapide
Définit l'ombre d'un élément : dimensions, flou, couleur, etc. C'est un filtre graphique qui s'utiilise avec la propriété filter.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Type d'animation
Computed value : lors d'une animation, la propriété drop-shadow() passe progressivement d'une valeur à une autre.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de drop-shadow().

drop-shadow() - Syntax DiagramSyntax diagram of the drop-shadow() CSS function. color color length-x length-y length-x length-y length-b length-bdrop-shadow()drop-shadow()
Schéma syntaxique de la fonction drop-shadow()
Syntaxe détaillée

Description des termes utilisés sur le schéma :

  • color est la couleur de l'ombre (valeur optionnelle).
  • length-x et length-y correspondent au décalage de l'ombre. Ces deux valeurs sont obligatoires. Ces sont deux valeurs numériques suivies d'une des unités de dimension.
  • length-b est la distance sur laquelle l'ombre s'estompe avant de disparaître (valeur optionnelle). Valeur numérique suivie d'une unité de dimension.

Description de la fonction drop-shadow().

La fonction drop-shadow() définit l'ombre portée d'un élément : ses dimensions, sa couleur et le flou éventuel.
L'ombre portée donne un effet de relief : l'élément semble décollé du fond de la page.

Son rôle est donc assez comparable à celui de la propriété box-shadow. Néanmoins une différence importante apparaît dans le cas où cette fonction ou cette propriété sont appliquées à une image comportant des parties transparentes. La fonction drop-shadow() dessine l'ombre en suivant les parties non transparentes de l'image, tandis que la propriété box-shadow dessine l'ombre en suivant la forme du bloc.

Exemple avec la fonction drop-shadow()

Image originale
Le pourtour et le "3" sont transparents
Exemple avec la fonction drop-shadow()

Avec la fonction drop-shadow()

Exemple avec la fonction drop-shadow()

Avec la propriété box-shadow

Pour être complet, voici maintenant une comparaison entre la fonction drop-shadow() et la propriété text-shadow, toutes deux appliquées sur un élément contenant du texte.


Ombre réalisée avec la fonction drop-shadow()


Ombre réalisée avec la propriété text-shadow

Vous pouvez aussi vous reportez à la page sur box-shadow et à la propriété text-shadow pour ombrer le texte lui-même.

La valeur drop-shadow() peut être utilisée avec les propriétés suivantes :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
  • filter : Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Syntaxes de la fonction drop-shadow().

  • filter: drop-shadow(silver 15px 15px 5px); c x y b

    Cette syntaxe est reconnue par tous les navigateurs. La fonction attend de 2 à 4 paramètres, dans l'ordre suivant :

    • c et la couleur de l'ombre, exprimée dans une des syntaxes reconnues par CSS. Voir Les couleurs. La valeur par défaut est currentcolor.
    • x et y : deux valeurs numériques, positives ou négatives, avec leur unité de dimension. Voir les unités de dimension.
      Ces deux valeurs représentent le décalage horizontal et vertical de l'ombre. Si les valeurs sont négatives, l'ombre s'affiche au dessus, et/ou à gauche de l'élément.
      Les pourcentages ne sont pas acceptés ici.
    • b : une valeur numérique positive ou nulle, avec une unité de dimension. b définit la valeur du flou, 0 indiquant une ombre parfaitement nette. Si b n'est pas précisée, la valeur par défaut est 0.
      Cette valeur est différente de celle utilisée par box-shadow.

Simulateur avec la fonction drop-shadow().

filter :
Triangle de Penrose
 
Effet de drop-shadow()

Support de la fonction drop-shadow().

Le tableau ci-dessous illustre la compatibilité des navigateurs avec les filtres et effets graphiques, et plus précisément avec la fonction drop-shadow(). On voit que cette compatibilité est maintenant très bonne.

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support de la fonction drop-shadow() pour appliquer une ombre, avec le propriété filter.
1
Filtres
graphiques
2
Fonction
drop-shadow()
Estimation de la prise en charge globale.
96%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction drop-shadow().

  • Module effets et filtres - Niveau 1

    Concernant drop-shadow(). Le module Filter effects décrit les différents effets graphiques, dont la fonction drop-shadow().
    WD
    25 Octobre 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi : autres effets et filtres graphiques.

Les effets graphiques disponibles en CSS sont de plus en plus nombreux. Ils sont décrits dans la spécification du W3C "module filtres et effets" (module filtres et effets).

Propriétés :

backdrop-filter
Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
color-interpolation
Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.
color-interpolation-filters
Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB
filter
Applique un filtre graphique (flou, contraste, luminosité...) à un élément.
flood-color
Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
flood-opacity
Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
brightness()
Ajuste la luminosité d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
contrast()
Ajuste le contraste d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
Drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur, etc. C'est un filtre graphique qui s'utiilise avec la propriété filter.
grayscale()
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
hue-rotate()
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
invert()
Inverse les couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec le propriété filter.
opacity()
Détermine le degré de transparence d'un élément. C'est un filtre graphique qui s'utilise avec la propriété filter.
saturate()
Définit la saturation des couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
sepia()
Applique un effet sépia à une image ou un élément quelconque. C'est un (filtre graphique qui s'utilise avec la propriété filter.