Mungkin bagi sobat blogger yang masih terlalu asing apa itu fungsi Property filter pada CSS3 mungkin tutorial ini bisa di jadikan refrensi kecil.
Property filter itu sendiri merupakan sebuah property pada CSS3 yang dapat memanipulasi warna image maupun video agar lebih artristik, seperti efek sepia dan efek saturate yang sering digunakan di kalangan photography...
Seperti layaknya website sosial media instagram, website tersebut menggunakan teknik filter pada pemberian efek fotonya namun lebih komplek script filternya...
Perlu saya ingatkan lagi tutorial ini hanya sebagai refrensi saja dan untuk pengaplikasiannya lebih rinci pada image maupun video mungkin akan saya bahas pada tutorial berikutnya.
Property filter itu sendiri merupakan sebuah property pada CSS3 yang dapat memanipulasi warna image maupun video agar lebih artristik, seperti efek sepia dan efek saturate yang sering digunakan di kalangan photography...
Seperti layaknya website sosial media instagram, website tersebut menggunakan teknik filter pada pemberian efek fotonya namun lebih komplek script filternya...
Perlu saya ingatkan lagi tutorial ini hanya sebagai refrensi saja dan untuk pengaplikasiannya lebih rinci pada image maupun video mungkin akan saya bahas pada tutorial berikutnya.
Yuk kita coba satu-persatu efek yang ada pada Property filter CSS3 ini.
Untuk mencoba filternya cukup buat image atau video dengan memberi atribut class yang sudah ada pada CSS3 yang sudah saya sertakan.
Contohnya:
Contohnya:
<img class="sepia" src="1.png"/>Atau
<video controls class="sepia"><source src="1.mp4"></video>Untuk macam-macam filternya sudah saya buat bentuk cssnya dibawah ini
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
filter: sepia(1);
}
.saturate {
-webkit-filter: saturate(4);
filter: saturate(4);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.invert {
-webkit-filter: invert(.8);
filter: invert(.8);
}
.opacity {
-webkit-filter: opacity(.5);
filter: opacity(.5);
}
.brightness {
-webkit-filter: brightness(.5);
filter: brightness(.5);
}
.contrast {
-webkit-filter: contrast(3);
filter: contrast(3);
}
.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.tint {
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
.gabungan {
-webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
filter: contrast(1.4) saturate(1.8) sepia(.6);
}Jadi tinggal anda sisipkan pada tag
<style></style>Contoh penggunaan pada image dengan asumsi bahwa kita sudah menyiapkan file image ataupun video yang akan kita jadikan bahan experiment
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
filter: sepia(1);
}
.saturate {
-webkit-filter: saturate(4);
filter: saturate(4);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.invert {
-webkit-filter: invert(.8);
filter: invert(.8);
}
.opacity {
-webkit-filter: opacity(.5);
filter: opacity(.5);
}
.brightness {
-webkit-filter: brightness(.5);
filter: brightness(.5);
}
.contrast {
-webkit-filter: contrast(3);
filter: contrast(3);
}
.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.tint {
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
.gabungan {
-webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
filter: contrast(1.4) saturate(1.8) sepia(.6);
}
</style>
</head>
<body>
<img class="sepia" src="1.png"/>
</body>
</html>Atau kita terapkan pada video
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
filter: sepia(1);
}
.saturate {
-webkit-filter: saturate(4);
filter: saturate(4);
}
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.invert {
-webkit-filter: invert(.8);
filter: invert(.8);
}
.opacity {
-webkit-filter: opacity(.5);
filter: opacity(.5);
}
.brightness {
-webkit-filter: brightness(.5);
filter: brightness(.5);
}
.contrast {
-webkit-filter: contrast(3);
filter: contrast(3);
}
.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.tint {
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
.gabungan {
-webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
filter: contrast(1.4) saturate(1.8) sepia(.6);
}
</style>
</head>
<body>
<video controls class="sepia"><source src="1.mp4"></video>
</body>
</html>Demikian tutorial tentang Mengenal Pengertian Dari Filter CSS3 semoga dapat bermanfaat
EmoticonEmoticon