Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 28 : Cara Mengatur Box Sizing di CSS, selanjutnya kita akan belajar cara menggunakan filter di CSS.
Dalam tutorial ini kita akan membahas tentang efek filter yang diperkenalkan di CSS3 yang dapat Anda gunakan untuk memberikan efek visual seperti blur, menyeimbangkan kontras atau kecerahan, saturasi warna, dll.
Efek filter dapat diterapkan ke elemen menggunakan properti filter CSS3, yang menerima satu atau lebih fungsi filter dalam urutan yang disediakan.
Efek Blur
Photoshop seperti efek Blur Gaussian dapat diterapkan ke elemen menggunakan fungsi blur (). Fungsi ini menerima nilai panjang CSS sebagai parameter yang menentukan radius blur.
Nilai yang lebih besar akan membuat gambar menjadi lebih buram. Jika tidak ada parameter yang diberikan, maka gunakan nilai 0.
<style>
img.blur {
-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
filter: blur(2px);
}
img.extra-blur {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Mengatur Kecerahan Gambar
Fungsi brightness () dapat digunakan untuk mengatur kecerahan gambar. Nilai 0% akan menghasilkan gambar yang benar-benar hitam, nilai 100% atau 1 membuat gambar tidak berubah. Nilai lainnya adalah pengganda linier pada efeknya.
Anda juga dapat mengatur kecerahan lebih tinggi dari 100% yang menghasilkan gambar lebih cerah. Jika parameter jumlah hilang, biasanya digunakan nilai 1.
Nilai negatif tidak diperbolehkan.
<style>
img.bright {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
img.dark {
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Menyesuaikan Kontras Gambar
Fungsi contrast () digunakan untuk mengatur kontras pada gambar. Nilai 0% akan menghasilkan gambar yang benar-benar hitam, nilai 100% atau 1 membuat gambar tidak berubah.
Nilai di atas 100% juga diperbolehkan yang memberikan hasil dengan kontras yang lebih sedikit. Jika parameter jumlah hilang atau dihilangkan, gunakan nilai 1.
<style>
img.bright {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
img.dim {
-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
filter: contrast(50%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Menambahkan Drop Shadow ke Gambar
Anda dapat menggunakan fungsi drop-shadow () untuk menerapkan efek drop shadow ke gambar seperti Photoshop. Fungsi ini mirip dengan properti box-shadow.
<style>
img.shadow {
-webkit-filter: drop-shadow(2px 2px 4px orange); /* Chrome, Safari, Opera */
filter: drop-shadow(2px 2px 4px orange);
}
img.shadow-large {
-webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
filter: drop-shadow(4px 4px 10px orange);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Mengonversi Gambar ke Skala Abu-abu
Gambar dapat diubah menjadi skala abu-abu menggunakan fungsi grayscale (). Nilai 100% sepenuhnya abu-abu. Nilai 0% membuat gambar tidak berubah. Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter jumlah hilang, gunakan nilai 0.
<style>
img.complete-gray {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Menerapkan Hue Rotate pada Gambar
Fungsi hue-rotate () menerapkan rotasi hue pada gambar. Parameter yang diteruskan menentukan jumlah derajat di sekitar lingkaran warna yang akan disesuaikan sampel gambar. Nilai 0 deg membuat gambar tidak berubah. Jika parameter ‘angle’ hilang, nilai 0 deg digunakan. Tidak ada nilai maksimum, efek dari nilai di atas 360 derajat.
<style>
img.hue-normal {
-webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
filter: hue-rotate(150deg);
}
img.hue-wrap {
-webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
filter: hue-rotate(480deg);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Efek Balik
Efek invert seperti Photoshop dapat diterapkan pada gambar dengan fungsi invert (). Nilai 100% atau 1 gambar benar-benar terbalik, nilai 0% membiarkan input tidak berubah.
Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter ‘jumlah’ tidak ada, nilai 0 digunakan. Nilai negatif tidak diperbolehkan.
<style>
img.partially-inverted {
-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
filter: invert(80%);
}
img.fully-inverted {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Menerapkan Opacity ke Gambar
Fungsi opacity () dapat digunakan untuk menerapkan transparansi pada gambar. Nilai 0% benar-benar transparan, nilai 100% atau 1 membuat gambar tidak berubah.
Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter ‘jumlah’ tidak ada, gunakan nilai 1. Fungsi ini mirip dengan properti opacity.
<style>
img.transparent {
-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
filter: opacity(80%);
}
img.highly-transparent {
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Menerapkan Efek Sepia pada Gambar
Fungsi sepia () mengubah gambar menjadi sepia. Nilai 100% atau 1 benar-benar sepia, nilai 0% membuat gambar tidak berubah.
Nilai antara 0% dan 100% adalah pengali linier pada efeknya. Jika parameter ‘jumlah’ tidak ada, gunakan nilai 0.
<style>
img.complete-sepia {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
img.partial-sepia {
-webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
filter: sepia(30%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Menyesuaikan Saturasi Gambar
Fungsi saturate () dapat digunakan untuk mengatur saturasi gambar. Nilai 0% sama sekali tidak saturate, nilai 100% membuat gambar tidak berubah.
Nilai lainnya adalah pengganda linier pada efeknya. Nilai jumlah lebih dari 100% juga diperbolehkan, memberikan hasil yang sangat jenuh. Jika parameter ‘jumlah’ tidak ada, gunakan nilai 1.
<style>
img.un-saturated {
-webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
filter: saturate(0%);
}
img.super-saturated {
-webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
filter: saturate(200%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
padding: 10px;
text-align: center;
}
</style>
Semoga tutorial ini bisa membantu Anda untuk belajar cara menggunakan filter di CSS.
