drop-shadow()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2016.
La fonction CSS drop-shadow() permet d'appliquer une ombre portée sur une image. Le résultat de 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
/* Deux valeurs de longueur */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)
/* Trois valeurs de longueur */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)
/* Deux valeurs de longueur et une couleur */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)
/* Trois valeurs de longueur et une couleur */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)
/* L'ordre des valeurs couleur et longueur peut être inversé */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#ee2233 0.5rem 0.5rem 1rem)
/* Empiler plusieurs ombres en passant plusieurs drop-shadow en tant que
filtre */
drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)
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
<color>Facultatif-
Définit la couleur de l'ombre. Si elle n'est pas précisée, la valeur de la propriété
colordéfinie sur l'élément parent est utilisée. <length>-
Définit la longueur de décalage de l'ombre. Ce paramètre accepte deux ou trois valeurs. Si deux valeurs sont précisées, elles correspondent à
<offset-x>(décalage horizontal) et<offset-y>(décalage vertical). Une valeur négative pour<offset-x>place l'ombre à gauche de l'élément. Une valeur négative pour<offset-y>place l'ombre au-dessus de l'élément. Si une valeur n'est pas précisée,0est utilisé par défaut. Si une troisième valeur est précisée, elle correspond à<standard-deviation>, c'est-à-dire l'écart type utilisé pour la fonction de flou gaussien. Plus la valeur de<standard-deviation>est grande, plus l'ombre sera grande et floue. Les valeurs négatives pour<standard-deviation>ne sont pas autorisées.
Syntaxe formelle
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
Exemples
Définir une ombre portée
<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
<div>
drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)
drop-shadow(-1px -1px red)
</div>
div {
display: inline-block;
margin: 0 0.5rem 2rem 1rem;
padding: 0.5rem;
height: 100px;
width: 190px;
vertical-align: top;
background-color: #222222;
color: lime;
}
div:nth-child(1) {
filter: drop-shadow(16px 16px);
}
div:nth-child(2) {
filter: drop-shadow(16px 16px red);
}
div:nth-child(3) {
filter: drop-shadow(red 1rem 1rem 10px);
}
div:nth-child(4) {
filter: drop-shadow(-16px -16px red);
}
div:nth-child(5) {
filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red)
drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);
}
En l'absence de valeur <color> dans la fonction drop-shadow() du premier bloc, l'ombre utilise la valeur de la propriété color de l'élément (lime). Les deuxième et troisième ombres illustrent que l'ordre des valeurs de longueur et de couleur peut être inversé. La troisième ombre montre l'effet de flou lorsqu'une troisième valeur <length> est précisée. La quatrième ombre utilise des décalages négatifs, ce qui déplace l'ombre vers la gauche et le haut. Le cinquième exemple montre comment appliquer plusieurs ombres portées à un même élément.
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Compatibilité des navigateurs
Chargement…
Voir aussi
- Les fonctions
<filter-function>: - La propriété
filter - La propriété
backdrop-filter - La propriété
box-shadow - La propriété
text-shadow - Introduction aux ombres portées sur le texte
- Le module des effets de filtre CSS