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=\'https://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 **

Artikel Lainnya

  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit
  • 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.
  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.

Kiriman terbaru