Cara buat scroll box animasi

cara membuat kotak scroll box effeck shadow :





Gaya lain yang bisa di tambahkan pada kotak scrollnya adalah efek shadow ( bayangan ). Agar efek bayangan pada kotaknya lebih menarik, ganti border ( garis pinggir ) kotaknya dengan garis pinggir ganda. Hasilnya kurang lebih seperti ini :





Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya


Kode yang di gunakan untuk membuat kotak scroll dengan efek shadow, dan garis pinggir ganda seperti di atas adalah :
<div style="overflow:auto; width:150px;
height:100px; color:#b4040; padding:10px; border:4px double #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;-goog-ms-box-shadow:0 0 10px #000000;">Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya</div>
  • Kode yang berwarna merah adalah kode untuk memberi garis pinggir ganda. Jika ingin membuat garisnya putus - putus, ganti kode double dengan dashed
  • Kode yang berwarna biru adalah kode untuk memberi efek bayangan berwarna hitam pada kotak
Semua kode di atas bisa di edit dengan menggabungkan kodenya, menambahkan atau mengurangi kodenya atau keduanya. Silahkan edit kode dasar membuat kotak scroll di blog tersebut di atas agar kotaknya sesuai dengan keinginan anda.

Jika menambahkan terlalu banyak gaya, nanti kotaknya menjadi OVER DOSIS eh OVER STYLE . Karena itu saya akhiri artikel "Cara Membuat Kotak Scroll di Blog" sampai disini saja . Jika anda lebih suka membuat text area di bandingkan dengan kotak scroll, klik "Beberapa macam cara membuat textarea"

artikel ini saya dapat dari http://www.bloggerbugis.com 
Happy Blogging dan Salam Blogger....

Print Friendly and PDF

0 komentar:

Posting Komentar

◄ Posting Baru Posting Lama ►

 

Sobat anda pengunjung ke :

Translate

KOMPAS.com


Copyright © 2012. Turitorial panduan blogger internet dan komputer - All Rights Reserved Download- template By @Edmundstohir