Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara buat Box dg Efek Gelap-Terang (Fade Effect) CSS3

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="http://1.bp.blogspot.com/-YoVmuudK6W4/TwZIpVtTnFI/AAAAAAAABDQ/BA6tnFyFbCM/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.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «

4 komentar:

  1. wow.. keren" nweh tentang css3 nya...

    BalasHapus
  2. mantap gan... tampilan bloggernya. ajarin donk..

    BalasHapus
  3. izin copas ya mastah.. akan saya sertakan sumbernya.. cek aja [http://]c-djogja.b[.]blogspot[.]com[/]

    BalasHapus

 
GR | Edited by | gubhug reyot