.jpg)
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:
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.
Jika beberapa efek lain masih ingin di tambahkan, maka penulisan dituliskan dalam bentuk:
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.
Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.
Untuk menggunakan box tersebut, sampeyan harus menggunakan kode xHTML seperti di bawah ini:
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 «
sip.. jadi nambah ilmu ku soal CSS 3
BalasHapusMas, 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...
BalasHapusterima kasih , tipsnya aku mau coba dulu.
BalasHapusudah tak coba dan berhasil mas..
BalasHapusmakasih ya tips nya..
kunjungi : www.duniaq-duniamu.com
wooooooowww..... keren keren tips yang ada disini.. blognya juga keren.. :)
BalasHapusmakasih ya om tutorialnya.. :)
visit my blog : DuniaQ Duniamu
masie bingung bagi pemula, tolong diperjelas donkk tutorialnya
BalasHapus