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şine, bunların ne işe yaradığına ve nasıl kullanılacağına değineceğiz. CSS için tanımlanan önceden tanımlanmış tüm filtrelerin örneklerini bazı örneklerle ele alacağız. Filtrelerin hız üzerindeki etkisini bilmek iyi bir kullanıcı deneyimi için önemli olduğundan, bunları masaüstü ve mobil cihazlarda kullanmayla ilgili performans hususlarını da ele alacağız. Son olarak, modern tarayıcılardaki uygulamanın mevcut 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 ortaya çıktı. Bu filtreler, bir vektör çizimine çeşitli piksel tabanlı resim efektleri uygulamak için oluşturulmuştur. Zaman içinde tarayıcı tedarikçileri tarayıcılarına SVG özellikleri ekledikçe filtrelerin yararlılığı ortaya çıktı. Mozilla'dan Robert O'Callahan, "normal" HTML içeriğine CSS uygulayarak SVG filtreleri kullanmanın mükemmel fikrini ortaya attı. Robert, filtre ve CSS stili kombinasyonunun ne kadar güçlü olabileceğini gösteren erken bir 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 için filtre kullanımını uyumlu hale getirmeye karar verdi. Böylece CSS için "filter" özelliği ortaya çıktı. Şu anda CSS ve SVG üzerinde çalışan bir ortak çalışma grubu, filtreleri herkes için yararlı hale getirmek için yoğun bir şekilde çalışıyor. Tüm bu öğelerin mevcut spesifikasyonunu burada bulabilirsiniz.

"filter" CSS özelliği için yeni bir yaşam

CSS stillerinde "filter" ifadesini gören web geliştiricileri bazen deja vu yaşar. Bunun nedeni, Internet Explorer'ın eski sürümlerinde platforma özgü bazı işlevleri gerçekleştirmek için CSS aracılığıyla sunulan bir "filter" özelliğinin bulunmasıdır. Bu özellik, artık CSS3'ün bir parçası olan standart "filter" özelliğinin lehine desteklenmiyor. Bu nedenle, bazı eski web sayfalarında "filtre" ifadesini gördüğünüzde şaşırmayın. Tüm işlemlerin gerçekleştiği yer yeni "filter" mülküdür ve IE'nin yeni sürümleri bunu tüm modern tarayıcılarla aynı şekilde uygular.

Filtrelerin işleyişi

Peki filtreler tam olarak ne işe yarar? Filtreleri, sayfa içeriğinizin tamamı düzenlenip çizildikten sonra sihirli bir şey yapan bir son işlem adımı olarak düşünebilirsiniz.

Tarayıcı bir web sayfası yüklediğinde stilleri uygulaması, düzeni 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 devreye girer. Bu araçlar, oluşturulan sayfanın bitmap resmi olarak anlık görüntüsünü alır, ardından anlık görüntüdeki piksellerde bazı grafik işlemleri gerçekleştirir ve sonucu orijinal sayfa resminin üzerine çizer. Bunları, kamera lensinin önüne yerleştirilmiş bir filtre olarak düşünebilirsiniz. Lensten gördüğünüz şey, filtrenin etkisiyle değiştirilmiş dış dünyadır.

Bu, filtre içeren bir sayfa çizerken zaman harcanacağı anlamına gelir. Ancak filtreleri doğru şekilde kullanmak, sitenizin hızı üzerinde çok az etki eder.

Ayrıca, kamera lensinize birbirinin önüne bir dizi filtre yığabildiğiniz gibi, her türlü efekti elde etmek için istediğiniz sayıda filtreyi arka arkaya uygulayabilirsiniz.

SVG ve CSS kullanılarak tanımlanan filtreler

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

CSS filtrelerinin çoğu SVG filtreleri açısından ifade edilebilir. CSS, dilerseniz SVG'de belirtilen bir filtreye referans vermenize de olanak tanır. CSS filtre tasarımcıları, web yazarları için filtre uygulamayı kolaylaştırmak amacıyla büyük çaba göstermiştir; dolayısıyla bu makale, şu anda SVG tanımlarının göz ardı edilmesiyle yalnızca doğrudan CSS'den kullanılabilen filtreleri ele almaktadır.

CSS filtresi uygulama

CSS'deki filtreler, web sayfanızdaki herhangi bir görünür öğeye uygulanan "filter" özelliği kullanılarak kullanılır. Çok basit bir örnek olarak şunu yazabilirsiniz:

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

Bu durumda, sayfadaki tüm <div> öğelerinin içindeki içerikler gri olur. Sayfanızın 1940'lara ait bir TV görüntüsü gibi görünmesini sağlar.

Çoğu filtre, ne kadar filtreleme yapılacağını kontrol etmek için bir parametre biçimi alır. Örneğin, içeriğinizin stilini orijinal renk ile gri tonlamalı sürüm arasında yarı yarıya olacak şekilde ayarlamak istiyorsanız bunu şu şekilde yaparsınız:

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

Arka arkaya birkaç farklı filtre uygulamak istiyorsanız bunu kolayca yapabilirsiniz. Filtreleri CSS'nize aşağıdaki gibi sırayla yerleştirmeniz yeterlidir:

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

Bu örnekte, önce tüm orijinal renkler gri tonlamaya dönüştürülür ve ardından sepia efekti uygulanır. Sonuçta resim şu şekilde görünür:

Filtreleri birbiri ardına uygulama esnekliği sayesinde her türlü efekt elde edilebilir. Harika sonuçlar elde etmek için denemeler yapmak tamamen hayal gücünüze bağlıdır.

CSS kullanılarak hangi filtre efektleri kullanılabilir?

Bu nedenle, orijinal SVG filtre mekanizması hem güçlü hem de kullanımı zor olabilir. Bu nedenle CSS, bunların kullanımını gerçekten kolaylaştıran çok sayıda standart filtre efekti sunar.

Her birine tek tek göz atalım ve neler yaptıklarını görelim.

gri tonlama(tutar)

Bu işlem, giriş resmimizdeki rengi gri tonuna dönüştürür. Uygulanan "tutar", ne kadar gri dönüşümün uygulanacağını kontrol eder. Değer% 100 ise her şey gri bir tonda olur, %0 ise renkler değişmez. Yüzde yerine kayan noktalı sayı kullanmak isterseniz burada kayan noktalı sayı kullanabilirsiniz. Örneğin, 0, %0 ile aynı şekilde çalışırken 1,0 %100 ile aynı şekilde çalışır.

sepia(amount)

Bu, eski fotoğraflardaki gibi sepya tonlu bir renk verir. Uygulanan "miktar", "gri tonlama" filtresiyle aynı şekilde çalışır. Yani %100, tüm renkleri tamamen sepya tonunda yapar ve daha küçük değerler, efektin daha küçük oranlarda uygulanmasına olanak tanır.

doygunluğu(tutar)

Bu işlem, renklere daha canlı görünmelerini sağlayan bir renk doygunluğu efekti uygular. Fotoğrafları poster veya karikatür gibi gösterebilen harika bir efekttir. Bu efekt, doygunluğu gerçekten vurgulamak için %100'den yüksek bir değer kullanmanıza da olanak tanır. Sadece işlerin oldukça garip görünmesine neden olabilecek bir efekttir.

hue-rotate(angle)

Bu, ilginç sonuçlar elde etmek için kullanılabilecek, biraz renk meraklısı bir efekttir. Bu filtre, giriş resminin tamamen farklı görünmesi için renkleri değiştirir. Bir renk çemberinin etrafında kırmızıdan mor renge dönüşen bir renk spektrumunu hayal edebiliyorsanız, bu efekt, tekerlekteki orijinal rengi giriş olarak alır ve "angle" parametresine göre döndürerek, tekerleğin döndürüldüğü çıktı rengi değeri olarak o rengi oluşturur. Böylece, resimdeki tüm renkler tekerlekte aynı "açı" kadar kaydırılır. Bu, işlevinin basitleştirilmiş bir açıklamasıdır ancak umarım anlaşılır bir şekilde özetlenmiştir.

invert(amount)

Bu efekt, renkleri tersine çevirir. Böylece, uygulanan "miktar" %100 ise sonuç, eski filmli kameraların negatif fotoğrafı gibi görünür. Daha önce olduğu gibi% 100'den küçük değerler kullanıldığında, ters çevirme efekti aşamalı olarak uygulanır.

opacity(amount)

Filtrelenen içeriğin yarı şeffaf görünmesini istiyorsanız bu filtreyi kullanın. "amount" (tutar) değeri, çıkışın ne kadar opak olacağını tanımlar. Dolayısıyla %100 değer tamamen opaktır ve çıkış tam olarak girişle aynı olur. Değer %100'ün altına düştüğünde çıkış resmi daha saydam hale gelir ve resmi daha az görürsünüz. Bu, sayfadaki başka bir öğeyle örtüştüğünde altındaki öğelerin görünür olmaya başlayacağı anlamına gelir. %0'lık bir "tutar", tamamen kaybolacağı anlamına gelir. Ancak, tamamen şeffaf nesnelerde fare tıklamaları gibi etkinliklerin yine de gerçekleşebileceğini unutmayın. Bu nedenle, hiçbir şey göstermeden tıklanabilir alanlar oluşturmak istiyorsanız bu özellik kullanışlıdır.

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

parlaklık(tutar)

Bu, TV'nizdeki parlaklık kontrolüne benzer. 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 yaklaştıkça giriş resmiyle aynı olan% 100'e ulaşana kadar orijinal resim giderek daha fazla aydınlatılır. Elbette aynı şekilde devam edebilirsiniz. %200 gibi bir değer ayarlamak, görüntüyü orijinalinden iki kat daha parlak hale getirir. Bu düşük ışıklı çekimleri ayarlamak için harika bir seçenektir!

contrast(amount)

TV'nizden daha fazla kontrol Bu işlem, giriş resminin en karanlık ve en açık kısımları arasındaki farkı ayarlar. %0 kullanırsanız "parlaklık"ta olduğu gibi siyah elde edersiniz. Bu nedenle çok ilgi çekici değildir. Ancak değeri %100'e doğru artırdıkça koyuluktaki fark değişir. %100'e ulaştığınızda tekrar orijinal resim gösterilir. Bu efekt için %100'ün üzerine çıkabilirsiniz. Bu durumda açık ve koyu renkler arasındaki fark daha da artar.

blur(radius)

İçeriğinizin kenarlarını yumuşatmak için bulanıklık efekti ekleyebilirsiniz. Bu, eskiden popüler bir film yapım tekniği olan cam üzerine vazelin sürme tekniğine benziyor. Tüm renkleri birbirine karıştırır ve etkilerini dağıtır. Bu durum, gözlerinizin odak dışı olduğunda olduğu gibidir. "Radius" parametresi, ekranda kaç pikselin birbiriyle karıştığını etkilediğinden daha büyük bir değer daha fazla bulanıklık oluşturur. Sıfır değer, resmin değiştirilmemesine neden olur.

drop-shadow(shadow)

İçeriğinizin arkasında, zeminde bir gölgeyle güneşin altındaymış gibi görünmesi güzeldir. Tabii ki "gölge"nin faydası da budur. Resmin anlık görüntüsünü alır, tek bir renk haline getirir, bulanıklaştırır, ardından sonucu biraz uzaklaştırarak orijinal içeriğin bir 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ğer dizisidir. Bazı değerler de isteğe bağlıdır. "Gölge" değerleri, gölgenin nereye yerleştirildiğini, ne kadar bulanıklık uygulandığını, gölgenin rengini vb. kontrol eder. "Gölge" değerlerinin ne işe yaradığıyla ilgili tüm ayrıntılar için CSS3 Arka Planlar spesifikasyonunda "box-shadow" ayrıntılı olarak tanımlanmıştır. Aşağıdaki birkaç örnek, çeşitli olasılıklar hakkında iyi bir fikir edinmenize yardımcı olacaktır.

Bu, "box-shadow" özelliği aracılığıyla kullanılabilen mevcut CSS işlevine benzeyen başka bir filtre işlemidir. Filtre yaklaşımının kullanılması, yukarıdaki "opaklik" işlemi için açıkladığımız gibi bazı tarayıcılar tarafından donanım hızlandırması alabileceği anlamına gelir.

SVG filtrelerine referans veren URL'ler

Filtreler SVG'nin bir parçası olarak ortaya çıktığından, içeriğinize SVG filtresi kullanarak stil verebilmeniz mantıklıdır. Bu, mevcut "filter" mülkü önerisiyle kolaydır. SVG'deki tüm filtreler, filtre efektine referans vermek için kullanılabilecek bir "id" özelliğiyle tanımlanır. Dolayısıyla, CSS'deki herhangi bir SVG filtresini kullanmak için tek yapmanız gereken "url" söz dizimini kullanarak filtreye referans vermektir.

Örneğin, bir filtre için SVG işaretlemesi şöyle bir şey olabilir:

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

Bunun için CSS'den aşağıdaki kadar basit bir işlem yapabilirsiniz:

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

ve işte bu kadar. Dokümanınızdaki tüm <div>ler, SVG filtresi tanımlarıyla biçimlendirilir.

özel (çok yakında)

Özel filtreler yakında kullanıma sunulacaktır. Bu araçlar, grafik GPU'nuzun gücünden yararlanarak yalnızca hayal gücünüzün sınırlarını zorlayan muhteşem efektler oluşturmak için özel gölgelendirme dili kullanır. "Filtre" spesifikasyonunun bu kısmı hâlâ tartışılmakta ve değişmektedir. Ancak bu özellik yakınınızdaki bir tarayıcıda kullanıma sunulduğunda neler yapabileceğiniz hakkında daha fazla bilgi vereceğiz.

Performansla ilgili konular

Her web geliştiricisinin önemsediği konulardan biri, 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ı etkileyebilir.

Özellikle CSS filtrelerini destekleyen sitenizin mobil cihazlarda iyi çalışmasını istiyorsanız bunların ne yaptığını ve bunun performansı nasıl etkilediğini anlamak önemlidir.

Öncelikle, tüm filtreler eşit değildir. Aslında çoğu filtre, herhangi bir platformda çok hızlı çalışır ve performans üzerinde çok az etkiye sahiptir. Ancak bulanıklık uygulayan filtreler diğerlerinden daha yavaş çalışır. Bu, elbette "bulanıklaştırma" ve "gölge" anlamına gelir. Bu, bu efektleri kullanmamanız gerektiği anlamına gelmez ancak işleyiş şeklini anlamak işinize yarayabilir.

blur işleminde, bulanık bir sonuç oluşturmak için çıkış pikseli etrafındaki piksellerin renkleri karıştırılır. Yani, radius parametrenizin 2 olduğunu varsayalım. Bu durumda, filtrenin karma rengi oluşturmak için her çıkış pikseli etrafındaki her yönde 2 piksel incelemesi gerekir. Bu durum her çıkış pikseli için tekrarlandığından radius değerini artırdığınızda çok fazla hesaplamanın büyüdüğü anlamına gelir. blur her yöne baktığından, "yarıçap"ı iki katına çıkardığınızda 4 kat daha fazla piksele bakmanız gerekir. Dolayısıyla, radius her iki katına çıktığında 4 kat daha yavaş olur. drop-shadow filtresi, efektinin bir parçası olarak bir blur içerir. Bu nedenle, shadow parametresinin radius ve spread bölümlerini değiştirdiğinizde drop-shadow de tıpkı blur gibi davranır.

blur ile her şey kaybolmaz çünkü bazı platformlarda GPU'yu hızlandırmak için kullanılabilir. Ancak bu her tarayıcıda bulunmayabilir. Şüphe duyduğunuzda en iyi yöntem, istediğiniz efekti veren "yarıçap"ı denemektir. Ardından, kabul edilebilir bir görsel efekt elde ederken yarıçapı mümkün olduğunca azaltmaya çalışın. Bu şekilde ince ayarlar, özellikle sitenizi telefondan kullanan kullanıcılarınızı daha mutlu eder.

SVG filtrelerine referans veren url tabanlı filtreler kullanıyorsanız bunlar herhangi bir filtre efekti içerebilir. Bu nedenle, bunların da yavaş olabileceğini unutmayın. Filtre efektinin ne yaptığını bildiğinizden emin olun ve performansın iyi olduğundan emin olmak için mobil cihazda deneme yapın.

Modern tarayıcılarda kullanılabilirlik

Şu anda CSS filter efektlerinin bir kısmı WebKit tabanlı tarayıcılarda ve Mozilla'da kullanıma sunulmaktadır. Bu özellikleri yakında Opera'da ve IE10'da da görmeyi umuyoruz. Bu spesifikasyon hâlâ geliştirme aşamasında olduğundan, bazı tarayıcı tedarikçi firmaları bu özelliği satıcı önekleri kullanarak uygulamıştır. Dolayısıyla, WebKit'te -webkit-filter kullanmanız gerekir. Mozilla'da ise -moz-filter kullanmanız ve diğer tarayıcı uygulamalarına karşı dikkatli olmanız gerekir.

Tüm tarayıcılar tüm filtre efektlerini hemen desteklemez. Bu nedenle, filtrelerin kullanım durumu tarayıcıya göre değişiklik gösterir. Şu anda Mozilla tarayıcısı yalnızca filter: url() işlevini desteklemektedir. Bu uygulama diğer efekt işlevlerinden daha eski olduğundan tedarikçi ön eki olmadan desteklenmektedir.

Çeşitli tarayıcılarda kullanılabilen CSS filtre efektlerini, yazılıma uygulandıklarında kabaca performans göstergeleriyle birlikte aşağıda özetledik. Bazı modern tarayıcıların bu özellikleri donanımda (GPU hızlandırmalı) uygulamaya başladığını unutmayın. Bunlar GPU desteğiyle oluşturulduğunda daha yavaş efektler için performans büyük ölçüde artar. Her zaman olduğu gibi, performansı değerlendirmenin en iyi yolu farklı tarayıcılarda test yapmaktır.

Diğer faydalı kaynaklar

Deneme yapmanıza ve çalışmalarınızı paylaşmanıza olanak tanıyan harika bir filtrelerle etkileşimli soyut resim uygulaması Eric Bidelman'ın mükemmel etkileşimli filtre sayfasına göz atın Örnekler içeren harika bir filtreler hakkında eğitim Resmi W3C Filter Effects 1.0 taslak spesifikasyonu http://dev.w3.org/fxtf/filters/ Filtreler kullanılarak oluşturulan örnek kullanıcı arayüzü