Sombra de caída para la imagen PNG en CSS

Se utiliza una sombra para establecer la posición en relación con el objeto y el tamaño. En el desarrollo web, los usuarios pueden agregar múltiples efectos de sombra en torno al texto, la imagen, el contenedor, la mesa y muchos más. Gracias a los efectos de sombreado, el público puede reconocer las características geométricas de un destinatario complicado. Estos efectos también pueden eliminar la ambigüedad de los objetos.

Esta publicación examinará cómo dejar caer una sombra para una imagen PNG en CSS.

Cómo dejar la sombra para la imagen PNG en CSS?

Para dejar caer la sombra para una imagen PNG en CSS, el "filtrarSe utiliza la propiedad CSS. La propiedad "Filtro" determina los efectos visuales y gráficos como el desenfoque, la sombra o el cambio de color a un elemento. Más específicamente, los filtros se usan comúnmente para ajustar la representación de un elemento.

Con el fin de dejar caer la sombra para un PNG, consulte las instrucciones proporcionadas.

Paso 1: Haga un contenedor "Div"

Primero, haga un contenedor Div usando el "" etiqueta. Además, inserte un atributo de clase dentro de la etiqueta de apertura de div y especifique un nombre particular para la clase.

Paso 2: Agregar imagen

A continuación, agregue una imagen con la ayuda del ""Etiqueta y agregue los siguientes atributos dentro de la etiqueta" IMG ":

• "SRCSe utiliza el atributo para insertar un archivo multimedia dentro del elemento.
• "ancho"Determina el tamaño del ancho del elemento.
• "altura"Se usa para configurar la altura del elemento definido:

Se puede observar que la imagen PNG se ha agregado con éxito:

Paso 3: Sombra de caída para la imagen PNG

Acceda al contenedor "div" con la ayuda del nombre de clase y el selector de clase asignado como ".IMG-Container". Luego, aplique las propiedades establecidas:

.img-continer
Filtro: Shadow (5px 8px 9px RGB (42, 116, 126));
margen: 60px;
relleno: 30px;
borde: 3px verde punteado;
Altura: 200px;
Ancho: 300px;

Aquí:

• El CSS "filtrarLa propiedad se utiliza para agregar el efecto visual y gráfico en el elemento. Para hacerlo, el valor de esta propiedad se establece como "shadow ()"Para agregar la sombra alrededor del elemento definido.
• "sombra de caída"La propiedad adjunta una o más sombras a un elemento. Esta propiedad es más similar a la "sombra de la caja"Propiedad CSS.
• "margen"Determina el espacio en blanco alrededor del lado exterior del elemento del límite definido.
• "relleno"Se usa para insertar espacio alrededor del elemento definido dentro del límite.
• "borde"Se utiliza para especificar el límite alrededor del elemento.
• El "ancho" y "altura"Determine el tamaño del contenedor.

Como resultado, la sombra se agregará alrededor de la imagen PNG:

Eso se trataba de soltar sombras para imágenes PNG en CSS.

Conclusión

Para dejar caer la sombra para la imagen PNG en CSS, primero, cree un contenedor DIV usando la etiqueta. A continuación, agregue una imagen con el "" etiqueta. Luego, acceda al elemento en CSS y aplique el "filtrar"Propiedad CSS utilizada para especificar el efecto visual alrededor del elemento. Para hacerlo, establezca el valor de esta propiedad como "sombra de caída"Para agregar una sombra alrededor del elemento definido. Este artículo ha demostrado el método para dejar caer la sombra para una imagen PNG en CSS.