Membuat Shadow / Bayangan Border Widget

Membuat Sebelah Kanan dan Kiri Border Widget Memiliki Border Berbayang / Shadow

Menciptakan Shadow / Bayangan Border Widget Unik

Pernah sobat melihat sebuah background atau semacam border widget yang memiliki efek seperti banyangan?

Kurang lebih akan tampak seperti dibawah ini sob:

Lihat di SINI untuk contoh Live-nya

Membuat Shadow / Bayangan Border Widget - caranya sangat mudah gan,pertama,sobat letakkan barisan kode css berikut diatas kode skin:

.headerright {position: relative;height: 255px;width: 302px;border:1px solid #BABABA;margin: 5px 5px 0px 0px;padding: 5px 5px 0px 5px;font-weight: bold;background-color: #D2D2D2;-moz-box-shadow: inset 0 1px 1px #eeeeee;-ms-box-shadow: inset 0 1px 1px #eeeeee;-o-box-shadow: inset 0 1px 1px #eeeeee;-webkit-box-shadow: inset 0 1px 1px #eeeeee;box-shadow: inset 0 1px 1px #eeeeee;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}.headerright:before, .headerright:after {z-index: -1;position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 50%;max-width:300px;background: rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);}.headerright:after {-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);transform: rotate(3deg);right: 10px;left: auto;}

a.mrpujiajadeh {width:123px;height125px;}div.i125 a.mrpujiajadeh {background:#e7e7e7;width:125px;height:125px;line-height:100%;}div.lebarbox a {width:302px;}div.lebarbox a, div.i125 a {display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}div.lebarbox img, div.i125 img {border:0;clear:right;}html > body div.lebarbox a.mrpujiajadeh {width:302px;height:255px;}div.lebarbox a.mrpujiajadeh, div.i125 a.mrpujiajadeh {color:#666;font-weight:bold;font-size:12px;/*border:1px solid #BABABA;*/text-align:center;}div.lebarbox a.mrpujiajadeh {background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .06), rgba(255, 255, 255, 0.1) 40px);background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .06), rgba(255, 255, 255, 0.1) 40px);width:302px;height:60px;line-height:480%;-moz-box-shadow: inset 0 1px 1px #EEE;-ms-box-shadow: inset 0 1px 1px #EEE;-o-box-shadow: inset 0 1px 1px #EEE;-webkit-box-shadow: inset 0 1px 1px #EEE;box-shadow: inset 0 1px 1px #EEE;}div.lebarbox a.mrpujiajadeh:hover, div.i125 a.mrpujiajadeh:hover {/*border:1px solid #999;*/background:#ddd;color:#333;}

Setelah itu,untuk menerapkannya pada widget,sobat tinggal membubuhkan kode berikut:

<div class="headerright floatR" id="headerright">
<div class="lebarbox"><a class="mrpujiajadeh">
Di Sini Letak Kode Html/Text/Javascript Anda
</a></div></div>

Selamat Mencoba Ya :D