Perbedaan Opacity Dengan Tipe Filter Opacity CSS3

Pada bagian sebelumnya kita sudah bahas apa saja yang bisa kita lakukan dengan nilai yang ada pada property filter CSS3. Sekarang kita akan mencoba menjelaskan dua nilai terakhir yang sengaja saya umpetin karena menurut saya nilai ini cukup menarik untuk dibahas yakni ada opacity dan drop-shadow dan sebenarnya teman teman mungkin sudah tahu kalo nilai tersebut punya property CSSnya sendiri. Jadi opacity di filter itu sama dengan opacity property CSS3 yang gunanya untuk membuat sebuah elemen menjadi transparan. Kita akan mulai mencobanya dengan menuliskan opacity pada gambar sebagai berikut

nilainya sama kita bisa berikan 0 sampai 1. Misalnya saya tulis 1 maka gambarnya tidak transparan tetapi jika saya berikan nilai 0.5 maka hasilnya akan transparan.

Lalu apa bedanya menggunakan opacity pada filter dan menggunakan opacity property CSS3. Padahal hasilnya pun sama saja. Jadi sebenarnya yang terjadi dibelakang layar ketika teman teman menggunakan property CSS3 maka browsernya itu melakukan operasi matematik supaya gambarnya dapat berubah. Nah dengan menggunakan property filter ini operasi matematiknya dilakukan menggunakan bantuan hardware sedangkan property seperti opacity, box-shadow dan text-shadow itu murni menggunakan kemampuan browsernya maka menggunakan filter itu jauh lebih cepat prosesnya dari pada menggunakan property CSS biasa karena yang kerja adalah hardware yang ada pada komputernya.

Kekurangannya menggunakan filter saat ini masih dalam pengembangan jadi kemungkinan ada browser yang belum support. Jadi itu dia untuk yang nilai opacity pada filter CSS3. Semoga bermanfaat.

24 September 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat