Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

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

Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Jika sampeyan mencermati beberapa box widget di blog ini, maka akan terlihat beberapa box widget akan terlihat terang hanya ketika cursor berada di atasnya. Opacity effect menjadi kunci terjadinya perubahan box gelap ke terang.

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, sampeyan 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 <body> dan tag penutup <body>.
  • Untuk menggunakan kode CSS tersebut di blog, sampeyan bisa baca Special Tutorials yang terletak di menu sebelah kiri. Di situ tersedia beberapa tutorial dasar yang berkaitan dengan posting ini.

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





» Happy Blogging - gubhugreyot «


6 komentar:

  1. sip.. jadi nambah ilmu ku soal CSS 3

    BalasHapus
  2. Mas, saya modif yg readmore berjalan dgn marquee tadinyaa berhasil..tp kok jadi dobel2 gt ya? yg lain banyak yg suses.. oya, yg teks box gelap terang ini keren.., cm tutorialnya membingungkan bagi pemula.. tlg kasi tahu template yg cocok untuk prakte ya.. dan yl liatin blog saya jg.. salahnya di mana.. thank's...

    BalasHapus
  3. terima kasih , tipsnya aku mau coba dulu.

    BalasHapus
  4. udah tak coba dan berhasil mas..
    makasih ya tips nya..

    kunjungi : www.duniaq-duniamu.com

    BalasHapus
  5. wooooooowww..... keren keren tips yang ada disini.. blognya juga keren.. :)
    makasih ya om tutorialnya.. :)

    visit my blog : DuniaQ Duniamu

    BalasHapus
  6. masie bingung bagi pemula, tolong diperjelas donkk tutorialnya

    BalasHapus

 
GR | Edited by | gubhug reyot