Cara Membuat Efek Black and White Pada Image

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

DI bawah ini kita akan mempelajari cara membuat efek black and white pada Image/Gambar.

Black and White Image

Di bawah ini adalah contoh gambar Black and White Image, kita bisa gunakan properti filter CSS grayscale untuk mengubah gambar menjadi hitam dan putih.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img { display: block; margin-bottom: 10px; width: 500px;}
.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
</style>
</head>
<body>

<p>Lihatlah Kedua perbedaan gambar berikut ini:</p> <br>
  
Gambar Original
<img src="https://dosenit.com/wp-content/uploads/2020/10/1.jpg" alt="komputer" width="300" height="300">
Gambar menggunakan efek grayscale
<img class="grayscale" src="https://dosenit.com/wp-content/uploads/2020/10/1.jpg">

<p> <strong> Catatan: </strong> Properti filter tidak didukung di Internet Explorer, Edge 12, atau Safari 5.1 dan yang lebih lama. </p>

</body>
</html>

Contoh Grayscale
Ubah warna semua gambar menjadi hitam dan putih (100% abu-abu):

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
</style>
</head>
<body>

<p>Convert the image to grayscale:</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/1.jpg" alt="komputer" width="300" height="300">

<p> <strong> Catatan: </strong> Properti filter tidak didukung di Internet Explorer, Edge 12, atau Safari 5.1 dan yang lebih lama. </p>

</body>
</html>