Cara Membuat Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Pada postingan kali ini education for all akan mencoba sharing tentang bagaimana Cara Membuat Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition, ada sebagian sobat blogger mania yang berminat untuk memasangnya karena bisa mempercantik tampilan blog tapi sebaliknya justru ada beberapa sobat blogger mania yang tidak menyukainya tapi justru pernah mengejek blog Education for all dikolom komentar dengan mengatakan bahwa blog education for al seperti blog anak TK tapi tidak apalah, memang orang itu lebih banyak yang tidak suka ketimbang yang suka. 

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 adalah sebagai berikut:

Penulisan opacity property di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}

Penulisan opacity property dan hover effects di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

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

Menggabungkan opacity property dan CSS3 Transition

Saat ini banyak browser sudah support terhadap CSS3 hingga berbagai efek baru dapat ditambahkan dalam sebuah desain termasuk saat kita mendayagunakan opacity property. Penggunaan CSS3 transition akan mampu menciptakan sebuah transisi dalam waktu yang bisa diatur saat terjadi perubahan efek gelap menjadi terang atau terang menjadi gelap. Transisi ini tentunya akan membuat efek transparansi yang tercipta menjadi semakin menarik, karena kecepatan waktunya bisa diatur sesuai selera.

Kode CSS: Efek Gabungan opacity dan CSS3 Transition

.efekblur {
      opacity: 0.7;
      filter: alpha(opacity=70);
     -o-transition:opacity ease-in 700ms;
     -moz-transition: opacity ease-in 700ms;
     -webkit-transition: opacity ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Jika beberapa efek lain masih ingin di tambahkan, maka penulisan dituliskan dalam bentuk:

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
     -o-transition: all ease-in 700ms;
     -moz-transition: all ease-in 700ms;
     -webkit-transition: all ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Kode CSS di atas karena menggunakan CSS3, maka hanya akan bekerja secara sempurna di browser yang sudah support CSS3 seperti Mozilla, Opera, Safari dan Google Chrome serta beberapa browser tertentu yang lain.

Box dengan Efek Gelap Terang

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

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «