Drop Shadow for PNG Image em CSS

Uma sombra é utilizada para definir a posição em relação ao objeto e tamanho. No desenvolvimento da Web, os usuários podem adicionar vários efeitos de sombra em torno do texto, imagem, recipiente, tabela e muito mais. Graças aos efeitos de sombreamento, o público pode reconhecer as características geométricas de um destinatário complicado. Esses efeitos também podem remover a ambiguidade dos objetos.

Esta postagem examinará como soltar uma sombra para uma imagem PNG no CSS.

Como soltar a sombra para a imagem PNG no CSS?

Para deixar a sombra para uma imagem PNG no CSS, o “filtro”A propriedade CSS é utilizada. A propriedade "Filtro" determina os efeitos visuais e gráficos como desfoque, sombra ou mudança de cor para um elemento. Mais especificamente, os filtros são comumente usados ​​para ajustar a renderização para um elemento.

Com o objetivo de soltar a sombra para um PNG, confira as instruções fornecidas.

Etapa 1: faça um recipiente "div"

Primeiro, faça um contêiner div usando o “" marcação. Além disso, insira um atributo de classe dentro da tag de abertura da div e especifique um nome específico para a classe.

Etapa 2: Adicione imagem

Em seguida, adicione uma imagem com a ajuda do “”Tag e adicione os seguintes atributos dentro da tag“ IMG ”:

• ““src”O atributo é utilizado para inserir um arquivo de mídia dentro do elemento.
• ““largura”Determina o tamanho da largura do elemento.
• ““altura”É usado para definir a altura do elemento definido:

Pode -se observar que a imagem PNG foi adicionada com sucesso:

Etapa 3: Drop Shadow for PNG Image

Acesse o contêiner "div" com a ajuda do nome da classe atribuído e seletor de classe como ".IMG-container”. Em seguida, aplique as propriedades abaixo do ponto:

.IMG-container
Filtro: Shadow Drop (5px 8px 9px RGB (42, 116, 126));
margem: 60px;
preenchimento: 30px;
Fronteira: 3px verde pontilhado;
Altura: 200px;
Largura: 300px;

Aqui:

• O CSS “filtro”A propriedade é usada para adicionar o efeito visual e gráfico no elemento. Para fazer isso, o valor desta propriedade é definido como “Drop-Shadow ()”Para adicionar a sombra ao redor do elemento definido.
• ““Drop-shadow”A propriedade anexa uma ou mais sombras a um elemento. Esta propriedade é mais semelhante ao “Sombra da caixaPropriedade CSS.
• ““margem”Determina o espaço em branco ao redor do lado externo do elemento do limite definido.
• ““preenchimento”É usado para inserir espaço ao redor do elemento definido dentro do limite.
• ““fronteira”É utilizado para especificar o limite ao redor do elemento.
• O "largura" e "altura”Determine o tamanho do contêiner.

Como resultado, a sombra será adicionada ao redor da imagem PNG:

Isso se tratava de soltar sombras para imagens de PNG no CSS.

Conclusão

Para soltar a sombra da imagem PNG no CSS, primeiro, crie um contêiner de div usando a tag. Em seguida, adicione uma imagem com o “" marcação. Em seguida, acesse o elemento no CSS e aplique o “filtro”Propriedade CSS usada para especificar o efeito visual em torno do elemento. Para fazer isso, defina o valor desta propriedade como “Drop-shadow”Para adicionar uma sombra ao redor do elemento definido. Este artigo demonstrou o método para soltar a sombra para uma imagem PNG no CSS.