Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction drop-shadow()

drop-shadow() est une fonction du langage CSS. Utilisée avec la propriété filter, elle ajoute une ombre autour d'un élément sur une page web, ou autour d'une image.

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.

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

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.


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


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

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.

filter:
( x y f a couleur )

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.

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.