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 «
On Post » media pembelajaran bahasa inggris smp
Boss, tambahin backlink websiteku dong bosss https://amazenesia.com 😅
On Post » cara mengatasi mobil sulit dihidupkandi
Thanks for some other excellent post. Where else may anyone get that kindof info in such a perfect means of writing? I’ve a presentation next week, and I’m on the look for such info.Thank you very muchdatuktogel.infogame onlineprediksi TogelBandarsgp.netSitus agen judi Online terbaikdanaqqJawapkr88
On Post » aksi bule pengobral cinta ini dia ciri
Ini
On Post » cara mudah membagi kolom header
cara memperlebar area untuk judul blog gimana gan? ane bingung..
On Post » download gratis rpp silabus sdmi kelas
silabus jawa yang mulai kelas 4 sampai 6 kliru upload kak,,www.bromoexpedition.com
On Post » cara membuat tooltip gambar dengan
Mantap Gan.. sangat membantu.
On Post » download template keren
this is the original template you can donwload at https://btemplates.com/2012/blogger-template-blogazine/ and you can redesigned it if you know html code
On Post » download template keren
I am a poor student sir.I teach people and share everything only for education.If u given me this tamplet free its great pleasure to me and other people.I never share this tamplet, I use this only my new project sir :)
On Post » download template keren
how much do want to give me. I redesigned for three months
On Post » download template keren
what prize? sir
On Post » cara membuat ucapan selamat datang
Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)
On Post » download template keren
template premium boss not free
On Post » cara licik pembual cinta dunia maya
Mencari uang paling mudah itu pinjam, tapi mengembalikanya sulit
On Post » cara licik pembual cinta dunia maya
Aku indriaty manirjo, saya ingin bersaksi pekerjaan yang baik dari Allah dalam hidup saya kepada orang-orang saya yang mencari untuk pinjaman di Asia dan bagian lain dari kata, karena ekonomi yang buruk di beberapa negara. Apakah mereka orang yang mencari pinjaman di antara kamu? Maka Anda harus sangat berhati-hati karena banyak perusahaan pinjaman penipuan di sini di internet, tetapi mereka masih asli sekali di perusahaan pinjaman palsu. Saya telah menjadi korban dari suatu 6-kredit pemberi... [more]
On Post » download template keren
http://cloninggo.blogspot.com/ Download link not work please update!!!
On Post » english speech contest
http://competition-storytelling.blogspot.co.id/
On Post » english speech contest
This comment has been removed by the author.
On Post » cara membuat ucapan selamat datang
pesan saja sama jasa pembuat template, online
On Post » cara membuat ucapan selamat datang
saya mau bikin blog saya menjadi online shop dgn tampilan blog yang keren. caranya gimana mas/sis?
On Post » download gratis rpp silabus sdmi kelas
cari rpp bahasa jawa sd kelas 5 kok nggak ada za.
On Post » macam macam jenis teknik seo ala
Informasinya sangat bermanfaat terutama bagi yang baru belajar SEO.bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
On Post » silabus rpp ktsp smp berkarakter
Rpp nya sangat membantu saya sebagai pengajar yang butuh info KTSP..... terima kasih dan semoga sukses selalu....aamiin
On Post » galau blog anda ditolak google adsense
Wk...wk...Wkk.smart man must be different from ....
On Post » galau blog anda ditolak google adsense
You have got some money from google adsense? Very excited bro!! :D
On Post » cara membuat read more dan nama author
mantap gan...