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 DEMOdi bawah ini.
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 DEMOdi bawah ini.
.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 */
}<div class="bgboxtunggal"></div>
.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;
}<div class="bgboxgandaluar"> <div class="bgboxgandadalam"></div> </div>
Silahkan juga buka Tutorial lain y
0 komentar: