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/AVvXsEj7gm4Me2fea1OBm_IsV2za7pB3dF73fQ6mweLyTToCEvYdyx7o2zxx3WwMi-rsHfjuVrKzB4chZQVFQnAktjytkY3pBpr4eYRVOnc6HiTqY5-eIVER-9SAupHYuae2b0R51dtdL2-QskQ/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>
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.
0 komentar:
Posting Komentar