Dalam konteks CSS, "filter" adalah properti yang digunakan untuk memberikan efek visual pada elemen HTML. Filter dapat digunakan untuk mengubah tampilan gambar, video, teks, atau elemen HTML lainnya. Filter ini mirip dengan filter yang dapat ditemui dalam perangkat lunak pengeditan gambar dan video. kumpulan filter memungkinkan Anda memberikan efek visual kepada elemen HTML, seperti perubahan warna, kecerahan, kontras, dan lainnya. Filter memungkinkan Anda untuk memanipulasi tampilan elemen HTML menggunakan efek grafis.
Contoh Filter Gambar HTML dan CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Filter CSS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.image-container {
width: 200px;
margin: 10px;
text-align: center;
}
img {
max-width: 100%;
margin-bottom: 10px;
}
/* Filter */
.filter-item {
margin-bottom: 20px;
}
.filter-item h3 {
margin-bottom: 5px;
}
.grayscale {
filter: grayscale(100%);
}
.blur {
filter: blur(5px);
}
.brightness {
filter: brightness(150%);
}
.contrast {
filter: contrast(200%);
}
.hue-rotate {
filter: hue-rotate(90deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(200%);
}
.sepia {
filter: sepia(100%);
}
.drop-shadow {
filter: drop-shadow(8px 8px 10px gray);
}
.grayscale-contrast {
filter: grayscale(100%) contrast(200%);
}
.blur-brightness {
filter: blur(5px) brightness(150%);
}
.hue-invert {
filter: hue-rotate(90deg) invert(100%);
}
.saturate-sepia {
filter: saturate(200%) sepia(100%);
}
.blur-contrast {
filter: blur(5px) contrast(150%);
}
.brightness-contrast {
filter: brightness(150%) contrast(200%);
}
.blur-grayscale {
filter: blur(5px) grayscale(100%);
}
.hue-opacity {
filter: hue-rotate(90deg) opacity(50%);
}
.saturate-invert {
filter: saturate(200%) invert(100%);
}
.brightness-invert {
filter: brightness(150%) invert(100%);
}
</style>
</head>
<body>
<div class="container">
<div class="image-container filter-item">
<h3>Grayscale</h3>
<img src="bg.jpg" alt="Gambar dengan Grayscale" class="grayscale">
</div>
<div class="image-container filter-item">
<h3>Blur</h3>
<img src="bg.jpg" alt="Gambar dengan Blur" class="blur">
</div>
<div class="image-container filter-item">
<h3>Brightness</h3>
<img src="bg.jpg" alt="Gambar dengan Brightness" class="brightness">
</div>
<div class="image-container filter-item">
<h3>Contrast</h3>
<img src="bg.jpg" alt="Gambar dengan Contrast" class="contrast">
</div>
<div class="image-container filter-item">
<h3>Hue Rotate</h3>
<img src="bg.jpg" alt="Gambar dengan Hue Rotate" class="hue-rotate">
</div>
<div class="image-container filter-item">
<h3>Invert</h3>
<img src="bg.jpg" alt="Gambar dengan Invert" class="invert">
</div>
<div class="image-container filter-item">
<h3>Opacity</h3>
<img src="bg.jpg" alt="Gambar dengan Opacity" class="opacity">
</div>
<div class="image-container filter-item">
<h3>Saturate</h3>
<img src="bg.jpg" alt="Gambar dengan Saturate" class="saturate">
</div>
<div class="image-container filter-item">
<h3>Sepia</h3>
<img src="bg.jpg" alt="Gambar dengan Sepia" class="sepia">
</div>
<div class="image-container filter-item">
<h3>Drop Shadow</h3>
<img src="bg.jpg" alt="Gambar dengan Drop Shadow" class="drop-shadow">
</div>
<div class="image-container filter-item">
<h3>Grayscale + Contrast</h3>
<img src="bg.jpg" alt="Gambar dengan Grayscale + Contrast" class="grayscale-contrast">
</div>
<div class="image-container filter-item">
<h3>Blur + Brightness</h3>
<img src="bg.jpg" alt="Gambar dengan Blur + Brightness" class="blur-brightness">
</div>
<div class="image-container filter-item">
<h3>Hue Rotate + Invert</h3>
<img src="bg.jpg" alt="Gambar dengan Hue Rotate + Invert" class="hue-invert">
</div>
<div class="image-container filter-item">
<h3>Saturate + Sepia</h3>
<img src="bg.jpg" alt="Gambar dengan Saturate + Sepia" class="saturate-sepia">
</div>
<div class="image-container filter-item">
<h3>Blur + Contrast</h3>
<img src="bg.jpg" alt="Gambar dengan Blur + Contrast" class="blur-contrast">
</div>
<div class="image-container filter-item">
<h3>Brightness + Contrast</h3>
<img src="bg.jpg" alt="Gambar dengan Brightness + Contrast" class="brightness-contrast">
</div>
<div class="image-container filter-item">
<h3>Blur + Grayscale</h3>
<img src="bg.jpg" alt="Gambar dengan Blur + Grayscale" class="blur-grayscale">
</div>
<div class="image-container filter-item">
<h3>Hue Rotate + Opacity</h3>
<img src="bg.jpg" alt="Gambar dengan Hue Rotate + Opacity" class="hue-opacity">
</div>
<div class="image-container filter-item">
<h3>Saturate + Invert</h3>
<img src="bg.jpg" alt="Gambar dengan Saturate + Invert" class="saturate-invert">
</div>
<div class="image-container filter-item">
<h3>Brightness + Invert</h3>
<img src="bg.jpg" alt="Gambar dengan Brightness + Invert" class="brightness-invert">
</div>
</div>
</body>
</html>
Contoh Filter Video HTML dan CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Filter CSS untuk Video</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.video-container {
width: 320px;
margin: 10px;
text-align: center;
}
video {
max-width: 100%;
margin-bottom: 10px;
}
/* Filter */
.filter-item {
margin-bottom: 20px;
}
.filter-item h3 {
margin-bottom: 5px;
}
/* Daftar filter */
.grayscale {
filter: grayscale(100%);
}
.blur {
filter: blur(5px);
}
.brightness {
filter: brightness(150%);
}
.contrast {
filter: contrast(200%);
}
.hue-rotate {
filter: hue-rotate(90deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(200%);
}
.sepia {
filter: sepia(100%);
}
.drop-shadow {
filter: drop-shadow(8px 8px 10px gray);
}
.grayscale-contrast {
filter: grayscale(100%) contrast(200%);
}
.blur-brightness {
filter: blur(5px) brightness(150%);
}
.hue-invert {
filter: hue-rotate(90deg) invert(100%);
}
.saturate-sepia {
filter: saturate(200%) sepia(100%);
}
.blur-contrast {
filter: blur(5px) contrast(150%);
}
.brightness-contrast {
filter: brightness(150%) contrast(200%);
}
.blur-grayscale {
filter: blur(5px) grayscale(100%);
}
.hue-opacity {
filter: hue-rotate(90deg) opacity(50%);
}
.saturate-invert {
filter: saturate(200%) invert(100%);
}
.brightness-invert {
filter: brightness(150%) invert(100%);
}
</style>
</head>
<body>
<div class="container">
<!-- Video 1-10 -->
<!-- Video 1 -->
<div class="video-container filter-item">
<h3>Grayscale</h3>
<video controls class="grayscale">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 2 -->
<div class="video-container filter-item">
<h3>Blur</h3>
<video controls class="blur">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 3 -->
<div class="video-container filter-item">
<h3>Brightness</h3>
<video controls class="brightness">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 4 -->
<div class="video-container filter-item">
<h3>Contrast</h3>
<video controls class="contrast">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 5 -->
<div class="video-container filter-item">
<h3>Hue Rotate</h3>
<video controls class="hue-rotate">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 6 -->
<div class="video-container filter-item">
<h3>Invert</h3>
<video controls class="invert">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 7 -->
<div class="video-container filter-item">
<h3>Opacity</h3>
<video controls class="opacity">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 8 -->
<div class="video-container filter-item">
<h3>Saturate</h3>
<video controls class="saturate">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 9 -->
<div class="video-container filter-item">
<h3>Sepia</h3>
<video controls class="sepia">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 10 -->
<div class="video-container filter-item">
<h3>Drop Shadow</h3>
<video controls class="drop-shadow">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 11-20 -->
<!-- Video 11 -->
<div class="video-container filter-item">
<h3>Grayscale + Contrast</h3>
<video controls class="grayscale-contrast">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 12 -->
<div class="video-container filter-item">
<h3>Blur + Brightness</h3>
<video controls class="blur-brightness">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 13 -->
<div class="video-container filter-item">
<h3>Hue Rotate + Invert</h3>
<video controls class="hue-invert">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 14 -->
<div class="video-container filter-item">
<h3>Saturate + Sepia</h3>
<video controls class="saturate-sepia">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 15 -->
<div class="video-container filter-item">
<h3>Blur + Contrast</h3>
<video controls class="blur-contrast">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 16 -->
<div class="video-container filter-item">
<h3>Brightness + Contrast</h3>
<video controls class="brightness-contrast">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 17 -->
<div class="video-container filter-item">
<h3>Blur + Grayscale</h3>
<video controls class="blur-grayscale">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 18 -->
<div class="video-container filter-item">
<h3>Hue Rotate + Opacity</h3>
<video controls class="hue-opacity">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 19 -->
<div class="video-container filter-item">
<h3>Saturate + Invert</h3>
<video controls class="saturate-invert">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Video 20 -->
<div class="video-container filter-item">
<h3>Brightness + Invert</h3>
<video controls class="brightness-invert">
<source src="hero.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</body>
</html>
Dalam contoh ini, kita menggunakan beberapa filter yang berbeda pada gambar yang sama, dan menampilkannya dalam layout grid yang sederhana untuk visualisasi efek filter.
Anda dapat menggunakan contoh ini sebagai dasar untuk bereksperimen dengan properti filter CSS dan menyesuaikannya dengan kebutuhan desain Anda. Misalnya, Anda dapat mencoba kombinasi beberapa filter untuk mencapai efek yang lebih kompleks atau membuat animasi dengan CSS.
