Déposez l'ombre pour l'image PNG dans CSS

Une ombre est utilisée pour définir la position par rapport à l'objet et à la taille. En développement Web, les utilisateurs peuvent ajouter plusieurs effets d'ombre autour du texte, de l'image, du conteneur, de la table et bien d'autres. Grâce aux effets de l'observation, le public peut reconnaître les caractéristiques géométriques d'un destinataire compliqué. Ces effets peuvent également éliminer l'ambiguïté des objets.

Ce message examinera comment laisser tomber une ombre pour une image PNG dans CSS.

Comment laisser tomber l'ombre pour l'image PNG dans CSS?

Pour laisser tomber l'ombre pour une image PNG dans CSS, le «filtre»La propriété CSS est utilisée. La propriété «filtre» détermine les effets visuels et graphiques comme le flou, l'ombre ou le changement de couleur vers un élément. Plus précisément, les filtres sont couramment utilisés pour ajuster le rendu d'un élément.

Dans le but de laisser tomber l'ombre pour une PNG, consultez les instructions fournies.

Étape 1: Faites un conteneur «div»

Tout d'abord, faites un conteneur div en utilisant le «" étiqueter. Insérez également un attribut de classe à l'intérieur de la balise d'ouverture div et spécifiez un nom particulier pour la classe.

Étape 2: Ajouter l'image

Ensuite, ajoutez une image à l'aide du «”Tag et ajoutez les attributs suivants à l'intérieur de la balise« IMG »:

• "SRC»L'attribut est utilisé pour insérer un fichier multimédia à l'intérieur de l'élément.
• "largeur»Détermine la taille de la largeur de l'élément.
• "hauteur”Est ​​utilisé pour régler la hauteur de l'élément défini:

On peut observer que l'image PNG a été ajoutée avec succès:

Étape 3: Déposez l'ombre pour l'image PNG

Accédez au conteneur «div» à l'aide du nom de classe et du sélecteur de classe attribués comme «.IMG-Container". Ensuite, appliquez les propriétés énoncées ci-dessous:

.IMG-Container
Filtre: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
marge: 60px;
rembourrage: 30px;
Border: Green en pointillé 3px;
hauteur: 200px;
Largeur: 300px;

Ici:

• Le CSS "filtre»La propriété est utilisée pour ajouter l'effet visuel et graphique sur l'élément. Pour ce faire, la valeur de cette propriété est définie comme «drop shadow ()”Pour ajouter l'ombre autour de l'élément défini.
• "secouer drop»La propriété attache une ou plusieurs ombres à un élément. Cette propriété est plus similaire à celle de «boîte ombre»Propriété CSS.
• "marge»Détermine l'espace vide autour du côté extérieur de l'élément de la limite définie.
• "rembourrage«Est utilisé pour insérer de l'espace autour de l'élément défini à l'intérieur de la limite.
• "frontière”Est ​​utilisé pour spécifier la limite autour de l'élément.
• Le "largeur" et "hauteur»Déterminez la taille du conteneur.

En conséquence, l'ombre sera ajoutée autour de l'image PNG:

Il s'agissait de laisser tomber des ombres pour les images PNG dans CSS.

Conclusion

Pour déposer l'ombre pour l'image PNG dans CSS, créez d'abord un conteneur div en utilisant la balise. Ensuite, ajoutez une image avec le "" étiqueter. Ensuite, accédez à l'élément de CSS et appliquez le «filtre»Propriété CSS utilisée pour spécifier l'effet visuel autour de l'élément. Pour ce faire, définissez la valeur de cette propriété comme «secouer drop"Pour ajouter une ombre autour de l'élément défini. Cette rédaction a démontré la méthode pour abandonner l'ombre pour une image PNG dans CSS.