Efek gambar grayscale dengan css

efek gambar grayscale dengan css

Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Untuk membuat gambar grayscale/hitam putih sebenarnya sangat mudah kita bisa lakukan dengan mengedit gambarnya dengan aplikasi grafis. Tapi seandainya medianya web/blog dan gambarnya banyak tentunya akan sedikit merepotkan karena harus mengeditnya satu persatu. Oleh karena itu kita perlu metode yang lebih sederhana dan praktis bisa mengubah semuanya saat ditampilkan. Caranya yaitu dengan css. Saya sudah coba metode ini pada beberapa browser (Firefox, Chrome dan IE) dan semuanya bisa berjalan normal.

Lihat gambar berwarna berikut :

contoh efek gambar

Lihat hasil perubahannya berikut :

contoh efek gambar

Gambar diatas adalah gambar yang sama dengan sebelumnya tapi ditambahkan perintah css untuk mengubahnya menjadi grayscale/hitam putih. Coba arahkan korsur mouse anda melewati gambarnya, maka gambar bisa dikembalikan ke warna aslinya.

Caranya :

Tambahkan gambar dengan kode seperti berikut :

<div class="contoh-efek">
  <img src="nama-file-gambar.jpg" />
</div>

Perintah div difungsikan untuk memperkecil ruang kerja efek sehingga yang berubah warna hanya gambar yang berada dalam area div itu saja.

Kemudian sisipkan css berikut pada bagian <head>

<style type="text/css">
.contoh-efek img
{
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
   filter: gray; 
   -webkit-filter: grayscale(100%);
}
.contoh-efek img:hover
{
   filter:none;
   -webkit-filter:grayscale(0%);
}
</style>

Dengan kode diatas kita mengaktifkan efek hitam putih hanya pada gambar yang berada dalam class contoh-efek, dan mengembalikan warnanya pada saat korsur melalui gambarnya.

Semoga bermanfaat dan menambah inspirasi anda. Selamat mencoba.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.
  • 6 Cara penulisan warna dalam css
    Cara penulisan warna dalam css untuk keperluan halaman web bisa kita lakukan dengan 6 cara. Semuanya mengarah pada penggunaan warna yang sama tapi ditulis dengan cara berbeda. Berikut ini saya akan berbagi tentang beberapa metode penulisan warna dalam css yang bisa anda gunakan.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.

Kiriman terbaru