CSS3 Filter : Sadece CSS ile Görsellerinizi Yönetin

Artık resim düzenleme programlarının yapabileceklerini CSS3 ile birkaç satır yazarak hızlıca yapabiliyoruz.

Yapabileceklerimiz

Bulanıklık, parlaklık, renk yoğunluğu, renk değişimi, karşıtlık, renkleri terse çevirmek, siyah-beyaz yapmak ve sepyaya çevirmek.

Filter kodunun çalışma prensibi basit. En temel haliyle ;

filter: filter(değer);

CSS3’ün güncelliğini takip edemeyen Web Görüntüleyicileri ile problem yaşamak istemiyorsanız -webkit- kod satırını da kullanmalısınız.

-webkit-filter: filter(değer);
-moz-filter: filter(değer);
-o-filter: filter(değer);
-ms-filter: filter(değer);

Filtrelemenin Temeli

CSS3 bize birçok güzel filtre sunuyor. Yazımın devamında bunlardan 8 tanesini detaylandıracağım. Fakat bulanıklık ve parlaklık ayarı için örnek bir kod vermekte fayda var ;

filter: blur(5px) brightness(0.5);

Örneklerde kullanacağım görselin orjinali :

Not : Ben uygulamaları Codepen ile yayınlamayı uygun gördüm. HTML ve CSS pencerelerini görüntüleyerek ilgili kod satırlarına erişebilirsiniz.

Blur

Görsele bulanıklık katmaya yarar.

Brightness

Görselin parlaklık değeriyle oynamanızı sağlar.

Saturation

Renklerin canlılığını değiştirmenizi sağlar.

Hue Rotate

Görseldeki renk yoğunluğunu değiştirmenizi sağlar.

Contrast

Görselin karşıtlık değerini değiştirmenizi sağlar.

Invert

Görselin renklerini ters çevirir.

Grayscale

Görseli siyah-beyaz yapar.

Sepia

Görselin renklerini sepyaya çevirir.

Bir sonraki CSS konulu makalemde görüşmek üzere…