drop-shadow() CSS fonction

Définition de la CSS drop-shadow().

La fonction d'Ombre CSS drop-shadow() de la propriété de Filtre CSS filter permet de spécifier diverses informations qui composent l'effet d'ombre portée à appliquer sur un élément.

.ciblage-ombre{
  filter : drop-shadow(5px 10px 2px #ccc);
}

La fonction d'Ombre CSS drop-shadow(offset-x offset-y blur color) peut prendre comme paramètres d'ombre :

• offset-x : numérique suivi d'une valeur en px ou pt ou em,..., sauf "%". Il spécifie la distance horizontale de l'ombre portée Css, si elle est négative l'ombre portée Css est placée à gauche.
• offset-y : numérique suivi d'une unité, sauf "%". Il spécifie la distance verticale de l'ombre portée Css, si elle est négative l'ombre portée Css est placée au dessus.
• blur : numérique optionnel positif suivi d'une unité, sauf "%". Il correspond à la longueur du rayon d'étendue de l'ombre portée Css.
• color : optionnel, spécifie la couleur de l'ombre portée Css. couleur (rgb, hsl, nommée,...) ex:#9ACD32. Si omise la couleur sélectionnée de l'ombre portée Css est la valeur calculée de color de l'élément.

Exemple de code drop-shadow() CSS

Conditions d'application de la CSS drop-shadow().

La fonction d'Ombre CSS drop-shadow() est utilisée que sur des éléments graphiques.

Problème d'interprétation de drop-shadow() en Css.

La propriété de Filtre CSS filter n'est pas reconnue pour tous les navigateurs.
Safari, Chrome utilisent la propriété de Filtre CSS préfixée -webkit-filter.

Conditions d'animation de drop-shadow() en CSS3.

Mettez filter comme valeur de la propriété de Transition CSS transition-property.

La CSS drop-shadow() est une fonction de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.