Diferença entre um box-shadow e drop-shadow CSS

O box-shadow e o drop-shadow são duas propriedades CSS que são frequentemente usadas para adicionar sombras a elementos em um site. Embora eles pareçam semelhantes, eles têm diferenças importantes em como funcionam e em que tipos de elementos são melhores para cada um. Neste artigo, vamos discutir as diferenças entre box-shadow e drop-shadow CSS e quando usar cada um.

Box-shadow CSS

A propriedade box-shadow CSS permite adicionar uma sombra a um elemento, incluindo texto, imagens e elementos de formulário. O box-shadow é aplicado a todo o elemento e é posicionado em torno do limite do elemento. A sintaxe para a propriedade box-shadow é a seguinte:

box-shadow: h-shadow v-shadow blur spread color inset;

Onde:

• h-shadow: o deslocamento horizontal da sombra em relação ao elemento;
• v-shadow: o deslocamento vertical da sombra em relação ao elemento;
• blur: o desfoque da sombra;
• spread: o tamanho da sombra;
• color: a cor da sombra;
• inset: uma palavra-chave opcional que especifica que a sombra é interna ao elemento.

Por exemplo, o código a seguir adiciona uma sombra escura ao redor de um elemento com um desfoque de 10 pixels e um tamanho de 5 pixels:

box-shadow: 0 0 10px 5px #333;

Drop-shadow CSS

A propriedade drop-shadow CSS é semelhante à box-shadow, mas é usada especificamente para sombras de elementos de imagem. A sombra gerada pela propriedade drop-shadow é aplicada apenas ao conteúdo da imagem e não ao limite do elemento. A sintaxe para a propriedade drop-shadow é a seguinte:

drop-shadow: h-shadow v-shadow blur color;

Onde:

• h-shadow: o deslocamento horizontal da sombra em relação ao elemento;
• v-shadow: o deslocamento vertical da sombra em relação ao elemento;
• blur: o desfoque da sombra;
• color: a cor da sombra.

Por exemplo, o código a seguir adiciona uma sombra escura ao conteúdo de uma imagem com um desfoque de 5 pixels:

drop-shadow(0 0 5px #333);

Quando usar cada um

O box-shadow é uma propriedade CSS geral que pode ser usada para adicionar sombras a qualquer elemento, incluindo imagens. No entanto, se você deseja aplicar uma sombra a uma imagem, a propriedade drop-shadow é a melhor opção. A sombra gerada pela propriedade drop-shadow é aplicada apenas ao conteúdo da imagem, o que significa que a sombra seguirá o contorno da imagem, em vez de criar um retângulo ao redor dela. Isso é particularmente útil para imagens com fundos transparentes ou recortadas em formatos irregulares.

Conclusão

Tanto o box-shadow quanto o drop-shadow são propriedades CSS úteis para adicionar sombras a elementos em um site. O box-shadow é geralmente usado para elementos não-imagem.

Stefany Repetcki - Dev Front End