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>
