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.

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
.
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 :
x
ety
: 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.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. Sif
n'est pas précisée, la valeur par défaut est 0.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 estcurrentcolor
.
- 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.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ètrea
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 agrandieOmbre agrandie d'une valeur supérieure au décalageOmbre agrandie sans décalage (x = y = 0
)
Simulateur.
filter:
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.