Box dengan Efek Gelap Terang

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....

---

---

Artikel Terkait: