Tutorial Belajar CSS Bagian 29 : Cara Menggunakan Filter di CSS

0
1041

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.

filter: blur () | brightness () | contrast () | drop-shadow () | grayscale () | hue-rotate () | invert () | opacity () | sepia () | saturate () | url ();

Peringatan: Efek filter CSS3 saat ini tidak didukung di semua versi Internet Explorer. Versi IE yang lebih lama mendukung properti filter non-standar untuk membuat efek seperti opacity, tetapi fitur ini sudah tidak digunakan lagi.

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>
Catatan: Fungsi filter yang mengambil nilai yang dinyatakan dengan tanda persen (misalnya 75%) juga menerima nilai yang dinyatakan sebagai desimal (seperti, 0,75). Jika nilainya tidak valid, fungsi tidak akan memberikan efek filter apapun.

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>
Catatan: Parameter pertama dan kedua dari fungsi drop-shadow () menentukan offset horizontal dan vertikal bayangan masing-masing, sedangkan parameter ketiga menentukan radius blur dan parameter terakhir menentukan warna bayangan, seperti properti box-shadow , dengan satu pengecualian, kata kunci ‘inset’ tidak diperbolehkan.

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>
Saran: Dalam istilah fotografi, sepia toning adalah perlakuan khusus untuk memberikan foto hitam-putih denan tekanan yang lebih hangat (coklat kemerahan) untuk meningkatkan kualitas arsipnya.

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>
Catatan: Fungsi url () menentukan referensi filter ke elemen filter tertentu. Misalnya, url (commonfilters.svg # foo). Jika referensi filter ke elemen yang tidak ada atau elemen yang direferensikan bukan elemen filter, seluruh rantai filter akan diabaikan. Tidak ada filter yang diterapkan ke elemen.

Semoga tutorial ini bisa membantu Anda untuk belajar cara menggunakan filter di CSS.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.