Hoje aprenderemos a usar a propriedade Box-Shadow em botões, imagens, caixas de textos, etc. Como falei no artigo anterior, a propriedade Box-Shadow só coloca a sombra m imagens, elementos (como sidebar, área de postagens, etc), botões, entre outros. Para se utilizar a sombra em textos (como o texto de um botão, de um elemento, etc) teremos que utilizar a propriedade Text-Shadow. Vamos lá?
Entendendo o Box-Shadow
O Box-Shadow é bem parecido com o Text-Shadow, mas claro, tem suas diferenças. No Box-Shadow, teremos que utilizar mais a parte de direção (horizontal e vertical) e a distância da sombra na caixa, por exemplo. Veja o exemplo abaixo para ver como o Box-Shadow funciona.
box-shadow: 5px 4px 10px #ccc;
A parte destaca de vermelho, é referente a posição horizontal da sombra em relação ao elemento. Um valor positivo (exemplo: 1) projeta a sombra para a direita e um valor negativo (exemplo: -1) para a esquerda.
Já a parte destacada de azul, é a posição vertical da sombra em relação ao elemento. Um valor positivo (exemplo: 1) projeta a sombra para baixo, já um valor negativo (exemplo: -1), projeta a sombra para cima.
A parte destacado de laranja, é o valor do blur (o esfumaçado) da sombra. Ele só reconhece os valores positivos (como 1) ou 0 (zero). Caso o esfumaçado for 0px, quer dizer que a sombra não terá nenhum efeito esfumaçado e aparecerá totalmente definido. Já se o valor blur for maior que zero, como no exemplo, significa que a sombra terá um esfumaçado.
A parte destacada de rosa, é referente a cor da sombra. Que no caso acima, está na cor cinza.
Utilizando o Box-Shadow em elementos
O Box-Shadow não irá funcionar corretamente se você colocar somente aquele exemplo acima. Como falei no começo, é um pouco mais difícil colocar o Box-Shadow. Veja o exemplo abaixo.
.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
box-shadow: 5px 4px 10px #333;
-moz-box-shadow: 5px 4px 10px #333;
-webkit-box-shadow: 5px 4px 10px #333;
-khtml-box-shadow: 5px 4px 10px #333;
}
No exemplo acima, eu utilizei o Box-Shadow nas imagens das postagens. Se quiser ver como ficou, clique aqui.
Entendendo o código:
Para se utilizar o Box-Shadow em qualquer elemento (desde que não seja textos), deveremos utilizar o código abaixo:
box-shadow: 5px 4px 10px #333;
-moz-box-shadow: 5px 4px 10px #333;
-webkit-box-shadow: 5px 4px 10px #333;
-khtml-box-shadow: 5px 4px 10px #333;
Para um melhor funcionamento do código, devemos sempre utilizar os mesmo valores para cada seção e a mesma cor. Veja também que no código acima, temos o código do primeiro exemplo. Ele é como a "mãe" para todo o funcionamento, e o resto é o complemento para o funcionamento correto. Então, toda vez que você for colocar uma sombra em qualquer elemento, utilize o código acima. Para que a sombra nos boxes apareça no Internet Explorer (qualquer versão), você deverá utilizar o código abaixo. Como já disse, ele é como um filtro.
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";
filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
No código acima, as partes destacadas de vermelho é a cor da sombra. As partes destacadas de azul, são as direções (a primeira horizontal, a segunda vertical) e a laranja é o blur.
Utilizando o Box-Shadow diretamente nas postagens
Bom, veja alguns exemplo abaixo de caixas que você pode adicionar textos dentro dela. Para utilizar, basta ir ao editor de postagens e clicar na guia HTML, depois cole o código desejado.
Exemplo simples:
Este é um exemplo de texto dentro da caixa com sombra!
Código para utilizar dentro do 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);">
Seu texto aqui.</div>
Altere a parte destacada de vermelho, para o tamanho da fonte, pode ser em px. A parte destacada de azul é a borda. A laranja é a direção e cor da sombra. A rosa é o seu texto que aparecerá dentro da caixa.
Exemplo com sombra múltiplas:
Exemplo de texto em uma caixa com sombra!
Código para utilizar dentro do 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);">
Seu texto.</div>
Altere a parte destacada de vermelho, para o tamanho da fonte, pode ser em px. A parte destacada de azul é a borda. A laranja é a direção e cor da sombra. A rosa é o seu texto que aparecerá dentro da caixa.
Aplicando um código CSS no template para ser utilizado facilmente
Além de podermos adicionar um código que pode ser colocado diretamente na postagem, podemos criar um seletor para o Box-Shadow w adiciona-lo em forma de class. Veja como fazer isso.
1. Acesse a guia Modelo e clique o botão Editar HTML. Pressione Ctrl+F e pesquise pela tag abaixo.
]]></b:skin>
2. Depois de encontrada, cole o código abaixo acima dela, fazendo as modificações que achar necessário.
.caixa-sombra {
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);}
A parte destacada de vermelho é referente ao código para que a sombra apareça no Internet Explorer. Caso não queira, basta excluir a parte destacada. Você pode personalizar o código com qualquer CSS, desde que tenha os conhecimentos para dar certo.
Agora toda vez que quiser adicionar a caixa na postagem, basta colar a class abaixo:
<div class="caixa-sombra">Seu texto</div>
Substitua o nome Seu texto pelo texto que desejar.
Pronto, agora fica mais fácil de entender, de usar. Agora toda vez que for fazer uma explicação, você já sabe o que é, para que serve, etc. Você pode adicionar o código em sidebar, área de postagens, cabeçalho, menu, onde quiser! Abraços e boa sorte!
Postagens Relacionadas:
Postar um comentário