Box Dengan Efex Gelap Terang (Fade Effect) CSS3

CSS3 sebagai sebuah pengembangan baru kode css memberi andil yang cukup besar bagi blogger untuk mengembangkan efek terang gelap atau fade efect ini. Berbagai efek yang sebelumnya harus dibangun melalui javascript kini bahkan tak perlu lagi dilakukan. Tentang kompabilitas css3? Kita tak lagi perlu lagi kuwatir. Berbagai browser besar setiap detiknya juga selalu meningkatkan kompabilitas mereka terhadap css3. Yah... karena kode css3 tak boleh tidak akhirnya akan menjadi kode utama pembangun desain blog/website karena kesederhanaannya dan kemampuannya untuk membangun berbagai desain animatif. Diwaktu ke depan kita akan lebih merasakannya ketika semua browser sudah kompatible dengan css3 animation.



Kode CSS Box Terang Gelap

.mybox{
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

xHTML

<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</div>

xHTML dengan tag p

<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</p>

Cara membuat Box dengan Efek Terang - Gelap
Login ke Blogger
Dasboard
Design (Rancangan)
Edit HTML
Cari kode ]]></b:skin>
Letakkan kode CSS di atas kode ]]></b:skin>
Klik Save Template
Gunakan xHTML di halaman posting atau di sidebar blog.


DEMO

Photo masa kecilku ketika main petak umpet kemudian tiba-tiba kebelet e'ok!