Usado para projetar sombras (geralmente chamadas de “sombras projetadas”, como no Photoshop) a partir de elementos. Aqui está um exemplo com o suporte de navegador mais profundo possível:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Isso é:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- O deslocamento horizontal (obrigatório) da sombra, positivo significa que a sombra ficará à direita da caixa, um deslocamento negativo colocará a sombra à esquerda da caixa.
- O deslocamento vertical (obrigatório) da sombra, um negativo significa que a sombra da caixa estará acima da caixa, um positivo significa que a sombra estará abaixo da caixa.
- O raio do desfoque (obrigatório), se definido como 0, a sombra será nítida. Quanto maior o número, mais desfocado será e quanto mais longe a sombra se estenderá. Por exemplo, uma sombra com 5px de deslocamento horizontal que também tem um raio de desfoque de 5px terá 10px de sombra total.
- O raio de propagação (opcional), os valores positivos aumentam o tamanho da sombra, os valores negativos diminuem o tamanho. O padrão é 0 (a sombra tem o mesmo tamanho do desfoque).
- Color (obrigatório) - aceita qualquer valor de cor, como hex, named, rgba ou hsla. Se o valor da cor for omitido, as sombras das caixas serão desenhadas na cor do primeiro plano (texto
color). Mas esteja ciente de que os navegadores WebKit mais antigos (anteriores ao Chrome 20 e Safari 6) ignoram a regra quando a cor é omitida.
Usar uma cor semitransparente como rgba(0, 0, 0, 0.4)é o mais comum, e um bom efeito, já que não cobre completamente / opacamente o que está por cima, mas permite que o que está por baixo apareça um pouco, como uma sombra real.
Exemplo
Sombra interior
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Exemplo
Sombra de caixa do Internet Explorer (8 e inferior)
Você precisa de um elemento extra, mas é possível usá-lo filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Apenas um lado
Usando um raio de propagação negativo, você pode obter uma sombra de caixa e empurrá-la apenas para fora de uma das bordas da caixa.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Fronteiras múltiplas e mais
Você pode separar a sombra da caixa por vírgula quantas vezes quiser. Por exemplo, isso mostra duas sombras com posições diferentes e cores diferentes no mesmo elemento:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;O exemplo mostra como você pode usar isso para criar várias bordas:
Veja o coolness da caneta Multiple box-shadow! por Chris Coyier (@chriscoyier) no CodePen.
Ao aplicar as sombras aos pseudo-elementos que você então manipula, você pode obter algumas sombras de caixa de aparência 3D muito sofisticadas:
Veja os efeitos de sombras da caixa CSS3 da caneta de Halil İbrahim Nuroğlu (@haibnu) no CodePen.
Sombras super suaves por meio de vários valores separados por vírgula:
Veja o Pen
smooth box-shadow de Chris Coyier (@chriscoyier)
no CodePen.
Suporte para navegador
Veja o snippet no topo da página para detalhes sobre a cobertura do prefixo do fornecedor. Esta é uma daquelas propriedades onde descartar os prefixos é bastante razoável neste ponto.