Ótima maneira de usar a sombra da caixa

Uma maneira muito fácil de usar o box-shadow de uma maneira agradável

-HTML-


<div class="header">
<h2> Nice way to use box-shadow V2</h2>
</div>

-CSS-


.header{
width
:70%;
height
:140px; /*If you want to increase the height just increase tje top for :before : after the same value : example height:240; top:217 so the added value = 200 for btoh.*/
background
:#4cbb47;
margin
:2% auto;
position
:relative;
border
-radius:4px;
}
.header:before,.header:after{
content
:"";
width
:300px;
height
:10px;
background
:#000;
position
:absolute;
top
:117px;/*Here to add the added value; ex:217*/
z
-index:-1;
box
-shadow: 0 14px 10px #777;
}
.header:before{
left
:2px;
transform
: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
}
.header:after{
right
:0;
transform
: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
}
h2
{
text
-align:center;
position
:relative;
top
:50px;
color
:#2184a0;
font
-weight:bold;
font
-size:25px;
}

/*Just a small piece of tip to change the selection background-color*/
::selection {
background
:#d84e4b;
}

Esperamos que isso lhe dê uma maneira de pensar mais sobre algumas outras técnicas

Verifique aqui