How To

Cara Membuat Efek Black and White Pada Image

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>


Hanifah Nurbaeti

Share
Tags: CSSHow Tohtml