Horizontal curve shadow - cara membuat
Horizontal curve shadow, Horizontal curve shadow dengan CSS 3 memiliki
tampilan yang menarik dimana sistem bayangan dari objeknya kelihatan
lebih bagus. Tampilan Horizontal curve shadow dengan CSS 3 menambah
kesan suatu objek itu kelihatan memiliki tampilan 2D. Untuk melihat
bagaimana tampilan dari Horizontal curve shadow ini silahkan kunjungi
link demo dibawah, bila anda tertarik untuk memasang Horizontal curve
shadow pada blog kesayangan anda silahkan simak tutorial dibawah ini ,
langsung saja menuju TKP.
Code CSS here..
.shadow-style {position:relative;float:left;
width:300px; padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}.shadow-style:before,
.shadow-style:after {
content:"";
position:absolute;
z-index:-2;
}
.shadow-style p {
font-size:16px;
font-weight:bold;
}
.bdcurve:before {
top:10px;
bottom:10px;
left:0;
right:50%;
box-shadow:0 0 25px -2px rgba(0,0,0,0.6);
border-radius:10px / 100px;
}
.rscurve:before {
right:0;
}
.rscurve:before {
top:0;
bottom:0;
left:10px;
right:10px;
border-radius:100px / 10px;
}
Code HTML here..
<div class="shadow-style bdcurve rscurve">
<p>CODE TEXT, IMAGE, DLL </p>
</div>
