Property Filter Pada CSS3
Property Filter Pada CSS3 – Property CSS3 filter berfungsi untuk digunakan memberikan efek visual pada gambar, background atau border. Cara penulisan sintak property CSS3 filter ini sangat mudah saja, perhatikan gambar yang berada di bawah. kita hanya cukup menuliskan nama property CSS3 filter, kemudian diikuti dengan nilai/value-nya yang berisi type dari property CSS3 filter beserta nilai dan satuannya. Property CSS3 filter memiliki 10 tipe, yaitu : blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity, drop-shadow.
Perlu diingat bahwa property CSS3 filter merupakan salah satu property CSS3 yang membutuhkan vendor prefixes di awal penulisan sintak property-nya. Namun dalam bagian catatan saya ini, saya tidak akan membahas bagaimana menggunakan vendor prefixes. Silakan baca artikel saya yang membahas mengenai vendor prefixes.
A. Blur
Salah satu tipe dari property CSS3 filter, kita bisa gunakan blur. Tipe blur ini kita mampu gunakan buat memberikan efek mengaburkan atau remang-remang. Nilainya berisi nomor 0 sampai nilai nir terbatas dengan satuan pixel ( px ).
Type blur ini sama dengan type blur yang terdapat pada pelaksanaan photosop yaitu Gaussian Blur. Kita sanggup pilih filter dibagian menu bar, pilih blur, & lalu pilih gaussian blur. Nilai yg sanggup digunakan pada CSS3 tidak terdapat batasannya. Namun dalam aplikasi photoshop ini, nilainya dari 0,1px- 250px. Semakin besar angkanya maka gambarnya akan semakin blur dan bahkan tidak kelihatan. Slidernya pula akan beranjak ke arah kanan. Untuk cara penggunaan lebih lanjut dalam CSS3, silakan lihat sintak dibawah ini:
Catatan Type Filter Dan Satuannya , beserta contohnya:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Filter</title> <style> body { text-align: center; } img { filter: blur(5px); } /* blur (px) brightness (angka | %) contrast (angka | %) saturate (angka | %) grayscale (angka | %) sepia (angka | %) hue-rotate ( deg ) invert (angka | %) opacity (angka | %) drop-shadow ( sama seperti box shadow ) */ </style> </head> <body> <img src="img/baby.png" alt="baby" title="baby"> </body> </html>
b. Brightness
Tipe filter brightness, kita bisa gunakan untuk mengatur gelap dan terangnya suatu gambar dengan menggunakan satuan persentase ( % ) atau angka. Untuk type brightness nilai defaultnya adalah 100% yang berarti sama dengan 1. Jadi kita bisa menggunakan nilai 1%, 10%, 50%, 100%, 200%, ... dan tak terhingga . Atau kita juga bisa menggunakan 0, 1, 1.2, 2, 3, 4, 4.6, 5, ... dan tak terhingga. Sebagai contoh apabila kita menggunakan nilai 1.1, itu artinya sama dengan 110%. Semakin besar nilainya, atau lebih besar dari 100% ( 1 ), maka semakin menunjukan intensitas warnanya dan semakin terang dan akan menjadi putih. Sedangkan semakin kecil nilainya maka akan semakin keabu-abuan, gelap dan lama-lama menjadi hitam.
<style> img { filter: brightness(1.5); } </style>
c. Contrast
Tipe filter contrast digunakan buat memberikan & menampilkan imbas yang tidak selaras dari gambar aslinya. Nilai tipe filter contrast ini menggunakan nomor ataupun menggunakan nilai satuan persentase ( % ). Nilai default menurut tipe contrast yaitu 1, yg nilainya sama dengan 100%. Kita bisa memakai nomor 0, 1, dua, 2.4, 3, tiga.5 , 4, lima, ... & tidak terhingga. Atau kita pula sanggup menggunakan nilai 10%, 20%, 100%, 110%, 200%, 270%, 300%, 400%, 500%, ... & tak terhingga. Semakin akbar nilainya, maka akan semakin paradoksal, bahkan area di sekitarnya akan tambah gelap. Sedangkan semakin kecil nilainya, maka akan semakin abu-abu, bahkan gambarnya akan semakin hilang.
<style> img { filter: contrast(150%); } </style>
d. Saturate
Tipe filter saturate adalah type filter untuk mengatur tingkat intensitas suatu warna atau nilai kejenuhannya. Nilai saturate direpresentasikan dengan satuan angka ataupun persentase ( % ). Nilai default dari nilai saturate ini adalah angka 1, yang artinya sama dengan 100%. Kita bisa menggunakan angka 0, 0.7, 1, 2, 3, 3.5, 4, 5, ... dan tak terhingga. Atau kita juga bisa menggunakan nilai persentase dengan menggunakan nilai 18%, 40%, 100%, 200%, 300%, 500%, ... dan tak terhingga. Semakin besar nilainya, maka akan semakin menunjukan intensitas warna yang bersangkutan. Sedangkan apabila nilainya semakin kecil, maka warnanya akan mendekati ke abu-abuan.
<style> img { filter: saturate(2); } </style>
e. Grayscale
Tipe filter grayscale merupakan tipe filter yg berfungsi buat memberikan pengaruh ke abu-abuan. Efek dari Tipe filter grayscale kebalikan menurut tipe saturate. Nilai menurut tipe filter grayscale ini menggunakan nomor atau persentase ( % ). Kita bisa memakai angka 0, 1, 2,tiga, 4, 5, ... & tidak terhingga atau kita juga sanggup memakai persentase misalnya 8%, 10%, 20%, 30%, 50%, 100%, 200%, 300%, 500%,... & tidak terhingga. Nilai 1 sama dengan nilai 100%. Apabila nilai default menurut tipe filter grayscale suatu gambar merupakan, 0 ialah tidak ada impak grayscale sama sekali. Maka dari itu semakin nilainya mendekati 100% atau 1, dan lebih besar berdasarkan nilai tadi, maka yg terjadi merupakan pengaruh ke abu-abuan. Sedangkan semakin kecilnya nilainya dan mendekati nilai 0% maka intensitas rona sesungguhnya akan semakin kelihatan.
<style> } img { filter: grayscale(1); } </style>
f. Sepia
Type filter sepia ini akan memberikan dampak sama seperty grayscale, tetapi dampak grayscale-nya menunjuk ke arah rona coklat tua kekuning-kuningan. Kita sanggup menggunakan nilainya menggunakan nomor ataupun satuan persentase ( % ). Kita sanggup memakai 0, 0.8, 1, dua, 3, 3.Lima, lima, 6, ... & tidak terhingga. Atau kita pula sanggup memakai 10%, 20%, 50%, 100%, 200%, 250%, 300%, 400%, 500%, ... Dan tidak terhingga. Apabila kita memakai nilai yg lebih akbar dari 0% dan mendekati 100% atau 1, dan lebih besar dari nilai tersebut maka efek sepia akan semakin kelihatan, sedangkan bila kita menggunakan nilai yg lebih mini & mendekati nilai 0% maka akan semakin memberitahuakn intensitas rona yang sesungguhnya atau tidak terdapat dampak sepianya alias warna defaultnya ( 0 ).
<style> img { filter: sepia(1.5); } </style>
g. Hue-Rotate
Hue-rotate adalah merotasi roda warna. Perhatikan roda warna dibawah. Ketika memutar roda warna, artinya mengubah warna secara keseluruhan. Roda warna sendiri berada diantara warna RGB dan CMY yang terdiri dari : red, yellow, green, cyan, blue, dan magenta. Perhatikan juga Hue/Saturation Option yang ada pada photoshop yang berada di gambar di bawahnya. Cara kerjanya sama dengan yang ada pada CCS3. Satuan yang digunakan adalah dalam derajat ( deg ). Roda warna berputar 360 degree baik searah jarum jam atau berlawanan dengan arah jarum jam. Kalau searah jarum jam berarti nilainya positif, tapi kalau berlawanan dengan arah jarum jam, artinya nilainya negatif. Nilainya bisa 0 – 360 deg.
Kalau menggunakan pelaksanaan photoshop buat mengatur nilai hue-nya, maka nilainya antar -180 deg s/d 180 deg. Kita bisa gerakkan slider hue. Kalau kekanan nilainya positif, kalau kekiri nilainya negatif. Atau kita pula eksklusif memilih nilainya dalam kotak nilainya. Untuk cara menggunakan lebih lanjut dalam CSS3 silakan lihat sintak dibawahnya.
<style> img { filter: hue-rotate(90deg); } </style>
h. Invert
Type filter invert berfungsi buat memberikan imbas misalnya negatif film. Nilainya mampu memakai baik angka dan persentase ( % ). Nilai default dari sebuah gambar merupakan 0, yg artinya tidak terdapat dampak invert sama sekali. Kita sanggup memakai nilai 0, 1, 1.1, dua, dua.Lima, 3, 4, 5, ... & tidak terhingga. Atau kita pula mampu memakai nilai pada persentase misalnya 10%, 20%, 40%, 80%, 100%, 250%, 300%, 400%, ... Dan tidak terhingga. Jika nilai yg diberikan lebih besar dari 0 atau mendekati nilai 100% ( 1 ), dan lebih akbar dari nilai 100% ( 1 ), maka pengaruh invertnya akan makin kelihatan. Sedangkan bila nilai yang diberikan lebih mini dan mendekati 0, maka efek invertnya semakin tidak terdapat.
<style> img { filter: invert(1.1); } </style>
i. Opacity
Salah satu tipe filter pada CSS3 merupakan opacity. Opacity sendiri adalah keliru satu property yang terdapat dalam CSS. Jadi kita mampu memakai opacity, baik menjadi value property filter atau menggunakan opacity menjadi property CSS sendiri. Nilai default menurut opacity merupakan 1 yg nilainya sama dengan 100%. Kita sanggup menggunakan nilai 0, 0.1, 0.2, 0.4, 0.6, 0.8, 1 atau kita mampu menggunakan persentase 10%, 20%, 30%, 50%, 70%, 90%, 100%.
Opacity menggunakan menggunakan bantuan property CSS3 filter atau menggunakan yang memakai opacity sebagai property yang berdiri sendiri hasilnya sama saja. Dibalik layar perubahan kedua proses tadi merupakan proses matematika. Tetapi menggunakan menggunakan opacity menggunakan bantuan property CSS3 filter, perubahan yg terjadi menggunakan menggunakan donasi hardware perangkat atau yang disebut hardware acceleration. Sedangkan bila kita menggunakan opacity sebagai property CSS perubahan yang terjadi memakai kemampuan browser. Sehingga memakai opacity dengan bantuan filter, prosesnya jauh lebih cepat dibanding menggunakan menggunakan opacity menjadi property CSS. Apalagi jikalau spesifikasi menurut perangkat personal komputer kita jauh lebih cantik. Tetapi kekurangan menggunakan opacity dengan bantuan filter adalah lantaran property CSS3 filter dengan tipe opacity, sifatnya masih eksperimental. Jadi kemungkinan masih ada browser yang belum support.
<<style> img { filter: opacity(.5); } </style>
j. Drop-Shadow
Tipe property CSS3 filter dengan menggunakan drop-shadow pula dapat dipakai menjadi property CSS yang bisa berdiri sendiri baik menggunakan memakai property CSS text-shadow & box-shadow, sama misalnya tipe property filter dengan menggunakan opacity. Penggunaan drop-shadow bisa digunakan baik buat text atau gambar. Sedangkan jika dipakai menjadi property yg berdiri sendiri, maka buat text kita sanggup gunakan property CSS text-shadow, sedangkan buat gambar kita bisa gunakan box-shadow.
Untuk nilai yg dipakai dalam tipe filter drop-shadow sama dengan nilai yg digunakan dalam penggunaan text shadow & box shadow. Nilai yang dibutuhkan buat memakai tipe property filter menggunakan jenis drop-shadow membutuhkan x-offset, y-offset, blur, dan rona.
Drop-shadow dengan menggunakan bantuan property CSS3 filter atau menggunakan yg menggunakan text-shadow & box-shadow menjadi property yang berdiri sendiri hasilnya sama saja. Dibalik layar perubahan kedua proses tersebut adalah proses matematika. Namun menggunakan memakai drop-shadow menggunakan bantuan property CSS3 filter, perubahan yg terjadi dengan memakai bantuan hardware perangkat atau yg disebut hardware acceleration. Sedangkan bila kita menggunakan drop-shadow sebagai property CSS perubahan yang terjadi memakai kemampuan browser. Sehingga memakai drop-shadow dengan donasi filter, prosesnya jauh lebih cepat dibanding dengan menggunakan drop-shadow sebagai property CSS baik itu text-shadow & box-shadow. Apalagi bila spesifikasi berdasarkan perangkat personal komputer kita jauh lebih cantik. Namun kekurangan menggunakan drop-shadow dengan bantuan filter adalah karena property CSS3 filter dengan tipe drop-shadow, sifatnya masih eksperimental. Jadi kemungkinan masih ada browser yg belum support.
Penggunaan tipe drop-shadow ini sudah sanggup membaca suatu text dalam format gambar transparan atau png. Kalau kita menggunakan property CSS text-shadow, hal ini tidak sanggup dilakukan. Dengan box-shadow masih bisa, namun yg dibaca adalah kotak gambarnya. Sedangkan dengan memakai drop-shadow bisa membaca atau memberikan efek pada text-nya eksklusif.
Untuk implementasi sintak lebih lanjut, silakan lihat contoh dibawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Filter-Drop Shadow</title> <style> body { text-align: center; } .satu { width: 200px; height: 200px; display: inline-block; filter: drop-shadow(5px 5px 10px black); } .dua { display: inline-block; filter: drop-shadow(5px 5px 20px black); } h1 { filter: drop-shadow(5px 5px 5px black); } </style> </head> <body> <h1>Hello World</h1> <img class="satu" src="img/baby.png" alt="baby" title="baby"> <img class="dua" src="img/hello.png" alt="hello" title="hello"> </body> </html>
Finally done buat catatan aku mengenai penggunaan property CSS3 filter menggunakan seluruh tipenya. Btw, buat penggunaan tipe-tipe yg ada property filter CSS3 kita sanggup pakai secara bersamaan ya.. Silakan lihat model sintaknya dibawah ini.
<style> img { filter: blur(5px) invert(1) drop-shadow(5px 5px 10px black); } </style>
Untuk contoh-contoh lain penggunaan property filter silakan download di bawah. Happy Blogging Guys 😉😊😉😊😉…...
Belum ada Komentar untuk "Property Filter Pada CSS3"
Posting Komentar