CSS filtre efektlerini anlama

Giriş

Filtreler, web yazarlarının ilginç görsel efektler elde etmek için kullanabileceği güçlü bir araçtır. Bu makalede, filtre efektlerinin geçmişi, ne işe yaradığı ve nasıl kullanılacağı ele alınmaktadır. CSS için tanımlanmış tüm önceden tanımlanmış filtrelerin örneklerini birkaç örnekle ele alacağız. Filtrelerin hız etkisinin bilinmesi, iyi bir kullanıcı deneyimi açısından önemli olduğundan, filtreleri masaüstü ve mobil cihazlarda kullanırken performansla ilgili dikkat edilmesi gereken noktaları da ele alacağız. Son olarak, modern tarayıcılardaki mevcut uygulama durumunu gözden geçireceğiz.

Filtre efektlerinin geçmişi, bugünü ve geleceği

Filtre efektleri, Ölçeklenebilir Vektör Grafikleri (SVG) spesifikasyonunun bir parçası olarak oluşturulmuştur. Bu resimler, bir vektör çizimine piksel tabanlı çeşitli resim efektleri uygulamak için oluşturulmuştur. Tarayıcı satıcıları zamanla tarayıcılarına SVG özelliklerini ekledikçe filtrelerin faydaları belirginleşti. Mozilla'dan Robert O’Callahan, CSS'yi "normal" HTML içeriğine uygulayarak SVG filtrelerini kullanma mükemmel bir fikri buldu. Robert, filtre ve CSS stili kombinasyonunun ne kadar güçlü olabileceğini gösteren ilk sürümün prototipini oluşturdu. W3C'deki CSS ve SVG çalışma grupları, CSS stili aracılığıyla hem HTML hem de SVG filtrelerinin kullanımını uyumlu hale getirmeye karar vermiştir. Böylece CSS'nin "filter" (filtre) özelliği ortaya çıkmıştır. Şu anda CSS ve SVG üzerinde çalışan kişilerin ortak görev gücü, filtreleri evrensel olarak kullanışlı hale getirmek için bir sürü iş yapıyor. Tüm bunlarla ilgili geçerli spesifikasyonları burada bulabilirsiniz.

"Filtre" CSS mülkü için yeni bir hayat

Deja Vu bazen CSS stillerinde "filtre" ifadesini gördüğünde bir web geliştiricisini fark ediyor. Bunun nedeni, Internet Explorer'ın eski sürümlerinde platforma özgü bazı işlevleri yerine getirmek için CSS aracılığıyla açığa çıkan bir "filtre" özelliğine sahip olmasıdır. Bu özellik kullanımdan kaldırılmıştır ve yerini artık CSS3'ün bir parçası olan standart "filter" özelliğini kullanıma sunmuştur. Dolayısıyla, bazı eski web sayfalarında "filtre" ifadesini gördüğünüzde kafanızın karışmasına gerek yoktur. İşlemin tamamı yeni "filter" özelliğindedir ve IE'nin yeni sürümleri, bu özelliği tüm modern tarayıcılarla aynı şekilde uygulamaktadır.

Filtrelerin işleyişi

Peki, filtre tam olarak ne yapar? Bir filtreyi kullanmanın en kolay yolu, tüm sayfa içeriğiniz yerleştirilip çizildikten sonra sihirli bir şey yapan bir son işleme adımıdır.

Tarayıcının bir web sayfası yüklediğinde stilleri uygulaması, düzen gerçekleştirmesi ve ardından bakılacak bir şey olması için sayfayı oluşturması gerekir. Filtreler, tüm bu adımlardan sonra ve sayfa ekrana kopyalanmadan hemen önce etkinleşir. Oluşturulan sayfanın anlık görüntüsünü bit eşlem resmi olarak alırlar, ardından anlık görüntüdeki piksellerde grafik oluşturma büyüsü gerçekleştirir ve ardından sonucu orijinal sayfa resminin üzerine çizirler. Bunları, kamera lensinin ön tarafına yerleştirilmiş bir filtre gibi düşünebilirsiniz. Mercekten gördükleriniz, filtrenin etkisiyle değiştirilen dış dünyadır.

Bu elbette, filtreleri olan bir sayfa çizerken zaman harcandığı ancak bu filtreleri düzgün kullanmanın sitenizin hızı üzerindeki etkisinin minimum düzeyde olacağı anlamına gelir.

Ayrıca, fotoğraf makinenizin lensinde çeşitli filtreleri önlerine yığabileceğiniz gibi, her tür efekt elde etmek için art arda isteğe bağlı sayıda filtre uygulayabilirsiniz.

SVG ve CSS kullanılarak tanımlanan filtreler

Filtreler orijinal olarak SVG'den geldiği için bunları tanımlamanın ve kullanmanın farklı yolları vardır. SVG'nin kendisi, XML söz dizimini kullanarak çeşitli filtre efektlerinin tanımlarını özetleyen bir <filter> öğesine sahiptir. CSS tarafından tanımlanan filtre grubu aynı grafik modelinden yararlanır, ancak stil sayfasında kullanımı kolay olan çok daha basit tanımlardır.

CSS filtrelerinin çoğu SVG filtreleriyle ifade edilebilir. CSS, isterseniz SVG'de belirtilen bir filtreye referans vermenize de olanak tanır. CSS filtre tasarımcıları, web yazarlarının filtre uygulamasını kolaylaştırmak için büyük çaba sarf ettiler. Dolayısıyla, bu makalede şimdilik SVG tanımlarını yok sayarak yalnızca doğrudan CSS'den kullanılabilen filtreler ele alınacaktır.

CSS filtresi uygulama

CSS'deki filtrelerin kullanımı, web sayfanızdaki görünür öğelere uygulanan "filtre" özelliği kullanılarak yapılır. Çok basit bir örnek olarak,

div { { % mixin filter: grayscale(100%); % } }

Bu da sayfadaki tüm <div>öğelerinin içindeki içeriğin griye dönmesini sağlar. Sayfanızın 1940'lardan kalma bir TV resmi gibi görünmesini sağlamak için idealdir.

Çoğu filtre, ne kadar filtrelemenin yapıldığını kontrol etmek için bir tür parametre kullanır. Örneğin, içeriğinizi orijinal rengiyle gri tonlamalı versiyonun yarısı arasında olacak şekilde biçimlendirmek istiyorsanız, şu şekilde yapabilirsiniz:

div { { % mixin filter: grayscale(50%); % } }

Bir dizi farklı filtreyi arka arkaya uygulamak isterseniz bunu kolayca yapabilirsiniz. Filtreleri CSS'nize şu şekilde sıralayın:

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

Bu örnek, önce orijinal rengin tamamını gri tonlamalı hale getirecek ve ardından bir sepya efekti uygulayacak ve sonuç şu şekilde olacaktır:

Filtreleri art arda uygulama esnekliği sayesinde, her türlü efekt elde edilebilir. Mükemmel sonuçlar elde etmek için denemeler yapmak tamamen hayal gücünüze kalmıştır.

CSS ile kullanılabilen filtre efektleri

Dolayısıyla, orijinal SVG filtre mekanizması hem güçlüdür hem de kullanımı göz korkutucu olabilir. Bu nedenle CSS, bunların kullanımını gerçekten kolaylaştıran birçok standart filtre efekti sunar.

Şimdi her birine tek tek göz atalım ve ne yaptıklarına bakalım.

gri tonlama(miktar)

Bu işlem, giriş resmimizdeki rengi gri tonuna dönüştürür. Uygulanan "tutar", ne kadar gri dönüşümün uygulandığını kontrol eder. %100 ise her şey gri tonuyla gösterilir. %0 ise renkler değişmez. Yüzde yerine tercih ettiğiniz bir kayan nokta sayısını burada kullanabilirsiniz. Yani 0, %0 ile aynı işlevi görürken 1,0 %100 ile aynı şekilde çalışır.

sepya(miktar)

Bu model, eski fotoğraflarda olduğu gibi sepya tonunda geçirilen renklerin verilmesini sağlar. Uygulanan "tutar", "gri tonlama" filtresiyle aynı şekilde çalışır. Yani% 100, tüm renklerin tamamen sepya tonlu olmasını sağlar ve daha küçük değerler, efektin daha küçük oranlarda uygulanmasına olanak tanır.

doygunluk(tutar)

Bu özellik, renklere renk doygunluğu efekti uygulayarak renklerin daha canlı görünmesini sağlar. Fotoğrafların poster veya çizgi film gibi görünmesini sağlayan hoş bir efekttir.Bu efekt, doygunluğu gerçekten vurgulamak için% 100'den büyük bir değer kullanmanıza da olanak tanır. Kesinlikle tuhaf görünen bir efekt var!

tonu-döndür(açı)

Bu, ilginç sonuçlar için kullanılabilecek bir renk meraklısı efekti. Renkleri değiştirerek giriş resminin tamamen farklı görünmesini sağlar. Bir renk çemberi etrafında kırmızıdan menekşeye giden bir renk spektrumunun olduğunu hayal edebiliyorsanız, bu efekt tekerlek üzerindeki orijinal rengi girdi olarak alır ve "angle" parametresine göre döndürerek, çıktı rengi değeri olarak döndürüldüğü tekerlek üzerindeki rengi oluşturur. Böylece resimdeki tüm renkler, tekerlek üzerinde aynı "açı" tarafından kaydırılır. Bu, elbette işlevin daha basit bir halidir. Yine de anlamlı bir sonuç vereceğini umuyoruz.

ters çevir(tutar)

Bu efekt renkleri çevirir. Yani "tutar" %100 uygulandığında ortaya çıkan sonuç, kameraların eski film günlerinde çekilmiş bir fotoğraf negatifi gibi görünür. Daha önce olduğu gibi, %100'den küçük değerler kullanıldığında ters çevirme efekti kademeli olarak uygulanır.

opaklık(miktar)

Filtrelenen içeriğin yarı şeffaf görünmesini istiyorsanız bu uygulama tam size göre. "amount" [tutar] değeri, çıktının ne kadar opak olacağını tanımlar. %100 değeri tamamen opak olduğundan çıkış, girişle tam olarak aynı olur. Değer% 100'ün altına düştüğünde, çıktı görüntüsü daha az opak (daha şeffaf) hale gelir ve bu resmin giderek daha azını görürsünüz. Bu elbette, sayfa üzerinde başka bir şeyle çakıştığında, altındaki öğelerin görünmeye başlayacağı anlamına gelir. %0'lık bir "amount" (tutar) değeri, öğenin tamamen kaybolacağı anlamına gelir. Ancak, fare tıklamaları gibi etkinliklerin tamamen şeffaf nesnelerde gerçekleşmeye devam edebileceğini unutmayın. Bu nedenle, hiçbir şey görüntülemeden tıklanabilir alanlar oluşturmak istiyorsanız bu özellik kullanışlıdır.

Bu, bildiğiniz "opacity" özelliği ile aynı şekilde çalışır. Genel olarak CSS "opaklığı" özelliği donanım hızlandırmalı değildir, ancak donanım hızlandırmayı kullanarak filtre uygulayan bazı tarayıcılar çok daha iyi performans için opaklığın filtre sürümünü hızlandırır.

parlaklık(miktar)

Bu işlev, tıpkı TV'nizdeki parlaklık kontrolü gibidir. Tamamen siyah ile orijinal renk arasındaki renkleri "amount" parametresiyle orantılı olarak ayarlar. Bunu% 0'a ayarlarsanız siyahtan başka bir şey görmezsiniz, ancak değer% 100'e doğru yükseldikçe, giriş resmiyle aynı olduğu yerde% 100'e ulaşana kadar, orijinal resmin giderek daha fazla aydınlandığını görürsünüz. Elbette bu şekilde devam edebilirsiniz. Böylece% 200 gibi bir ayarı orijinalinden iki kat daha fazla parlaklık resmi elde edersiniz. Bu da düşük ışıkta çekimleri ayarlamak için harika bir yöntem!

kontrast(tutar)

TV setinizden daha fazla kontrol! Bu işlem, giriş görüntüsünün en koyu ve en açık kısımları arasındaki farkı ayarlar. %0'ı kullanırsanız "parlaklık"ta olduğu gibi siyah sonucunu elde edersiniz, bu nedenle fazla ilgi çekici olmaz. Ancak, değeri% 100'e doğru artırdıkça, %100'e ulaşana ve tekrar orijinal resim haline gelene kadar koyuluktaki fark değişir. Bu efekt için% 100'ün üzerine çıkabileceğinizi de belirleyebilirsiniz. Bu durumda açık ve koyu renkler arasındaki fark daha da artar.

bulanıklaştırma(yarıçap)

İçeriğinize yumuşak bir hava eklemek istiyorsanız bulanıklaştırma ekleyebilirsiniz. Bu, eskiden popüler bir film yapım tekniği olan cam levha üzerindeki klasik Vazelin'e benziyor. Tıpkı gözlerin odaklanmadığı gibi tüm renkleri birlikte bulaştırır ve etkilerini yayır. "Radius" parametresi ekrandaki kaç pikselin birbiriyle karıştığını etkiler. Dolayısıyla, daha büyük bir değer daha fazla bulanıklık oluşturur. Sıfır ise resim değişmez.

drop-shadow(shadow)

İçeriklerinizi, arkadaki zemine gölge eklenmiş güneşin altındaymış gibi göstermek çok güzel. Tabii ki "gölge" de bunu yapar. Resmin anlık görüntüsünü alır, resmi tek bir renk yapar, bulanıklaştırır, ardından sonucu belirli bir ölçüde kaydırır ve orijinal içeriğin gölgesi gibi görünür. İletilen "shadow" parametresi, tek bir değerden biraz daha karmaşıktır. Boşlukla ayrılmış bir değerler dizisidir ve bazı değerler isteğe bağlıdır. "Gölge" değerleri, gölgenin yerleştirildiği yeri, ne kadar bulanıklaştırma uygulanacağını, gölgenin rengini vb. kontrol eder. "gölge" değerlerinin işleviyle ilgili tüm ayrıntılar için CSS3 Arka Planları spesifikasyonunda "kutu gölgesi" özelliği ayrıntılı şekilde tanımlanır. Aşağıdaki birkaç örneği inceleyerek farklı olasılıkların neler olduğuna dair iyi bir fikir edinebilirsiniz.

Bu, "box-shadow" özelliği üzerinden kullanılabilen mevcut CSS işlevine benzeyen başka bir filtreleme işlemidir. Filtre yaklaşımının kullanılması, yukarıda "opaklık" işlemi için açıkladığımız gibi, donanımın bazı tarayıcılar tarafından hızlandırılabileceği anlamına gelir.

SVG filtrelerine referans veren URL

Filtreler SVG'nin bir parçası olarak oluşturulduğundan, içeriğinizi bir SVG filtresi kullanarak biçimlendirebilmeniz mantıklıdır. Mevcut "filtre" mülk teklifiyle bu işlemi kolayca gerçekleştirebilirsiniz. SVG'deki tüm filtreler, filtre efektine referans vermek için kullanılabilecek bir "id" özelliğiyle tanımlanır. Dolayısıyla, CSS'den herhangi bir SVG filtresini kullanmak için tek yapmanız gereken "url" söz dizimini kullanarak filtreye referans vermektir.

Örneğin, bir filtrenin SVG işaretlemesi aşağıdaki gibi olabilir:

<filter id="foo">...</filter>

CSS'den şu gibi basit bir işlem yapabilirsiniz:

div { { % mixin filter: url(#foo); % } }

ve işte oldu! Dokümanınızdaki tüm <div> öğeleri, SVG filtre tanımlarıyla şekillendirilir.

özel (çok yakında)

Yakında özel filtreler kullanıma sunulacak. Bunlar, özel gölgelendirme dili kullanarak yalnızca kendi hayal gücünüzle sınırlı harika efektler oluşturmak için grafik GPU'nuzun gücünden yararlanır. "Filtre" spesifikasyonunun bu bölümü hâlâ tartışılıyor ve değişmeye devam ediyor. Ancak, bu özellik yakınınızdaki bir tarayıcıya gelmeye başlar başlamaz, nelerin mümkün olduğu hakkında daha fazla bilgi vereceğimizden emin olabilirsiniz.

Performansla ilgili konular

Her web geliştiricisinin önem verdiği bir konu da web sayfasının veya uygulamasının performansıdır. CSS filtreleri, görsel efektler için güçlü bir araçtır, ancak aynı zamanda sitenizin performansını da etkileyebilir.

Ne işe yaradığını ve bunun performansı nasıl etkilediğini anlamak, özellikle de sitenizin CSS filtrelerini destekleyen mobil cihazlarda iyi çalışmasını istiyorsanız önemlidir.

Öncelikle, tüm filtreler eşit değildir! Aslında çoğu filtre, tüm platformlarda çok hızlı çalışır ve performans üzerindeki etkisi çok azdır. Ancak, herhangi bir bulanıklaştırma işlemi gerçekleştiren filtreler diğerlerinden daha yavaş olma eğilimindedir. Bu elbette "bulanıklaştırma" ve "gölgeleme" anlamına gelir. Bu, bunları kullanmamanız gerektiği anlamına gelmez ancak nasıl çalıştıklarını anlamanız yararlı olabilir.

blur yaptığınızda bulanıklaştırılmış bir sonuç oluşturmak için çıkış pikselinin etrafındaki piksellerin renkleri karıştırılır. Örneğin, radius parametreniz 2 ise karma rengi oluşturmak için filtrenin her çıkış pikselinin etrafında her yönde 2 piksele bakması gerekir. Bu durum her bir çıkış pikseli için gerçekleşir. Yani, radius artırıldığında büyüyen hesaplamalar da artar. blur her yönde baktığından, "yarıçapı" iki katına çıkarmak 4 kat fazla piksele bakmanız gerektiği anlamına gelir. Bu nedenle, radius her ikiye katlandığında 4 kat daha yavaş olur. drop-shadow filtresi, etkisi kapsamında bir blur içerdiğinden bu filtre de shadow parametresinin radius ve spread bölümlerini değiştirdiğinizde blur gibi davranır.

blur, bazı platformlarda GPU'yu hızlandırmak için kullanılabileceğinden, bunların hepsi de kaybolmaz. Ancak bu her tarayıcıda mümkün olmayabilir. Şüpheye düştüğünüzde en iyi şey, istediğiniz etkiyi veren "yarıçap" ile denemeler yapmaktır. Ardından, kabul edilebilir bir görsel etkiyi korurken, yarıçapı mümkün olduğunca azaltmaya çalışın. Bu şekilde ince ayar yapmak, özellikle sitenizi telefondan kullanan kullanıcılarınızı daha mutlu eder.

SVG filtrelerine referans veren url tabanlı filtreler kullanıyorsanız, bunlar isteğe bağlı filtre efektleri içerebilir. Bu nedenle, bu filtreler de yavaş olabilir. Bu nedenle, filtre efektinin ne işe yaradığını bildiğinizden emin olun ve performansın iyi olduğundan emin olmak için bir mobil cihazda deneme yapın.

Modern tarayıcılarda kullanılabilirlik

Şu anda WebKit tabanlı tarayıcılarda ve Mozilla'da CSS filter efektlerinin bir kısmı kullanıma sunulmaktadır. Bu modelleri çok yakında Opera'da ve IE10'da görmeyi umuyoruz. Spesifikasyon hâlâ geliştirme aşamasında olduğundan, bazı tarayıcı satıcıları bu işlemleri tedarikçi öneklerini kullanarak uygulamıştır. Bu nedenle WebKit'te -webkit-filter, Mozilla'da ise -moz-filter kullanmanız ve diğer tarayıcı uygulamaları göründüklerinde dikkat etmeniz gerekir.

Tüm tarayıcılar tüm filtre efektlerini hemen desteklemez, bu nedenle kullanım hızınız değişiklik gösterir. Şu an için, Mozilla tarayıcısı diğer efekt işlevlerinden önce geldiği için tedarikçi firma öneki olmadan yalnızca filter: url() işlevini desteklemektedir.

Aşağıda, çeşitli tarayıcılarda kullanılabilen CSS filtre efektlerinin yazılımda uygulandıkları zamana ilişkin yaklaşık performans göstergeleriyle bir özet sunduk. Bir dizi modern tarayıcının bunları donanımda uygulamaya başladığını (GPU hızlandırmalı) unutmayın. Bunlar GPU desteğiyle oluşturulduğunda, daha yavaş efektler için performans büyük ölçüde iyileştirilir. Her zaman olduğu gibi, performansı değerlendirmenin en iyi yolu farklı tarayıcılarda test etmektir.

Filtre efekti	Tarayıcı desteği	Performans
gri tonlamalı	Chrome	çok hızlı
sepya	Chrome	çok hızlı
doygunluk	Chrome	çok hızlı
tonu döndür	Chrome	hızlı
ters çevir	Chrome	çok hızlı
opacity	Chrome	yavaş olabilir
parlaklık	Chrome	hızlı
kontrast	Chrome	hızlı
bulanıklaştırmak	Chrome	hızlandırılmadığı sürece yavaş
drop-shadow	Chrome	yavaş olabilir
url()	Chrome, Mozilla	Değişir, hızlıdan yavaşa

Diğer faydalı kaynaklar

Çalışmanızı deneyip paylaşmanıza olanak tanıyan harika bir filtrelerle etkileşimli soyut resim uygulaması Eric Bidelman’ın mükemmel etkileşimli filtre sayfasına mutlaka göz atın Örnekler içeren harika bir filtreler hakkında öğretici Resmi W3C Filtre Efektleri 1.0 taslak spesifikasyonu http://dev.w3.org/fxtf/filters/ Örnek Filtrelerle oluşturulan kullanıcı arayüzü