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 bisa gunakan untuk memberikan efek mengaburkan atau remang-remang. Nilainya berisi angka 0 sampai nilai tidak terbatas dengan satuan pixel ( px ).
Type blur ini sama dengan type blur yang ada pada aplikasi photosop yaitu Gaussian Blur. Kita bisa pilih filter dibagian menu bar, pilih blur, dan kemudian pilih gaussian blur. Nilai yang bisa digunakan pada CSS3 tidak ada batasannya. Namun dalam aplikasi photoshop ini, nilainya dari 0,1px- 250px. Semakin besar angkanya maka gambarnya akan semakin blur dan bahkan tidak kelihatan. Slidernya juga akan bergerak ke arah kanan. Untuk cara penggunaan lebih lanjut pada 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 untuk memberikan dan menampilkan efek yang berbeda dari gambar aslinya. Nilai tipe filter contrast ini menggunakan angka ataupun dengan nilai satuan persentase ( % ). Nilai default dari tipe contrast yaitu 1, yang nilainya sama dengan 100%. Kita bisa menggunakan angka 0, 1, 2, 2.4, 3, 3.5 , 4, 5, ... dan tak terhingga. Atau kita juga bisa menggunakan nilai 10%, 20%, 100%, 110%, 200%, 270%, 300%, 400%, 500%, ... dan tak terhingga. Semakin besar nilainya, maka akan semakin kontras, 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 adalah tipe filter yang berfungsi untuk memberikan efek ke abu-abuan. Efek dari Tipe filter grayscale kebalikan dari tipe saturate. Nilai dari tipe filter grayscale ini menggunakan angka atau persentase ( % ). Kita bisa menggunakan angka 0, 1, 2,3, 4, 5, ... dan tak terhingga atau kita juga bisa menggunakan persentase seperti 8%, 10%, 20%, 30%, 50%, 100%, 200%, 300%, 500%,... dan tak terhingga. Nilai 1 sama dengan nilai 100%. Apabila nilai default dari tipe filter grayscale suatu gambar adalah, 0 artinya tidak ada efek grayscale sama sekali. Maka dari itu semakin nilainya mendekati 100% atau 1, dan lebih besar dari nilai tersebut, maka yang terjadi adalah efek ke abu-abuan. Sedangkan semakin kecilnya nilainya dan mendekati nilai 0% maka intensitas warna sesungguhnya akan semakin kelihatan.
<style>
}
img {
filter: grayscale(1);
}
</style>
f. Sepia
Type filter sepia ini akan memberikan efek sama seperty grayscale, namun efek grayscale-nya mengarah ke arah warna coklat tua kekuning-kuningan. Kita bisa menggunakan nilainya dengan angka ataupun satuan persentase ( % ). Kita bisa menggunakan 0, 0.8, 1, 2, 3, 3.5, 5, 6, ... dan tak terhingga. Atau kita juga bisa menggunakan 10%, 20%, 50%, 100%, 200%, 250%, 300%, 400%, 500%, ... dan tak terhingga. Apabila kita menggunakan nilai yang lebih besar dari 0% dan mendekati 100% atau 1, dan lebih besar dari nilai tersebut maka efek sepia akan semakin kelihatan, sedangkan apabila kita menggunakan nilai yang lebih kecil dan mendekati nilai 0% maka akan semakin menunjukkan intensitas warna yang sesungguhnya atau tidak ada efek 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 aplikasi photoshop untuk 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 juga langsung menentukan nilainya pada kotak nilainya. Untuk cara menggunakan lebih lanjut pada CSS3 silakan lihat sintak dibawahnya.
<style>
img {
filter: hue-rotate(90deg);
}
</style>
h. Invert
Type filter invert berfungsi untuk memberikan efek seperti negatif film. Nilainya bisa menggunakan baik angka dan persentase ( % ). Nilai default dari sebuah gambar adalah 0, yang artinya tidak ada efek invert sama sekali. Kita bisa menggunakan nilai 0, 1, 1.1, 2, 2.5, 3, 4, 5, ... dan tak terhingga. Atau kita juga bisa menggunakan nilai dalam persentase seperti 10%, 20%, 40%, 80%, 100%, 250%, 300%, 400%, ... dan tak terhingga. Apabila nilai yang diberikan lebih besar dari 0 atau mendekati nilai 100% ( 1 ), dan lebih besar dari nilai 100% ( 1 ), maka efek invertnya akan makin kelihatan. Sedangkan apabila nilai yang diberikan lebih kecil dan mendekati 0, maka efek invertnya semakin tidak ada.
<style>
img {
filter: invert(1.1);
}
</style>
i. Opacity
Salah satu tipe filter pada CSS3 adalah opacity. Opacity sendiri adalah salah satu property yang ada pada CSS. Jadi kita bisa menggunakan opacity, baik sebagai value property filter atau menggunakan opacity sebagai property CSS sendiri. Nilai default dari opacity adalah 1 yang nilainya sama dengan 100%. Kita bisa menggunakan nilai 0, 0.1, 0.2, 0.4, 0.6, 0.8, 1 atau kita bisa menggunakan persentase 10%, 20%, 30%, 50%, 70%, 90%, 100%.
Opacity dengan menggunakan bantuan property CSS3 filter atau dengan yang menggunakan opacity sebagai property yang berdiri sendiri hasilnya sama saja. Dibalik layar perubahan kedua proses tersebut adalah proses matematika. Namun dengan menggunakan opacity dengan bantuan property CSS3 filter, perubahan yang terjadi dengan menggunakan bantuan hardware perangkat atau yang disebut hardware acceleration. Sedangkan apabila kita menggunakan opacity sebagai property CSS perubahan yang terjadi menggunakan kemampuan browser. Sehingga menggunakan opacity dengan bantuan filter, prosesnya jauh lebih cepat dibanding dengan menggunakan opacity sebagai property CSS. Apalagi kalau spesifikasi dari perangkat komputer kita jauh lebih bagus. Namun kekurangan menggunakan opacity dengan bantuan filter adalah karena 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 juga dapat dipakai sebagai property CSS yang bisa berdiri sendiri baik dengan menggunakan property CSS text-shadow dan box-shadow, sama seperti tipe property filter dengan menggunakan opacity. Penggunaan drop-shadow bisa digunakan baik untuk text atau gambar. Sedangkan kalau digunakan sebagai property yang berdiri sendiri, maka untuk text kita bisa gunakan property CSS text-shadow, sedangkan untuk gambar kita bisa gunakan box-shadow.
Untuk nilai yang digunakan pada tipe filter drop-shadow sama dengan nilai yang digunakan pada penggunaan text shadow dan box shadow. Nilai yang diperlukan untuk menggunakan tipe property filter dengan jenis drop-shadow membutuhkan x-offset, y-offset, blur, dan warna.
Drop-shadow dengan menggunakan bantuan property CSS3 filter atau dengan yang menggunakan text-shadow dan box-shadow sebagai property yang berdiri sendiri hasilnya sama saja. Dibalik layar perubahan kedua proses tersebut adalah proses matematika. Namun dengan menggunakan drop-shadow dengan bantuan property CSS3 filter, perubahan yang terjadi dengan menggunakan bantuan hardware perangkat atau yang disebut hardware acceleration. Sedangkan apabila kita menggunakan drop-shadow sebagai property CSS perubahan yang terjadi menggunakan kemampuan browser. Sehingga menggunakan drop-shadow dengan bantuan filter, prosesnya jauh lebih cepat dibanding dengan menggunakan drop-shadow sebagai property CSS baik itu text-shadow dan box-shadow. Apalagi kalau spesifikasi dari perangkat komputer kita jauh lebih bagus. 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 yang belum support.
Penggunaan tipe drop-shadow ini sudah bisa membaca suatu text dalam format gambar transparan atau png. Kalau kita menggunakan property CSS text-shadow, hal ini tidak bisa dilakukan. Dengan box-shadow masih bisa, namun yang dibaca adalah kotak gambarnya. Sedangkan dengan menggunakan drop-shadow bisa membaca atau memberikan efek pada text-nya langsung.
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 untuk catatan saya mengenai penggunaan property CSS3 filter dengan semua tipenya. Btw, untuk penggunaan tipe-tipe yang ada property filter CSS3 kita bisa gunakan secara bersamaan ya.. silakan lihat contoh 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 😉😊😉😊😉…...
Post a Comment for "Property Filter Pada CSS3"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan