Mengubah gambar ke bentuk grayscale menggunakan HTML, CSS

  • by

Grayscale membuat gambar yang sebelumnya memiliki banyak warna menjadi hanya memiliki warna kelabuan. Berikut ini cara mengubah gambar ke bentuk grayscale

Disini saya membuat folder baru bernama grey. DIfolder ini diisi 2 file yaitu index.html dan logo.png

Kemudian buat index.html. Pada index.html, gambar logo.png akan diubah menjadi grayscale 50% dan juga greyscale 100% menggunakan perintah grayscale di CSS

<!DOCTYPE html>
<html>
<head>
<style>
.img1 {
  -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);
}
.img2 {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="/grey/logo.png" alt="Sebelum" width="300" height="300">
<img id='myimg' class="img1" src="/grey/logo.png" alt="50%" width="300" height="300">


<img id='myimg' class="img2" src="/grey/logo.png" alt="100%" width="300" height="300">



</body>
</html>

Sekian semoga bermanfaat

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *