Filter Gambar Menggunakan CSS

5/5 (38)

Filter Gambar Menggunakan CSS – Filter CSS adalah salah satu keunggulan CSS yang dapat digunakan penulis untuk memberi berbagai efek visual (seperti filter Photoshop tetapi untuk browser). Properti filter CSS menyediakan akses ke efek seperti blur atau color shifting warna pada elemen sebelum elemen ditampilkan. Filter biasanya digunakan untuk menyesuaikan rendering gambar, latar belakang, atau border.

Setelah sebelumnya kita membahas tentang Google Web Designer, pada artikel kali ini kita akan mencoba Filter Gambar Menggunakan CSS. Mari kita lihat cara penulisan nya. Syntax penulisan nya sebagai berikut:

.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}

Jenis Filter pada CSS

Jenis – jenis filter pada CSS adalah sebagai berikut:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – Untuk menerapkan filter SVG.

Contoh penggunaan filter tunggal dan beberapa filter sekaligus:

/* Penggunaan filter tunggal */
.blur-me {
  filter: blur(20px);
}
/* Penggunaan beberapa filter sekaligus */
.do-more-things {
  filter: blur(20px) grayscale(20%);
}

Untuk memberi Filter Gambar Menggunakan CSS, kita menetapkan nilai untuk salah satu fungsi berikut yang tercantum di atas. Jika nilainya tidak valid, fungsi me-return “none.” Kecuali, fungsi-fungsi yang mengambil nilai yang dinyatakan dengan tanda persen (seperti dalam 34%) juga menerima nilai yang dinyatakan sebagai desimal (seperti dalam 0,34).

Tentunya setiap properti mempunyai fungsi masing – masing. Mari kita pelajari dulu fungsi dari properti – properti tersebut.

Grayscale

Mengkonversi gambar input ke grayscale. Nilai “amount” menentukan proporsi konversi. Nilai 100% sepenuhnya grayscale. Nilai 0% tidak akan mengubah gambar. Nilai antara 0% dan 100% adalah pengganda linier pada efek. Jika parameter “amount” hilang, nilai 100% digunakan. Nilai negatif tidak diizinkan.

Sepia

Mengkonversi gambar input ke sepia. Nilai “amount” menentukan proporsi konversi. Nilai 100% sepenuhnya sepia. Nilai 0 tidak akan mengubah gambar. Nilai antara 0% dan 100% adalah pengganda linier pada efek. Jika parameter “amount” hilang, nilai 100% digunakan. Nilai negatif tidak diizinkan.

Hue-Rotate

Menerapkan rotasi hue pada gambar input. Nilai “angle” mendefinisikan jumlah derajat di sekitar lingkaran warna sampel input yang akan disesuaikan. Nilai 0deg tidak akan mengubah apa – apa. Jika parameter “angle” hilang, nilai 0deg digunakan. Nilai maksimumnya adalah 360deg.

Invert

Membalikkan sampel dalam gambar input. Nilai “amount” menentukan proporsi konversi. Nilai 100% benar-benar terbalik. Nilai 0% tidak akan mengubah apa-apa. Nilai antara 0% dan 100% adalah pengganda linier pada efek. Jika parameter “amount” hilang, nilai 100% digunakan. Nilai negatif tidak diizinkan.

Opacity

Menerapkan transparansi ke sampel di gambar input. Nilai “amount” menentukan proporsi konversi. Nilai 0% benar-benar transparan. Nilai 100% tidak akan mengubah apa-apa. Nilai antara 0% dan 100% adalah pengganda linier pada efek. Ini sama dengan mengalikan sampel gambar dengan jumlah. Jika parameter “amount” hilang, maka nilai 100% yang akan digunakan. Nilai negatif tidak diizinkan.

Brightness

Menerapkan pengganda linear untuk memasukkan gambar, membuatnya tampak lebih atau kurang terang. Nilai 0% akan membuat gambar kalian benar-benar hitam. Nilai 100% tidak akan mengubah apa-apa. Nilai lain adalah pengganda linier pada efek. Nilai dari jumlah lebih dari 100% diizinkan, memberikan hasil yang lebih cerah. Jika parameter “amount” hilang, maka nilai 100% yang akan digunakan.

Contrast

Menyesuaikan kontras input. Nilai 0% akan membuat gambar yang benar-benar hitam. Nilai 100% tidak mengubah apa-apa. Value lebih dari 100% diizinkan, memberikan hasil dengan kontras yang lebih sedikit. Jika parameter “amount” hilang, maka nilai 100% yang akan digunakan.

Blur

Menerapkan blur ke gambar input. Nilai ‘radius’ menentukan nilai standar ke fungsi Gaussian, atau berapa banyak piksel di layar yang berpadu satu sama lain, sehingga nilai yang lebih besar akan membuat lebih buram. Jika tidak ada parameter yang disediakan, maka nilai 0 yang akan digunakan. Parameter ditetapkan sebagai panjang CSS, tetapi tidak menerima nilai persentase.

Drop Shadow

Menerapkan efek drop shadow ke gambar input. Drop shadow secara efektif adalah versi offset yang kabur dari gambar input yang digambar dalam warna tertentu, yang dikomposisikan di bawah gambar. Fungsi ini menerima parameter tipe, dengan pengecualian bahwa kata kunci ‘inset’ tidak diperbolehkan.

Properti ini mirip dengan properti box-shadow; perbedaannya adalah dengan filter, beberapa browser menyediakan akselerasi perangkat keras untuk kinerja yang lebih baik.

Filter Gambar Menggunakan CSS

Okee, sekarang saat nya kita mempraktekkan memberi filter gambar menggunakan CSS. Buat file HTML, lalu pastekan kode berikut:

<html>
<head>
 <title>Filter Gambar Menggunakan CSS</title>
<style>
img { display: block; margin-bottom: 10px; width: 500px;}

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.sepia {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}
.saturate {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}
.hue-rotate {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
.invert {
  -webkit-filter: invert(.8);
  filter: invert(.8);
}
.opacity {
  -webkit-filter: opacity(.2);
  filter: opacity(.2);
}
.brightness {
  -webkit-filter: brightness(3);
  filter: brightness(3);
}
.contrast {
  -webkit-filter: contrast(4);
  filter: contrast(4);
}
.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.drop-shadow {
  -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
}
</style>
</head>
<body>
<h1>Filter Gambar Menggunakan CSS | CODELATTE</h1>
Grayscale
<img class="grayscale" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Sepia
<img class="sepia" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Saturate
<img class="saturate" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Hue-Rotate
<img class="hue-rotate" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Invert
<img class="invert" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Opacity
<img class="opacity" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Brightness
<img class="brightness" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Contrast
<img class="contrast" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Blur
<img class="blur" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
Drop Shadow
<img class="drop-shadow" src="https://codelatte.org/wp-content/uploads/2018/08/fix.png">
</body>
</html>

Untuk demo nya, bisa dilihat di bawah ini.

See the Pen Filter Gambar Menggunakan CSS by Abay (@abaykan) on CodePen.

Sekian artikel tentang Filter Gambar Menggunakan CSS. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *