Cara Membuat Box Dengan Efek Gelap Terang

Panduan atau tutorial (blogger & blogdetik) membuat box dengan efek gelap terang ini bisa digunakan tidak hanya di blogger, namun bisa juga digunakan di blogdetik.

Fade Effect yang tercipta melalui opacity effect sekalipun merupakan efek yang sangat sederhana namun hingga saat ini memang merupakan sebuah efek yang banyak dilibatkan dalam berbagai desain/fungsi. Selain membuatnya cukup mudah, tak dapat dipungkiri bahwa fade effect mampu memberi pengaruh yang luar biasa menarik, terlebih bila dipadukan dengan efek-efek yang lain.

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>

Contoh xHTML

<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="my photo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjToZlRnClhOhNtiJ75JWTjHCoc8UQdwlPsjVf3UoWIfsfkZkyxEEZjNfeorVdBBWEiaQZrOU0S1OKAmMGwMPaTLHyDd3QjB-zXnVisGlk3fC-xfQv3sOkRouiFNLW5PQZOEPgbDGKYFZw/s320/myphoto.jpg" width="200" height="150" style="float:left;margin:5px 10px 5px 0;padding:3px;border:2px solid #222;border-radius:6px;" /></a>Photo masa kecilku ketika main petak umpet kemudian tiba-tiba kebelet e'ok!</div>