Box dengan Efek Gelap Terang - Sharing Ilmu Pengetahuan | Ianhacks
Headlines News :
Home » , » Box dengan Efek Gelap Terang

Box dengan Efek Gelap Terang

Written By Rian on 7.18.2012 | Wednesday, July 18, 2012

Salam takjup buat semuanya, saya mulai tampil kembali untuk melakukan posting agar pembaca semua tidak merasa bosan dan semoga rekan blogger dan juga lainnya tidak merasa jenuh dengan saya. OK langsung ke TKP.

Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

.boxwidget {
height: 250px;
overflow: auto;
margin: 20px 4px 10px;
padding: 15px 8px;
background: #111;
color: #666;
border: 2px solid #555;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity: 0.4;
filter:alpha(opacity=40);
-o-transition: all ease-in 1.2s;
-moz-transition: all ease-in 1.2s;
-webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
background: #660000;
color: #eee;
opacity: 1.0;
filter: alpha(opacity=100);
}

Untuk menggunakan box tersebut, Sobat blogger mania harus menggunakan kode xHTML seperti di bawah ini:

<div class="boxwidget">
Di sini widget atau Teks diletakkan!
</div>

• Simpan kode CSS di atas kode ]]></b:skin>
• Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka dan tag penutup .

 Selamat Mencoba semoga berhaail, dan Selamat berkarya melalui blog....

x_3bfae512
Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

 
Support : Proudly powered by Blogger
Copyright © 2011. Sharing Ilmu Pengetahuan | Ianhacks - All Rights Reserved
Original Design by Creating Website Modified by IanBlack