Membuat box gelap-terang/opacity

Box dengan Efek Gelap Terang.

.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);
}

Opacity effect sebenarnya sebuah CSS property yang berfungsi untuk menciptakan efek transparansi atau sering disebut juga efek blur. Semua browser sudah support terhadapnya, hanya untuk Internet Explorer harus digunakan kode yang berbeda dari yang lain. Memanfaatkan opacity property dalam sebuah desain sangat mudah dilakukan, hanya agar supaya ketika cursor diarahkan di atasnya keadaan berubah menjadi terang/gelap maka harus ditambahkan sebuah hover effect. Secara sederhana penulisan opacity effect dalam sbuah kode CSS bisa dilihat seperti disamping.

• Opacity di Internet Explorer dituliskan dalam bentuk kode:
  filter:alpha(opacity=...);
• Nilai opacity (tanda titik-titik) sebesar 0 s/100.
• Nilai opacity di browser yang lain menggunakan nilai 0 s/d 1.0
• Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas.

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

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

Di Baca Juga Ya...Artikel Terkait Lainnya :

Widget By : lefransnote's Site