CSS - Fonction drop-shadow()

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.

Son rôle est donc assez comparable à celui de la propriété box-shadow. Néanmoins une différence importante apparait 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.

Image originale
Le pourtour et le "3" sont transparents

Avec la fonction drop-shadow()

Avec la propriété box-shadow

Dans tous les autres cas, et en particulier si c'est l'élément dans son ensemble qui a une forme non rectangulaire, la fonction drop-shadow() et la propriété box-shadow donnent le même résultat : une ombre qui suit le contour de l'élément. On peut facilement obtenir un élément non rectangulaire avec la propriété border-radius.

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

La fonction drop-shadow() peut être utilisée avec :

• backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
• filter : Filtre graphique.

Syntaxe de la fonction drop-shadow().

• filter: drop-shadow(15px 15px 5px silver); x y f coul

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

  1. x et y : deux valeurs numériques, positives ou négatives, avec leur unité de dimension. Voir les unités de dimensions en CSS.
     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 à gauche de l'élément.
  2. f : une valeur numérique positive ou nulle, avec une unité de dimension. f définit la valeur du flou, 0 indiquant une ombre parfaitement nette. Si f n'est pas précisée, la valeur par défaut est 0.
  3. coul et la couleur de l'ombre, exprimée dans une des syntaxes reconnues par CSS. Voir les couleurs CSS. La valeur par défaut est currentcolor.
• filter: drop-shadow(5px 5px 5px 3px silver); ⚠ x y f a coul

  Cette deuxième syntaxe fait apparaître un paramètre supplémentaire : l'agrandissement de l'ombre.
  ⚠ Attention aux problèmes de compatibilité avec cette valeur : si le navigateur ne traite pas l'agrandissement, c'est toute l'expression qui est refusée, et donc l'ombre ne s'affichera pas.

  1. a : une valeur numérique positive ou négative, avec une unité de dimension. Elle caractérise l'agrandissement de l'ombre. Par défaut l'ombre a la même taille que l'élément, elle est simplement décalée par rapport à ce denier. Le paramètre a permet d'agrandir ou de rétrécir l'ombre.
     Si l'ombre est agrandie d'une valeur supérieure au décalage, l'ombre peut être visible tout autour de l'élément.
  Ombre de la même taille que l'élément

  
  Ombre agrandie

  Ombre agrandie d'une valeur supérieure au décalage

  Ombre agrandie sans décalage (x = y = 0)

Simulateur.

Voir aussi...

Formes géométriques - Propriétés.

• clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
• shape-outside : Définit le contournement du texte pour un élément flottant.

Formes géométriques - Fonctions.

• circle() : Définit un cercle.
• ellipse() : Définit une ellipse.
• inset() : Définit un rectangle, utilisable pour découper une image.
• polygon() : Définit une forme.

Images et filtres - Propriétés.

• backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
• background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
• clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
• filter : Filtre graphique.
• image-rendering : Mode de mise à l'échelle des images.
• mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

• blur() : Applique un effet de flou à une image.
• brightness() : Ajuste la luminosité d'une image.
• contrast() : Ajuste le contraste d'une image.
• grayscale() : Convertit une image en nuances de gris (noir et blanc).
• hue-rotate() : Change les couleurs d'une image (rotation des teintes).
• image() : Désigne ou définit une image.
• inset() : Définit un rectangle, utilisable pour découper une image.
• invert() : Inverse les couleurs d'une image.
• opacity() : Détermine le degré de transparence d'un élément.
• saturate() : Définit la saturation des couleurs d'une image.
• sepia() : Applique un effet sépia à une image.