Setelah sebelumnya sampeyan mengikuti tutorial tentang bagaimana menciptakan efek transparansi atau opacity effect dengan memanfaatkan CSS opacity property serta membuat box sederhana dari paduan opacity property dan CSS3 transition yang didalamnya juga telah ditambahkan background effect, kali ini kita akan coba kupas lebih dalam tentang bagaimana cara memadukan opacity effect tersebut dengan beberapa CSS property yang lain hingga tercipta efek yang lebih fantastis dan menarik untuk dijadikan tempat bernaung widget atau desain yang lain. CSS3 masih akan menjadi "kekuatan utama" yang menjadi penentu keindahan efek yang kita ciptakan.
Agar supaya lebih mudah dipahami dan sekaligus dapat dimanfaatkan di blog, kita akan buat sebuah 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.
Catatan/Keterangan:
Agar supaya lebih mudah dipahami dan sekaligus dapat dimanfaatkan di blog, kita akan buat sebuah 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgORAuCiuqd5dlOoDtIvUDWjOdok-OtWyhVgkbgQkCnl_7Gh3HOMRLpgaUg02t3xcTMy5pim9ronH3NTnwIwUw02xpjPXR6zMe98GJZqhox0CIrA580zBjfmPIfRAI0c8ZSTZoH1VL8T0U/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>.
- Untuk menggunakan kode CSS tersebut di blog, sampeyan bisa baca Special Tutorials yang terletak di menu sebelah kiri. Di situ tersedia beberapa tutorial dasar yang berkaitan dengan posting ini.
- Baca juga posting sebelumnya (KLIK di sini!) untuk lebih memperlancar pemahaman soal opacity property dan cara menggunakannya!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Comments
Post a Comment