JSFiddle - React, Tailwind, and code Playground

by Rian Ariona

HTML

<h1>Bermain dengan CSS3 Box-Shadow</h1>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=231469793550156&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Farionanet%2F212957858735933&amp;send=false&amp;layout=standard&amp;width=400&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=segoe+ui&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:35px;" allowTransparency="true"></iframe>
<div class="box type1">box-shadow : Efek Blur</div>
<div class="box type2">box-shadow : Kertas melengkung Pinggir</div>
<div class="box type3">box-shadow : Kertas melengkung pinggir 2</div>
<div class="box type4">box-shadow : Kertas melengkung tengah</div>
by <a href="http://ariona.net">ariona.net</a>

CSS

body{
    background:#f6f6f6;
    text-align:center;
    color:#777;
    font-family:Calibri,'Segoe UI',Tahoma,Arial,Sans-serif;
    text-shadow:0 1px 1px rgba(255,255,255,.3);
}
h1{
    font-size:30px;
    margin-bottom:20px;
}
.box{
    width: 456px; height:80px;
    background:-webkit-gradient(linear,0 0,0 100%,from(#2e9aef),to(#1186e3));
    margin:0 auto 30px;
    position:relative;
    text-align:center;
    font-size:20px;
    color:#0b5a97;
    font-family:Calibri,'Segoe UI',Tahoma,Arial,Sans-serif;
    text-shadow:0 1px 1px rgba(255,255,255,.3);
    line-height:70px;
}
.type1{
    -webkit-box-shadow:0 0 2px #2e9aef,0 0 4px #2e9aef,0 0 6px #2e9aef;
}
.type2 .type3 .type4{
    box-shadow:1px 1px 3px rgba(0,0,0,.2);
}
.type2:after{
    content:' ';
    width:40%;
    height:50px;
    bottom:5px;
    left:10px;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(-2deg);
    position:absolute;
}
.type3:before{
    content:' ';
    width:40%;
    height:50px;
    bottom:5px;
    left:10px;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(-2deg);
    position:absolute;
}
.type3:after{
    content:' ';
    width:40%;
    height:50px;
    bottom:5px;
    right:10px;
    z-index:-1;
    position:absolute;
    right:10px;
    -webkit-transform:rotate(2deg);
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
}
.type4:after{
    position:absolute;
    content:' ';
    width:90%;
    height:20px;
    left:5%;
    bottom:0;
    z-index:-1;
    border-bottom-left-radius:50% 10px;
    border-bottom-right-radius:50% 10px;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
}