Assallamualaikum... Mungkin bagi para temen-temen yang masih terlalu asing apa itu fungsi Property filter pada css3 maka bisa tutorial ini di jadikan refrensi kecil-kecilannya... Property filter itu sendiri merupakan sebuah property pada css3 yang dapat memanipulasi warna image maupun video agar lebih artristik, seperti efek ...

Mengenal Filter CSS3

Assallamualaikum...

Mungkin bagi para temen-temen yang masih terlalu asing apa itu fungsi Property filter pada css3 maka bisa tutorial ini di jadikan refrensi kecil-kecilannya...

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 ( maaf nyebut merek.. :-) ), 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 css yang sudah saya sertakan...

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 sini...

.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> didokumen HTML anda...

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>&nbsp;</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>&nbsp;</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>

Atau untuk demonya seperti dibawah ini...

Sekian tutorial dari saya, sampai jumpa pada tutorial selanjutnya dari saya...

Stay coding dan don’t afraid about debuging...
#css3
DOWNLOAD PDF

About Author

Mohammad Nur Huda

Masih menjadi newbie di sela-sela orang penting, mencoba dan berharap dapat sebagaian ilmu dari mereka . . . :-)

Comment & Discussions

    Please LOGIN before if you want to give the comment.