Drop Shadow per l'immagine PNG in CSS

Un'ombra viene utilizzata per l'impostazione della posizione rispetto all'oggetto e alla dimensione. Nello sviluppo web, gli utenti possono aggiungere più effetti d'ombra attorno al testo, all'immagine, al contenitore, alla tabella e molti altri. Grazie agli effetti ombra, il pubblico può riconoscere le caratteristiche geometriche di un destinatario complicato. Questi effetti possono anche rimuovere l'ambiguità dagli oggetti.

Questo post esaminerà come far cadere un'ombra per un'immagine PNG in CSS.

Come abbandonare l'ombra per l'immagine PNG in CSS?

Per far cadere l'ombra per un'immagine PNG in CSS, il “filtro"La proprietà CSS viene utilizzata. La proprietà "Filtro" determina gli effetti visivi e grafici come sfocatura, ombra o colore a un elemento. Più specificamente, i filtri sono comunemente usati per regolare il rendering per un elemento.

Ai fini di far cadere l'ombra per un PNG, controlla le istruzioni fornite.

Passaggio 1: crea un contenitore "div"

Innanzitutto, crea un contenitore div usando il ""Tag. Inoltre, inserire un attributo di classe all'interno del tag di apertura DIV e specificare un nome particolare per la classe.

Passaggio 2: aggiungi l'immagine

Quindi, aggiungi un'immagine con l'aiuto di ""Tag e aggiungi i seguenti attributi all'interno del tag" IMG ":

• "src"L'attributo viene utilizzato per l'inserimento di un file multimediale all'interno dell'elemento.
• "larghezza"Determina la dimensione della larghezza dell'elemento.
• "altezza"Viene utilizzato per impostare l'altezza dell'elemento definito:

Si può osservare che l'immagine PNG è stata aggiunta correttamente:

Passaggio 3: Drop Shadow per l'immagine PNG

Accedi al contenitore "Div" con l'aiuto del nome della classe assegnato e del selettore di classe come ".img-container". Quindi, applica le proprietà di seguito:

.img-container
filtro: drop-shadow (5px 8px 9px rgb (42, 116, 126));
Margine: 60px;
imbottitura: 30px;
Border: 3px punteggiato di verde;
Altezza: 200px;
larghezza: 300px;

Qui:

• Il CSS "filtro"La proprietà viene utilizzata per aggiungere l'effetto visivo e grafico sull'elemento. Per fare ciò, il valore di questa proprietà è impostato come "drop-shadow ()"Per aggiungere l'ombra attorno all'elemento definito.
• "Drop-Shadow"La proprietà collega una o più ombre a un elemento. Questa proprietà è molto simile a "Box-Shadow"Proprietà CSS.
• "margine"Determina lo spazio vuoto attorno al lato esterno dell'elemento del confine definito.
• "imbottitura"Viene utilizzato per inserire spazio attorno all'elemento definito all'interno del confine.
• "confine"È utilizzato per specificare il limite attorno all'elemento.
• IL "larghezza" E "altezza"Determina la dimensione del contenitore.

Di conseguenza, l'ombra verrà aggiunta attorno all'immagine PNG:

Si trattava di far cadere le ombre per immagini PNG in CSS.

Conclusione

Per far cadere l'ombra per l'immagine PNG in CSS, in primo luogo, crea un contenitore Div usando il tag. Quindi, aggiungi un'immagine con ""Tag. Quindi, accedi all'elemento in CSS e applica il “filtro"Proprietà CSS utilizzata per specificare l'effetto visivo attorno all'elemento. Per fare ciò, imposta il valore di questa proprietà come "Drop-Shadow"Per aggiungere un'ombra attorno all'elemento definito. Questo articolo ha dimostrato il metodo per far cadere l'ombra per un'immagine PNG in CSS.