Eae pessoal, acho que muitos de vocês já devem ter visto um efeito que simula uma sombra com com uma envergadura, e é bem atraente..
Você pode ver esse efeito (porém feito com Photoshop) nessa skin IPB..
Vamos lá então!
Primeiro criamos nosso HTML
Então adicionamos um CSS apenas para dar uma cara melhor a ele
Até agora temos apenas um retângulo branco com um texto centralizado horizontalmente..
A mágica fica aqui:
Trabalhamos com a propriedade box-shadow e o transform do CSS3 para que nosso elemento fique 'rotacionado' dando a impressão de que a sombra está 'envergada' atrás do elemento e alguns elementos para posicionarmos nosso elemento..
Porém se notarem só temos a sombra de um lado da 'folha', isso acontece porque ambos os efeitos estão com um rotate negativo (-3), isso foi feito para economizar CSS, se nós fossemos fazer em cada lado um CSS, teriamos um uso desnecessário ali..
Então para adicionar em ambos os lados, usamos isso:
Simples e útil, espero que gostem!
Live preview: http://jsfiddle.net/Wagner/X2aPe/embedded/result/
Você pode ver esse efeito (porém feito com Photoshop) nessa skin IPB..
Vamos lá então!
Primeiro criamos nosso HTML
- Código:
<div class="box efeito">
<p>Sombra</p>
</div>
Então adicionamos um CSS apenas para dar uma cara melhor a ele
- Código:
.box p{
text-align:center;
position:relative;
top:80px;
font: 14px Verdana, sans-serif;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.efeito{
position: relative; /*position relative necessário para que os elementos filhos (child) do .box que tenham o atributo position absolute tomem o .efeito como relação e não body, agindo como um wrap.. */
}
Até agora temos apenas um retângulo branco com um texto centralizado horizontalmente..
A mágica fica aqui:
- Código:
.efeito:before, .efeito:after{
z-index: -1; /* z-index negativo para que o efeito fique por trás do nosso box */
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
Trabalhamos com a propriedade box-shadow e o transform do CSS3 para que nosso elemento fique 'rotacionado' dando a impressão de que a sombra está 'envergada' atrás do elemento e alguns elementos para posicionarmos nosso elemento..
Porém se notarem só temos a sombra de um lado da 'folha', isso acontece porque ambos os efeitos estão com um rotate negativo (-3), isso foi feito para economizar CSS, se nós fossemos fazer em cada lado um CSS, teriamos um uso desnecessário ali..
Então para adicionar em ambos os lados, usamos isso:
- Código:
.efeito:after{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Simples e útil, espero que gostem!
Live preview: http://jsfiddle.net/Wagner/X2aPe/embedded/result/