TUTORIAL™

Apa Kabar Sobat Semuannya. Pada Kesempatan Kali,ni Kami Mau Berbagi
Membuat Efek Pada Background dengan CSS3 Sebelumnya Sudah Kami
Posting Tapi Kali,ini Di Lengkapi Dengan Efek Yang Sangat Mantaf Hehehe

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. Tapi Kali,ini Ada Dua Pilian Buat Sobat
Yaudah Seperti Biasa Kita Lihat Dulu Demonya




 Kalu Sobat Mau Pake  Efek Pada Background dengan CSS3
Dengan Gambar Yang Di Atas Silakan Copy Code Di Bawah
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwlQ97Ig5V7yP5_U3MyhBevFdwPgZ6-gtnRhliz7uMi8u7OJQG0ygU3uXZrGx0p_MeilNG6aLVd4ry1JWr8Ee7gAXP6Vn4g93cXNTG9M-i4jVtNh9y3NcrirBBe9q-6TOYnFHZ3a_EngU/s1600/Slonjor+Selladrt.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 */ }
Buat Pasang  Postingan Sobat Pake Code Nya Di Bawah

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

Kalu Sobat Mau Pake  Efek Pada Background dengan CSS3
Dengan Gambar Yang Di Atas Silakan Copy Code Di Bawah
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhL3Nv0oI_yKzYaPFD1dLdz_dY_XwwXI0f4YuwIg9C42YfHYBYwVxqDsaUl2fAxFhTae_NwPU_Su8mNGUDaI3emMDzcwaqJxIyvQeQpGpMeqmI65RDiKiOMtwY_PVFuqUHHXDCSTX7BK_/s320/BlogBlack+Selladrt.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwlQ97Ig5V7yP5_U3MyhBevFdwPgZ6-gtnRhliz7uMi8u7OJQG0ygU3uXZrGx0p_MeilNG6aLVd4ry1JWr8Ee7gAXP6Vn4g93cXNTG9M-i4jVtNh9y3NcrirBBe9q-6TOYnFHZ3a_EngU/s1600/Slonjor+Selladrt.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; } 
Buat Pasang  Postingan Sobat Pake Code Nya Di Bawah

<div class="bgboxgandaluar">
<div class="bgboxgandadalam">Letakkan isi Tulisan Gambar disini!</div>
</div>

Sekian Dulu Dari Kami Tentang Membuat Efek Pada Background dengan CSS3
Sobat Semoga Berguna Buat Yang Mau Pake..