Cara Membuat Box dg Efek Gelap-Terang CSS3

ortega | 17.18 |


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.

Contoh:

Letakkan teks, image atau yang lainnya di sini
Cara membuat Box dengan Efek Terang - Gelap
  • Login ke Blogger==>Dasboard==>Design(Rancangan)
  • Klik Edit HTML
  • Cari kode ]]></b:skin>
  • Letakkan kode CSS dibawah ini di atas kode ]]></b:skin>
.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);
}

  • Klik Save Template
Untuk postingan gunakan kode dibawah ini dimode editHTML
<div class="mybox">Letakkan teks, image atau yang lainnya di sini!</div>



source : http://modifikasiblog-modifikasi.blogspot.com/

Category:

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!