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
Top comments (0)