CSS Filter Effects 1.0

Başlangıç
Konu: CSS Filtreleri
Uyumluluk: http://tools.google.com/dlpage/chromesxs Webkit Nightlies
Karizma Puanı: 100

https://dvcs.w3.org/hg/FXTF/raw-file...ers/index.html 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.

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 <a href="http://html5-demos.appspot.com/static/css/filters/index.html">deneyin</a>.

Özellikler
Aşağıdaki markup üzerinden Webkit browser olan <a href="http://tools.google.com/dlpage/chromesxs">Canary</a> 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.

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

img {  
   -webkit-filter: hue-rotate(50deg);  
}

İşte sonuç:



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); }  
    }

<h4>grayscale</h4>
256 çeşit gri ile siyah/beyaz yapalım görselimizi.

    img {  
       -webkit-filter: grayscale(100%);  
    }

İşte Sonu:



<h4>sepia</h4>
Instagram tarzı bir efekt olan sepia'ya bakalım.

img {  
      -webkit-filter: sepia(100%);  
}

İşte sonuç:

<h4>blur</h4>
Bulanık mod

img {  
      -webkit-filter: blur(2px);  
}

Sonuç:


<h4>brightness</h4>
ışığınız bol olsun

img {  
      -webkit-filter: brightness(45%);
    }

Sonuç:



<h4>contrast</h4>

img {  
      -webkit-filter: contrast(200%);  
    }

Sonuç:




<h4>invert</h4>

img {  
      -webkit-filter: invert(100%);  
}

Sonuç:




<h4>saturate</h4>

img {  
      -webkit-filter: saturate(0%);  
}

Sonuç:


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 https://dvcs.w3.org/hg/FXTF/raw-file...ers/index.html bekliyor. İyi çalışmalar

Hocam güzel paylaşım olmuş teşekkürler