Başlangıç
Konu: CSS Filtreleri
Uyumluluk: Webkit Nightlies
Karizma Puanı: 100
w3‘ün geçtiğimiz ay yayınladığı filtre efektleri beni oldukça heyecanlandırdı! Bu yeni teknolojiyi Google Chrome’ın tasarımcı ve geliştiriciler için özel olarak sunduğu Kanarya tarayıcısında deneyebilirsiniz. Kısa zamanda diğer browserlara da yayılacağını da umuyorum.
Güzel bir örnek…
Ayrıntılara girmeden önce hemen bir örnek gösterelim.
Yukarıdaki orijinal görsele -webkit destekli css’imizi ekliyoruz.
img {
-webkit-filter: brightness(0.1) drop-shadow(7px 7px 20px black) grayscale(1) opacity(1) sepia(1);
}
İşte inanılmaz, Photoshop’tur bu dedirten sonuç:
Hemen siz de deneyin.
Özellikler
Aşağıdaki markup üzerinden Webkit browser olan Canary ile birkaç test yaparak özelliklerin test edelim.
<img src="http://upload.wikimedia.org/wikipedia/en/9/9e/Deviantart_logo.png" alt="DeviantART Logo">
Not: Birçok tarayıcı desteklemediğinden snuçları ekran görüntüsü olarak ekleyeceğim, isterseniz deneyebilirsiniz.
hue-rotate
Hue/Saturation ayarı ile oynuyoruz. Photoshop’tan tanıdığımız, resimleri siyah/beyaz’a çevirmekten tutun genel olarak renkleriyle ilgili size bir çok güzel imkan sunan tool. Şimdi bunu css ile deviantart görseline uygulayalım.
img {
-webkit-filter: hue-rotate(50deg);
}
İşte sonuç:
[demo]
Biraz animasyon katalım:
img {
-webkit-animation: adjustHue 1s alternate infinite;
}
@-webkit-keyframes adjustHue {
0% { -webkit-filter: hue-rotate(30deg); }
50% { -webkit-filter: hue-rotate(60deg); }
100% { -webkit-filter: hue-rotate(90deg); }
}
[demo]
grayscale
256 çeşit gri ile siyah/beyaz yapalım görselimizi.
img {
-webkit-filter: grayscale(100%);
}
İşte Sonu:
[demo]
sepia
Instagram tarzı bir efekt olan sepia’ya bakalım.
img {
-webkit-filter: sepia(100%);
}
İşte sonuç:
[demo]
blur
Bulanık mod
img {
-webkit-filter: blur(2px);
}
Sonuç:
[demo]
brightness
ışığınız bol olsun
img {
-webkit-filter: brightness(45%);
}
Sonuç:
[demo]
contrast
img {
-webkit-filter: contrast(200%);
}
Sonuç:
[demo]
invert
img {
-webkit-filter: invert(100%);
}
Sonuç:
[demo]
saturate
img {
-webkit-filter: saturate(0%);
}
Sonuç:
[demo]
Birlikte Kullanım
Bu efektlerin kombinasyonunu birlikte kullanarak daha farklı şeyler yapabilirsiniz.
img {
-webkit-filter: brightness(60%) sepia(100%);
}
Sonuç
Kombinasyonlar ve yeni değişkenler sizi bekliyor. İyi çalışmalar
