Caixas com Sombras em CSS3

Hoje vou mostrar como colocar uma caixa (div) com efeito de sombra, usando a propriedade Box-shadow! Exemplo:

Esse efeito é muito simples de usar, mas precisa de alguns atributos para os navegadores reconhecerem a função.

box-shadow (padrão)
-moz-box-shadow (navegadores Flock e Firefox)
-webkit-box-shadown (navegadores Chrome e Safari)

Sempre se lembre que as pessoas que visitam seu site muitas vezes, não utiliza o mesmo navegador que você. Por isso sempre coloque os 3 atributos para garantir o funcionamento do site sem se preocupar com o navegador que o visitante estará usando.

Exemplo:

.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}

Agora vamos entender o que significa os dados do código.


    1. O deslocamento horizontal da sombra, positivo significa que a sombra será à direita da caixa, um deslocamento negativo irá colocar a sombra do lado esquerdo da caixa.
    2. O deslocamento vertical da sombra, uma negativa significa que a caixa de sombra será acima da caixa, um positivo significa que a sombra estará abaixo da caixa.
    3. O raio de blur (opcional), se fixada em 0 a sombra será nítida, quanto maior o número, mais desfocada que vai ser.
    4. O raio de difusão (opcional), valores positivos aumentam o tamanho da sombra, os valores negativos diminui o tamanho. O padrão é 0 (a sombra é o mesmo tamanho da blur).
    5. A Cor da Sombra

Sombra Interna

.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

Veja como Ficou:

Sombra de um lado só

.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

Veja Como Ficou:

Preciso usar esse efeito no IE. E agora?

Todos os desenvolvedores web reconhecem que o IE é um problema. Mas usando "algumas" linhas de código esse problema pode desaparecer.

Exemplo:

HTML 

<div class="shadow1">
<div class="content">
Div Com Efeito de Sombra
</div>
</div>

CSS 

.shadow1 { margin: 40px;
background-color: rgb(68,68,68)
-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;
padding: 100px;
background-color: #DDD;
}

Como vocês podem perceber esse efeito é muito interessante para colocar no site/blog, pois dá uma impressão de layout futurista se souber usar as cores corretas.

Até o próximo tutorial!