How To

Cara Menambahkan Efek Pada Gambar

Di bawah ini kita akan mempelajari cara menambahkan efek pada gambar dengan menggunakan filter dari CSS.

Filter Gambar

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Contoh Filter Gambar Menggunakan CSS</title>
<style>
img { display: block; margin-bottom: 10px; width: 500px;}
.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
.saturate {
  -webkit-filter: saturate(100%);
  filter: saturate(100%);
}
.hue-rotate {
  -webkit-filter: hue-rotate(100%);
  filter: hue-rotate(100%);
}
.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.opacity {
  -webkit-filter: opacity(100%);
  filter: opacity(100%);
}
.brightness {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}
.contrast {
  -webkit-filter: contrast(100%);
  filter: contrast(100%);
}
.blur {
  -webkit-filter: blur(100%);
  filter: blur(100%);
}
.drop-shadow {
  -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
}
</style>
</head>
<body>
<h1>Contoh Filter Gambar Menggunakan CSS </h1>
1. Burung Hantu Dengan Efek Grayscale
<img class="grayscale" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
2. Burung Hantu Dengan Efek Sepia
<img class="sepia" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
3. Burung Hantu Dengan Efek Saturate
<img class="saturate" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
4. Burung Hantu Dengan Efek Hue-Rotate
<img class="hue-rotate" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
5. Burung Hantu Dengan Efek Invert
<img class="invert" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
6. Burung Hantu Dengan Efek Opacity
<img class="opacity" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
7. Burung Hantu Dengan Efek Brightness
<img class="brightness" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
8. Burung Hantu Dengan Efek Contrast
<img class="contrast" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
9. Burung Hantu Dengan Efek Blur
<img class="blur" src="https://dosenit.com/wp-content/uploads/2020/10/1720194Burung-Hantu780x390.jpg">
10 .Drop Shadow
<img class="drop-shadow" src="https://dosenit.com/wp-content/uploads/2020/11/copyright.jpg">
  <br><br>
  <p> <strong> Catatan: </strong> Properti filter tidak didukung di Internet Explorer, Edge 12, atau Safari 5.1 dan yang lebih lama. </p>
  
</body>
</html>

Filter CSS

Properti filter CSS menambahkan efek visual (seperti blur dan saturasi) ke sebuah elemen.

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

Contoh Efek 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>Gunakan filter efek grayscale pada gambar:</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" alt="Pineapple" 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>

Contoh Efek Blur
Terapkan efek blur ke semua gambar:

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

<p>Gunakan filter efek blur pada gambar:</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" alt="Pineapple" 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