Membuat Efek Pada Background dengan CSS3

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.

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

Letakkan isi box disini!

<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

Letakkan Isi Box di sini!

<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.