Criar efeito Sombreado com CSS3

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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 é 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 é 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:

Código para aplicar o efeito diretamente no post:

<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>

Código para aplicar o efeito em algum seletor(elemento) no template:

-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);

Esta propriedade também aceita aplicação de múltiplas sombras, ou seja, 2 cores de sombras diferentes.

Veja o exemplo do efeito Sombra múltipla:

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);
}

Código para aplicar o efeito diretamente no post:

<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 Mundo Blogger, 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ção Blockquote, ou em partes na Área de comentários, ou até mesmo na sidebar.
Agora é só usar sua criatividade, e aplicar este efeito onde você preferir.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn