- 27 Haz 2011
- 6,162
- 23
Filter Effects 1.0 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 <a href="http://tools.google.com/dlpage/chromesxs">Kanarya</a> 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.
İşte inanılmaz, Photoshop'tur bu dedirten sonuç:
Not: Birçok tarayıcı desteklemediğinden snuçları ekran görüntüsü olarak ekleyeceğim, isterseniz deneyebilirsiniz.
<h4>hue-rotate</h4>
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.
İşte sonuç:
<h4>grayscale</h4>
256 çeşit gri ile siyah/beyaz yapalım görselimizi.
İşte Sonu:
Birlikte Kullanım
Bu efektlerin kombinasyonunu birlikte kullanarak daha farklı şeyler yapabilirsiniz.
Sonuç
Kombinasyonlar ve yeni değişkenler sizi Filter Effects 1.0 bekliyor. İyi çalışmalar
Güzel bir örnek...
Ayrıntılara girmeden önce hemen bir örnek gösterelim.
Yukarıdaki orijinal görsele -webkit destekli css'imizi ekliyoruz.
Kod:
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ç:
Not: Birçok tarayıcı desteklemediğinden snuçları ekran görüntüsü olarak ekleyeceğim, isterseniz deneyebilirsiniz.
<h4>hue-rotate</h4>
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.
Kod:
img {
-webkit-filter: hue-rotate(50deg);
}
İşte sonuç:
<h4>grayscale</h4>
256 çeşit gri ile siyah/beyaz yapalım görselimizi.
Kod:
img {
-webkit-filter: grayscale(100%);
}
İşte Sonu:
Birlikte Kullanım
Bu efektlerin kombinasyonunu birlikte kullanarak daha farklı şeyler yapabilirsiniz.
Sonuç
Kombinasyonlar ve yeni değişkenler sizi Filter Effects 1.0 bekliyor. İyi çalışmalar
Moderatör tarafında düzenlendi: