HTML5 - Box Shadow

Este é um dos recursos mais esperados do novo padrão de CSS3 e isso em conjunto com HTML5 consegue atrair muitos looks, nos referimos ao Sombra da caixa que nos permite colocar sombras nas caixas em nosso documento HTML, gerando assim um efeito como se estivesse flutuando na página.
O elemento Box Shadow deve ser constituído da seguinte forma:
box-shadow: hoffset voffset desfoque espalhamento de cor inserida
Onde cada um de seus atributos desempenha uma função, vamos ver cada um deles em detalhes:

• Hoffset: É o deslocamento horizontal, que é um valor de comprimento. Um valor positivo desloca o Sombra da caixa à direita, por outro lado, um valor negativo desloca a sombra da caixa para a esquerda.

• Voffset: É o deslocamento vertical, que é um valor de comprimento. Um valor positivo desloca a sombra da caixa abaixo da caixa do item e um valor negativo desloca a sombra da caixa acima da caixa do item.

• Borrão: (Opcional) especifica o raio da definição da sombra, que é um valor de comprimento. Quanto mais alto o valor, mais desfocada fica a borda da caixa do item. Para o valor padrão de 0, a borda da sombra da caixa parece totalmente definida.

• Espalhar: (Opcional) Especifique o raio de difusão da sombra, é uma medida de comprimento. Um valor positivo faz com que a sombra se expanda em todas as direções da caixa do elemento recipiente, e um valor negativo faz com que a sombra do elemento recipiente se contraia.

• Cor: (Opcional) É a cor da sombra. Se for omitido, o navegador decidirá a cor.

• Inserir: (Opcional) Faz a sombra projetada dentro da caixa do elemento ao qual é aplicada.

Depois de conhecer os atributos, vamos passar rapidamente para um exemplo de código para colocar o que aprendemos em prática.

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Como podemos ver, podemos aplicar o Sombra da caixa No CSS dentro da tag de estilo, este código gera o seguinte resultado:

Outro aspecto interessante é que na mesma declaração de uma Box Shadow podemos especificar várias sombras, por exemplo, no código a seguir vamos incluir uma sombra adicional no inset, vejamos:

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Agora vamos ver como as duas sombras são exibidas em nosso elemento: