Criar efeito Sombreado com CSS3

"A propriedade "box-shadow" nos permite aplicar sombras em elementos utilizando somente CSS3. Você já conferiu como aplicar Efeito Sombra nos textos, agora vai aprender a aplicar o efeito sombra em outros elementos, como imagens e bordas."


" Este efeito é aceito em navegadores modernos, que aceitam os padrões de W3C, inclusive no IE(ca).
É claro que para cada navegador reconhecer esse efeito, será necessário a utilização de filtros correspondentes."

box-shadow /* atributo para o Opera */
-moz-box-shadow /* atributo para Firefox */
-webkit-box-shadow  /* atributo para Chrome e Safari */
-khtml-box-shadow  /* atributo para Konqueror */

"Para o Internet Explorer existe um filtro para Internet Explorer 8 e um filtro para Internet Explorer em geral que faz algo semelhante."

Exemplos:

filter: progid:DXImageTransform.Microsoft.DropShadow /* atributo para o IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow /* atributo para o IE8 */

"A propriedade "box-shadow" possui alguns parâmetros e requer vários valores para especificar as características da sombra, como efeito esfumaçado, separação da sombra e a própria cor.

A sintaxe seria como esta, no exemplo abaixo:

box-shadow: 5px 4px 10px #ccc;

O primeiro valor (5px) é a posição horizontal da sombra em relação ao elemento.
Valor positivo projeta a sombra para a direita e negativo para a esquerda.

 
No exemplo acima, 5px, quer dizer que a sombra aparecerá 5 pixels à direita.

O segundo valor (4px) é a posição vertical da sombra em relação ao elemento. Valor positivo projeta a sombra para baixo e negativo, para cima.
 

No exemplo acima, 4px, quer dizer que a sombra aparecerá 4 pixels abaixo.                                                         

O terceiro valor é o blur(esfumaçado) da sombra, só aceita valores positivos ou 0 (zero). Se o esfumaçado for 0px(zero), quer dizer que a sombra não tem nenhum efeito esfumaçado e aparece totalmente definida. Se o valor "blur" for maior que zero, como em nosso exemplo, é de 10px, significa que a sombra terá um esfumaçado na largura de 10 pixels.

O quarto valor é a cor da sombra. No nosso exemplo, a sombra possui uma cor cinza.

"Agora que você entendeu o funcionamento do efeito sombreado "box-shadow", vejamos
como aplicar os atributos a cada elemento que você pretende incluir efeito sombra."
 

Para cada elemento que queira aplicar o efeito sombreado (box-shadow), basta incluir estes atributos (logo abaixo do nome do elemento), da seguinte forma:

Nome do Elemento {(Pode ser #main-wrapper, .sidebar,#sidebar-wrapper, .footer, #header, #outer-wrapper, #content-wrapper, etc)
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)"; /* IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4); /* IE7 and lower */
}

"Vejamos alguns exemplos para aplicação do efeito box-shadow e abaixo de cada exemplo o código referente."


Sombra Simples:

Efeito Sombreado: Propriedade box-shadow

<div style="font-size:1.2em; border:1px solid #ccc; padding:10px 5px;text-align:center;-moz-box-shadow:5px 4px 10px #ccc;-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;-khtml-box-shadow: 5px 4px 10px #ccc;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);">
TEXTO-AQUI
</div>

Esta propriedade também aceita aplicação de múltiplas sombras, ou seja, 2 cores de sombras diferentes. Para aplicar efeito de múltiplas sombras é só separar a declaração de cada sombra com vírgulas, dessa forma:

box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;

" Não devemos esquecer que para funcionar também no IE, devemos incluir o filtro semelhante:"

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";
filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
}

Veja o exemplo do efeito Sombra múltipla:

Efeito Sombreado: Propriedade box-shadow (sombra múltipla)

<div style="-moz-box-shadow:5px 5px 10px #333, -5px -5px 10px #ccc;-moz-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;font-size:1.2em; border:1px solid #ccc; padding:20px 5px;text-align:center;
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#333, offx=2, offy=2);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);">
Efeito Sombreado: Propriedade box-shadow (sombra múltipla)
</div>

"Digamos que você queira aplicar o efeito shadow-box nas imagens dos posts:
Basta incluir cada atributo da propriedade à 'classe' referente ás imagens do post, que é:..."

.post-body img{
<---estilos do efeito shadow-box--->
}

"Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada a um elemento qualquer, como por exemplo, em parte de um texto dentro do post, basta criar uma "div"
 

Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>

.sombreado {
height:auto;
width: auto;
padding: 10px;
margin: 10px auto;
text-align: center;
border: 1px solid #C0C0C0;
background-color:#fff;
-moz-box-shadow:5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";
filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
}

"Sempre que quiser mostrar o efeito sombreado em algum trecho de texto, deverá aplicar a "div":                     

<div class="sombreado">
<-- Texto Aqui -->
</div>

"Pronto, você já aprendeu a aplicar o mesmo efeito que eu uso aqui no Gothic Darkness, nas imagens dos posts, bem como, em alguns trechos de textos que quero destacar. "                                                                                      
"Você pode aplicar este efeito em vários elementos no seu template, como por exemplo:                                            
para diferenciar partes de textos em suas postagens destacados pela funçãoBlockquote, ou em partes na Área de comentários, ou até mesmo nasidebar.
Agora é só usar sua criatividade, e aplicar este efeito onde você preferir."