Effet visuel pile de feuilles tout en CSS3 en utilisant subtilement la propriété box-shadow
Code HTML :
<div id="art201"> <div class="feuilles"> </div> </div>
Code CSS :
#art201{
background : #7c8d07;
width:100%;height:80px;
}
.feuilles{
margin:auto;
width:40px;
height:55px;
border:#ccc solid 1px;
background-color:#fff;
box-shadow: 4px 4px 0 #fff,
5px 5px 0 #ccc,
9px 9px 0 #fff,
10px 10px 0 #ccc,
14px 14px 0 #fff;
-moz-box-shadow: 4px 4px 0 #fff,
5px 5px 0 #ccc,
9px 9px 0 #fff,
10px 10px 0 #ccc,
14px 14px 0 #fff;
-webkit-box-shadow: 4px 4px 0 #fff,
5px 5px 0 #ccc,
9px 9px 0 #fff,
10px 10px 0 #ccc,
14px 14px 0 #fff;
}
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!