Dengan semakin berkembangnya CSS3 saat ini, membuat website semakin canggih, dan semakin nampak pintar, tentunya ini berita bagus untuk para web designer.
Kali ini kita akan membahas sedikit tentang CSS3 Filter.
Apa itu CSS3 Filter?
Filter membawa efek ke dom, dengan filter kita bisa membuat efek-efek yang biasanya kita lakukan dengan Adobe Photoshop atau software pengelola gambar lain nya ke dalam dokumen html kita, seperti gambar atau form.

Support Browser
Sayangnya saat ini hanya Chrome yang support fasilitas ini, jadi belum bisa diterlihat hasil nya jika menggunakan Firefox.
Cara Penggunaan
Pada tulisan ini kita akan mencoba beberapa efek CSS Filter yang bisa kita gunakan di untuk memberi efek pada sebuah gambar.
HTML
Pertama buat dulu struktur HTML seperti berikut ini
<div class="twd-container">
<div class="original">
<img src="dance.jpg" alt="" />
</div>
<div class="filter">
<img src="dance.jpg" alt="" />
</div>
</div>
CSS
Untuk css silahkan copy potongan script dibawah ini.
Blur

Blur
.filter img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
Grayscale

Grayscale
.filter img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
Sepia

Sepia
.filter img{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
Brightness

Brightness
.filter img{
-webkit-filter: brightness(0.3);
-moz-filter: brightness(0.3);
-o-filter: brightness(0.3);
-ms-filter: brightness(0.3);
filter: brightness(0.3);
}
Saturation

Saturation
.filter img{
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);
filter: saturate(50%);
}
Hue-Rotate

Hue-Rotate
.filter img{
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);
}
Contrast

Contrast
.filter img{
-webkit-filter: contrast(180%);
-moz-filter: contrast(180%);
-o-filter: contrast(180%);
-ms-filter: contrast(180%);
filter: contrast(180%);
}
Invert

Invert
.filter img{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}
Oke sekian artikel kali ini, semoga fitur Filter dari CSS3 ini segera selesai dan bisa diterapkan disemua browser.
Mungkin nanti kita bisa membuat web aplikasi layaknya instagram hanya dengan menggunakan CSS Filter.
Jangan lupa follow twitter kami di @tut_web
Salam Web Design Indonesia
[…] bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di […]
[…] Membuat Efek-Efek Instagram dengan CSS3 Filter […]
[…] Membuat Efek-Efek Instagram dengan CSS3 Filter […]