Jumat, 03 Februari 2012

Cara Membuat scroll box efek ( background ) kertas

Share on :

Cara membuatnya :
Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
COPAS kode di bawah ini tepat di atas kode ]]></b:skin>

/* scroll
----------------------------------------------- */
.scrollboxs{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEt_xraoS6_CgxJYX7kM1AU7hi96pUgimaIp8dXblOwBFoJ3qskA7valrkrSwsOhhr5K-l_KS21UFB1ViEVF0jAy3MvwwYLTIiUKxUs-IKDnNtMelY-eZN5_y4GgKljgT_Anq9dYSsGsE/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 3px 3px 5px #000000;
-moz-box-shadow: 3px 3px 5px #000000;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
.scrollboxs a, .scroll:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilihxSYDPry2hbowi2oqSBswXqPt_jIKKlJ8kK9yEp-bRxHoYh7mdkWvU5-VuF15b3UvCdoVu5yhnQh9OLAIPTitcZ4siWucQ2Pmrhh_BeadLl8UgxbGiSkhwixrC197Fe2g6top77xDJ4/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
color:#000;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-box-shadow: 3px 3px 5px #2E2E2E;
-moz-box-shadow: 3px 3px 5px #2E2E2E;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
Untuk memanggil nya Kode nya sperti ini di bawah ini..
GUnakan kode di bawah ini setiap kali kita mau membuat Scrool BOX..

 <div class"scrollboxs">Contoh scroll box</div>
Simpan dan lihat hasil nya

SEmoga bermanfaat ^_^

1 komentar:

mantep tutorialnya mas, kunjungi balik ya....

Posting Komentar

Trima kasiH sudah membaca artikel ( postingan ) saya..

silahkan tinggalkan komentar anda.

Karna Komentar anda sangat berarti untuk kemajuan Blog ini ^_^