Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos CSS Vanessa S.

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

Efeito Sombreado: Propriedade box-shadow

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:

Efeito Sombreado: Propriedade box-shadow (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.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

10 Comentários

  1. Herbertt disse:

    como colocar a sombra so em cima e em baixo,e nas laterais não.tem como?

  2. izaias disse:

    MUITO BOM OBRIGADO

  3. Betosam disse:

    ola, como faço para tirar a borda branca que fica nas imagens?

  4. .:: Clau ::. disse:

    Cerejeiras em Flor
    Por favor releia com atenção o tutorial, pois nele já consta a informação que vc quer.

  5. Cerejeiras em Flor disse:

    Como colocar em volta de todo do outer – wrapper?
    Muito Obrigado

  6. Klênio disse:

    Muito bom.
    É possível aplicar a sombra para o lado de dentro da div?

  7. Silas Yudi disse:

    Er… os exemplos do seu post não estão aparecendo no meu navegador (Google Chrome)…
    Mas o tutorial está perfeito!

    Flw…

  8. .:: Clau ::. disse:

    @Thiago:
    Tb adoro CSS3! Só faltava o IEca aceita-lo pra ficar tudo perfect.=)

    @AnneKira™:
    Eu já havia prometido ensinar os recursos que uso aqui no GD, esse é um deles.
    Que bom que gostou do novo layout, eu tb adorei, ficou mais feminino né?

    Obrigada pelos comentários.

  9. AnneKira™ disse:

    Ótimo post! CSS3 é muito bonito e bem mais leve!
    Alias, tenho que elogiar o seu novo layout, muito bonito mesmo!
    ;-**

  10. Thiago disse:

    CSS3 Vai Dominar o Mundo \õ/

    Amo CSS<3
    Deixa a pagina muito mais leve e bonita =]

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.