WebKit'e açılan CSS Filtre Efektleri

Arka plan

Filtre efektleri bir süredir kullanılsa da SVG'de çalışacak şekilde tasarlanmıştır. Bu filtreler, bir resim birleştirilip dokümana oluşturulmadan önce resime renk yoğunluğu, bozulma veya bulanıklık gibi efektler uygulama konusunda inanılmaz derecede güçlüdür.

2009'da Mozilla, SVG'nin yeterli olmadığını söylemişti. Filtreleri bir adım daha ileri götürerek Firefox 3.5'te HTML içeriğinde filtrelere izin verdiler. Paul Irish'ın oynatılan bir <video> üzerinde SVG filtrelerini gösteren zamansız demo'suna göz atın. Yine de yalnızca Firefox'ta çalışır ancak yine de çok kullanışlıdır.

Bugün

2011'in sonuna geldiğimizde Adobe (ve diğer şirketler) bu muhteşem teknolojiyi CSS'ye getirmek için yoğun bir şekilde çalışıyordu. Daha açık belirtmek gerekirse, WebKit'in uygulamaya başladığı CSS Filtre Efektleri 1.0'dan bahsediyoruz.

Filtreleri doğrudan CSS'de etkinleştirmek, neredeyse tüm DOM öğelerinin bunlardan yararlanabileceği anlamına gelir. Resimler, <video>, <canvas>, aklınıza ne gelirse.

CSS filtre efektleri demosu.

Gelecek

Spesifikasyonda, OpenGL gölgelendirici teknolojisini CSS'ye getirecek olan CSS gölgelendiricileri de tanımlanmaktadır. Bu çok heyecan verici. Ancak bir sistemin GPU'sunu her açtığınızda güvenlikle ilgili konular vardır. Bu nedenle, WebKit'te şu anda yalnızca CSS filtre işlevleri uygulanmıştır.

Destek

Chrome 18.0.976.0 (şu anda Canary), Webkit her gece

Webkit gece sürümlerinde, donanım hızlandırmalı içeriğe filtreler uygulanabilir ( ör. img { -webkit-transform: translateZ(0); }). Chrome'da, hızlandırılmış içerikteki filtreler üzerinde hâlâ çalışma devam etmektedir (--enable-accelerated-filters işaretçisini kullanın). Varsayılan olarak hızlandırılan <video> de bu kapsamdadır.