Sabtu, 14 Januari 2012

Ciptakan Banyak Efek dg Menggabungkan Opacity Property dengan Beberapa Property Lain dengan CSS3

scroll box yang dilengkapi dengan berbagai efek seperti, height, background-color dan background-image, transparansi, color serta munculnya scroller hanya saat cursor digerakkan di atas box. Dengan beberapa efek seperti di atas, sebuah widget atau apapun yang nantinya kita letakkan dalam box maka sebelum cursor berada di atas box maka yang terlihat hanya sebuah box dengan ketinggian minimal (bisa diatur). Jika sampeyan ingin melihat sebagian kecil dari efek yang akan kita ciptakan, silahkan kunjungi link di bawah ini (DEMO) dan cobalah sentuhkan cursor pada kolom yang berisi data komentar. Kolom ini hanya berketinggian beberapa mm saja tetapi saat cursor disentuhkan maka seluruh bagian akan meninggi dan terlihat keseluruhan isi dalamnya.

Scroll Box dg berbagai efek dan CSS3

Kode CSS

.boxwidget {
       width: 300px;
       height: 70px; 
       overflow: hidden;
       margin: 20px 4px 10px;   
       padding: 15px 8px;
       background: #0066FF url(http://i828.photobucket.com/albums/zz208/tantytm/TemplatesImg/bgCommentsTantyTM.png) right bottom  no-repeat;
       color: #996600; 
       border: 2px solid #555;
       border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
       opacity: 0.7;
       filter:alpha(opacity=70);
      -o-transition: all ease-in 1.2s;
      -moz-transition: all ease-in 1.2s;
      -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
       background: #660000 url(http://1.bp.blogspot.com/_550XeJhg_o8/TQC7BwYbDLI/AAAAAAAAAv4/ClHxYtODM8M/s320/bgBukuBNewH93V89.png) left top no-repeat;
       height: 250px;
       overflow: auto;
       color: #bbb;
       opacity: 1.0;
       filter: alpha(opacity=100);
}
.boxwidget h3 {
       font-size: 14px;
       background:#000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueFadeV57H4.jpg) top left repeat-x;
       font-weigt: bold;
       text-transform:uppercase;
       color: #FF9900;
       margin: 0 6px 15px 37px;
       padding: 3px 5px;
       border-radius:4px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
       text-shadow: 1px 1px 1px #000;  
}
.boxwidget:hover h3{
       background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/Transparent-1.jpg) center;
}

<div class="boxwidget">
<h3>Tuliskan Widget Title disini!</h3>
Letakkan widget atau teks disini!
</div>

Catatan/Keterangan:
  • Width bisa dirubah nilainya atau bahkan dihilangkan hingga lebar langsung menyesuaikan diri dengan lebar kolom/ruang yang tersedia.
  • Height bisa diatur untuk mengatur ketinggian box. Height pertama (pada .boxwidget) merupakan tinggi box saat awal sedang height yang kedua (pada .boxwidget:hover) merupakan ketinggian box setelah cursor menyentuh bagian box.
  • Opacity untuk mengatur transparansi saat awal dan ketika cursor berada di atas box.
  • background menggunakan 2 buah background image dengan posisi di bottom right dan left top. Pengaturan posisi ini untuk menciptakan efek gerakan/pergeseran background-image.
  • color pada hover dibuat berbeda agar ada penambahan efek. Usahakan color pada teks disesuaikan dengan warna background yang digunakan.
  • h3 difungsikan untuk title/judul widget atau apapun yang terpasang di scroll box.
  • Agar teks tidak seluruhnya ditampilkan dan menabrak box maka digunakan overflow:hidden;, sedang overflow: auto; berfungsi menciptakan membentuk scroll box.
  • Pengaturan durasi waktu efek dilakukan dengan merubah nilai yang terdapat pada css transition (nilai 1.2s). Semakin besar maka durasi waktu efek semakin lambat.
  • Berbagai perubahan kode dan komponen pendukungnya dapat dilakukan berbagai perubahan hingga dihasilkan berbagai variasi efek yang berbeda.


  • Simpan kode CSS di atas kode ]]></b:skin>
  • Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka <body> dan tag penutup <body>.


Label:

4 komentar:

Terima kasih atas Komentar anda