Membuat Efek Pada Background dengan CSS3 (Background Effects onmouseover using CSS3)

Ini adalah sebuah teknik sederhana untuk menciptakan perubahan pada background blog, yang terutama banyak dimanfaatkan untuk widget blog. Jika sebelumnya untuk menciptakan efek atraktif yang menyertai fungsi ini hanya dapat dilakukan dengan bantuan jQuery, motool dan javascript yang lain, kini berkat CSS3, beberapa efek fantastis bisa kita buat hanya dengan kode CSS. Perubahan background (background color dan background image) dapat dibarengi dengan menyertakan bentuk animasi pada efek transparansi, transisi warna dan mungkin jika diinginkan bisa kita sertakan juga perubahan pada border (border-color, border-width), serta dapat juga dengan menambahkan perubahan di border-radius(efek rounded corners).

Untuk mendapatkan hasil seperti gambaran di atas, beberapa kode baru yang berupa CSS3 harus kita tambahkan pada syntax yang ada di template blog. Satu kunci utama yang lain adalah dengan menambahkan hover pada syntax yang ingin di rubah backgroundnya, sehingga perubahan akan terlihat ketika cursor berada di atas bagian dimaksud (onmouseover). Supaya lebih jelas bagaimana bentuk perubahan background dan efek yang tercipta, silahkan KLIK link DEMO di bawah ini.

D E M O

Kode CSS "Background Effects onmouseover using CSS3" (box-1).

.bgboxtunggal {
 width: 450px;
 margin: 15px auto;
 background: #111;
 border: 1px solid #666;
 padding: 30px;
 color: #eee;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-transition: all 2.5s ease-in-out;
 -moz-transition: all 2.5s ease-in-out;
 -webkit-transition: all 2.5s ease-in-out;  
 opacity: 0.6;
 filter: alpha(opacity=60); /* for IE */ 
 }
.bgboxtunggal:hover {
 background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackV300H1.gif) top left repeat;
 border: 1px solid #777;
 border-radius: 30px; 
 -moz-border-radius: 30px;
 -webkit-border-radius: 30px; 
 box-shadow: 1px 1px 8px #fff;
 -moz-box-shadow: 1px 1px 8px #fff;
 -webkit-box-shadow: 1px 1px 8px #fff;
 opacity: 1.0;
 filter: alpha(opacity=100); /* for IE */  
 }

xHTML box-1

<div class="bgboxtunggal">Letakkan isi box disini!</div>

Kode CSS Box ganda : Box dengan dua elemen DIV sebagai penyusunnya seperti yang terlihat di DEMO

.bgboxgandaluar {
 margin: 20px auto;
 padding: 5px;
 width: 450px;
 border: 2px solid #999;
 border-radius: 10x; 
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 
 -o-transition: all 1.5s ease-in;
 -moz-transition: all 1.5s ease-in;
 -webkit-transition: all 1.5s ease-in; 
 background: #888;
 opacity: 0.6;
 filter: alpha(opacity=60); /* for IE */
 }
.bgboxgandaluar:hover {
 box-shadow: 1px 1px 18px #000;
 -moz-box-shadow: 1px 1px 18px #000;
 -webkit-box-shadow: 1px 1px 18px #000;
 background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgFadeBlackV411H1.gif) bottom left repeat;
 border: 2px solid #43b1fd;
 opacity: 1.0;
 filter: alpha(opacity=100); /* for IE */  
 } 
.bgboxgandadalam {
 background: #111;
 border: 1px solid #666;
 padding: 15px 10px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-transition: all 2.5s ease-in-out;
 -moz-transition: all 2.5s ease-in-out;
 -webkit-transition: all 2.5s ease-in-out; 
 color: #eee;
 }
.bgboxgandadalam:hover {
 background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackH1V300.gif) top left repeat;
 border: 1px solid #777;
 border-radius: 30px; 
 -moz-border-radius: 30px;
 -webkit-border-radius: 30px; 
 box-shadow: 1px 1px 8px #fff;
 -moz-box-shadow: 1px 1px 8px #fff;
 -webkit-box-shadow: 1px 1px 8px #fff;
 }

xHTML Box Ganda

<div class="bgboxgandaluar">
<div class="bgboxgandadalam">Letakkan Isi Box di sini!</div>
</div>

1. Atur lebar (width) sesuai kebutuhan.
2. Kode untuk box ini dapat dimanfaatkan di widget blog.
3. Simpanlah kode CSS di atas kode ]]></b:skin> atau bisa juga melalui penambahan widget.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «