CSS özellikleri o kadar gelişmiş bir seviyeye ulaştı ki, grafik editörlerinin bazı önemli işlevlerinin üstesinden gelebilecek hale geldi. Bunun bir örneği, görüntüler için güzel efektler oluşturabileceğiniz CSS filtreleridir.

Daha önce hayal etmek bile zor olsaydı, artık bulanıklıktan sanatsal renk modellerine kadar neredeyse tüm yazılım filtreleri basamaklı tabloda uygulanmaktadır.

Ancak CSS filtrelerinin hala küçük bir dezavantajı var; tüm web tarayıcıları görsel efektleri desteklemez. Elbette bu sadece zaman meselesi. Ve “x” saati geldiğinde geliştiricilerin hazırlıklı olması gerekiyor. Şimdilik şimdiye kadar uygulananlara bir bakalım.

CSS filtreleri için tarayıcı desteği

Temel olarak, tüm popüler tarayıcıların, Firefox, Chrome, Opera'nın filtre efektleriyle "dostça" bir ilişkisi vardır. En son sürümlerde bile efektleri desteklemeyi tamamen reddeden IE için aynı şey söylenemez.

CSS filtrelerinin işlevleri ve söz dizimi

Tüm CSS özellikleri, değerlerin yazılma sırasını birleştiren belirli parametrelere sahiptir. Filtre özelliği de bir istisna değildir; diğerleri gibi, tek bir uygulamada birkaç kuralın birleşimini kullanabilir. Örneğin, bir görüntü için bir parlaklık filtresi ekleyin ve bir boşluktan sonra başka bir kontrast belirtin. Daha iyi anlaşılması için bu yazıda her şeyi birkaç örnekle ele alacağız.

Sözdizimi

Filtre: filtre adı (değerin yüzdesi); filtre: url(img.svg); filtre: bulanıklaştırma (10 piksel); filtre: parlaklık(0,9); filtre: kontrast (%150); filtre: alt gölge (5 piksel 5 piksel 10 piksel siyah); filtre: gri tonlamalı (%80); filtre: renk tonu döndürme (60 derece); filtre: ters çevir (%80); filtre: opaklık (%50); filtre: doymuş (%50); filtre: sepya (%40); /* Birden fazla filtre uygula */ filtre: kontrast (%150) gri tonlamalı (%80);

Filtre listesi

CSS filtre örnekleri

Her filtreyi uygulama örnekleriyle ayrı ayrı ele alacağımız yazının ilginç bir kısmına geldik. Netlik sağlamak için üç resim kullanılacaktır. İlki başlangıç ​​noktasını, özgünlüğün görünümünü gösterecek. İkincisi, filtre uygulamasının statik bir örneği olarak hizmet edecek ve üçüncüsü, fare imlecini görüntünün üzerine getirerek fareyle üzerine gelme efektini gösterecektir.

Bulanıklaştırma filtresi

Grafik editörlerinde bulanıklaştırma filtresi vazgeçilmez bir araçtır ve sıklıkla iş yerinde kullanılır. Kolayca bulanık bir görüntü oluşturabilir, ancak görüntünün geri kalanı bulanıklığın altında kalırken belirli bir öğeye odaklanma efekti yaratabilir. Ve çok daha fazlası.

Web sitesi tasarımında (örneğin bulanıklık), resimde yer alan metnin daha iyi okunabilmesi için astar olarak kullanılabilir. Aslında bulanıklık, 0 piksel değerinden tamamen kaybolana kadar Gaussian'dır.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efbl1 img( filtre: bulanıklık(2px); -webkit-filter: bulanıklık(2px); ) /*vurgu efekti için*/ .efbl2 img( geçiş: tüm 0,6'lar kolaylaştırma 0s; ) . :hover img( filtre: bulanıklık(4px); -webkit-filter: bulanıklık(4px); geçiş: tüm 0,6'lar, 0'ları hafifletir; )

Gölgeyi filtrele

Gölge özelliği basamaklı tablonun üçüncü versiyonuyla karşımıza çıktı. Elbette, kutu gölgesi tasarımda önemli bir rol oynadığından, web sitesi geliştirmeyle ilgilenen herkes bunu bilir. Alt gölge filtresi, benzer parametrelerle daha düşük bir alternatif olarak adlandırılabilir ve iç gölgeyi saymazsak bunlardan yalnızca 5 tanesi vardır.

Yazma sırası şu şekildedir: 5px/-5px (yatay ofset), 5px/-5px (dikey offset), 15px (gölge bulanıklık yarıçapı), 5px/-5px (gölge uzatma), siyah (renkli). Filtre, uzatma ve iç metin değerlerinin yanı sıra virgüllerle ayrılmış birden çok gölge ekleme dışında tüm sözdizimini destekler. Ancak tüm bunlara rağmen bazı avantajlar da vardır; örneğin, filtre sözde elemanları hesaba katar ve bu da elemanın gölgesinin tam şeklini görüntülemenize olanak tanır.

Ayrıca ilginç olan, bloğun bir arka planı olmadığında, ancak yalnızca bir sınır konturu belirtildiğinde, kutu gölgesi kullanıldığında, sözde arka planı, yani katı olanı dikkate alarak bir gölge görüntülenecektir. Alt gölge kullanılması durumunda gölge, arka planı dikkate almadan kontur şeklini alır.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efdrswd1 img( filtre: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0) , 0.4)); ) /*vurgu efekti için*/ .efdrswd2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırır; ) .efdrswd2:hover img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); geçiş: tüm 0,6'lar 0'ları kolaylaştırır)

Renk giderme filtresi

Her zaman için doğru yönde klasik fotoğrafçılık tarzı. Filtre yalnızca tek bir değere izin verir - pozitif. Belirtilen yüzdeye bağlı olarak gri tonları, görüntünün renginin yerini sorunsuz bir şekilde alacaktır. Ayrıca yüzdeler yerine tam sayıya (0,01/1) kadar olan kesirleri de kullanabilirsiniz.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efgrays1 img( filter: gri tonlamalı(90%); -webkit-filter: gri tonlamalı(90%); ) /*vurgu efekti için*/ .efgrays2 img( geçiş: tüm 0,6'lar, 0'ları kolaylaştırır; ) .efgrays2:hover img( filtre: gri tonlamalı (%90); -webkit-filter: gri tonlamalı (%90); geçiş: tüm 0,6'lar, 0'ları hafifletir; )

Parlaklık filtresi

Görüntünün "keşfedilmemiş" siyah köşelerine ışık eklenmesi. Amatör fotoğraflar genellikle az aydınlatılmış yerlerde çekildiği için fotoğraf işlemede sıklıkla kullanılır. Filtrenin parlaklığı %0'dan (tamamen siyah bir resim) neredeyse tamamen kaybolan resme kadar ayarlanabilir. Orijinal nokta %100 olarak tanımlanır ve değer kesirli olarak da belirtilebilir.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efbrig1 img( filter: parlaklık(150%); -webkit-filter: parlaklık(150%); ) /*vurgu efekti için*/ .efbrig2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırır; ) .efbrig2:hover img( filter: parlaklık(150%); -webkit-filter: parlaklık(150%); geçiş: tüm 0,6 saniyeler, 0'lar kolaylığı; )

Kontrast filtresi

Bir görüntüyü daha etkileyici hale getirmenin basit bir yolu, resmin en açık ve en karanlık kısımlarının parlaklık ayarlarını denemektir. Kontrast filtresi bu konuda yardımcı olmaya hazırdır. Parametreleri, diğerleri gibi, negatif bir değeri (-%150) hariç tutar ve başlangıç ​​konumu %100 olarak gösterilir. Yüzdelere ek olarak kesirlere de (1,5) izin verilir.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efcontr1 img( filter: kontrast(150%); -webkit-filter: kontrast(150%); ) /*vurgu efekti için*/ .efcontr2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırıyor; ) .efcontr2:hover img( filter: kontrast(150%); -webkit-filter: kontrast(150%); geçiş: tüm 0,6'lar, 0'ları hafifletir; )

Renk tonu filtresi

Ana kaynak tasarımının tarzına uyan, görüntü tasarımında mükemmel bir tasarım tekniği. Buradaki fikir, seçilen rengin bir gölgesini orijinal görüntünün üzerine yerleştirmektir. Oranlar, renk tekerleğinde renk noktasını gösteren verilen dereceye bağlı olarak ortaya çıkar.

Değer pozitifse (150 derece), dönüş saat yönünde gerçekleşir. Buna göre negatifse saat yönünün tersine. İki pozisyonda 0 dereceden 360 dereceye kadar başlar.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*vurgu efekti için*/ .efhrotai2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırır ; ) .efhrotai2:hover img( filtre: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); geçiş: tüm 0,6'lar kolaylık 0'lar; )

Ters çevirme filtresi

Bir görüntünün rengini ters çevirmenize olanak tanıyan özel bir efekt. Grafik editörlerinde belli bir rolü vardır ve katılımı olmadan istenilen sonuca ulaşılamaz. Tersine çevirme filtresi parametresi yalnızca pozitif yönde %0 ila %100 arasında bir değerle belirtilir.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*vurgu efekti için*/ .efinve2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırıyor; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); geçiş: tüm 0,6'lar, 0'ları hafifletir; )

Doygunluk filtresi

Bir görüntü, bilinmeyen nedenlerle (güneşte ağarmış bir tişört gibi) doğal rengini kaybettiğinde, doygunluğu artırmak, orijinal görünümünü anında geri getirebilir. Ve eğer bu filtre diğer filtrelerle birlikte kullanılırsa sonuç oldukça tatmin edici olacaktır. Ayar, 0 başlangıç ​​görünümünden büyük sayılara doğru yapılır.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efsatut1 img( filter: saturate(165%); -webkit-filter: saturate(165%); ) /*vurgu efekti için*/ .efsatut2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırır; ) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); geçiş: tüm 0,6'lar, 0'ları hafifletir; )

Sepya filtresi

Eski fotoğrafların etkisinin taklidi (hafif kahverengi renk tonu). Bu, özellikle popüler olan retro tarzı bir görüntü elde eder. Sepya filtresi %0'dan (ana konum) %100'e kadar ayarlanabilir.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*vurgu efekti için*/ .efsepiaa2 img( geçiş: tüm 0,6'lar 0'ları kolaylaştırır; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); geçiş: tüm 0,6'lar, kolaylaştırma 0'lar; )

Şeffaflığı filtrele

Basamaklı tablo sürüm 3'teki opacity özelliğine benzer bir filtre. Sözdizimi aynıdır ve şeffaflık değeri %0 ila %100 (orijinal konum) arasında ayarlanabilir.

Orijinal

Filtre

Vurgulu efekti

/*statik kural*/ .efopaty1 img( filter: opacity(50%); -webkit-filter: opacity(50%); ) /*vurgu efekti için*/ .efopaty2 img( geçiş: tüm 0,6'lar kolaylaştırma 0'lar; ) .efopaty2:hover img( filter: opacity(50%); -webkit-filter: opacity(50%); geçiş: tüm 0,6'lar, 0'ları hafifletir; )

Bağlantıyı filtrele

Belirli bir tanımlayıcıya sahip SVG öğelerine dayalı olarak daha sonra bir bağlantı filtresi aracılığıyla CSS'de kullanılabilen özel bir filtre oluşturulur. Etkiler, kaplama maskelerinden banal şeffaflığa kadar standart filtrelerden çok farklı olabilir.

CSS filtre oluşturucu

Çeşitli CSS özelliklerine sahip jeneratörler oluşturmak uzun zamandır bir gelenek olmuştur. ve çok daha fazlası. İşi kolaylaştıracak bir araç görevi görürler. Ve yeni başlayan web yöneticileri için çifte fayda sağlayabilirler. Kullanımı çok kolaydır: kaydırıcıları hareket ettirdiğinizde sonuçları hemen görebilirsiniz. Ve bittiğinde geriye kalan tek şey oluşturulan kodu kopyalamaktır. Aynı şey CSS filtre oluşturucuları için de geçerlidir. Referans olması açısından işte bunlardan ikisi:

Çözüm

İncelemenin oldukça büyük olduğu ortaya çıktı, ancak pratikte birisi için faydalı olacağını umuyorum. Ayrıca filtreleri birleştirmeyi de unutmayın; biri iyidir, ancak bazı durumlarda iki tane daha iyi olacaktır.

CSS3 filtreleri, SVG'nin çok ilginç bir koludur; bulanıklık, parlaklık ve diğer birçok filtreyi uygulayarak HTML öğelerini ve görsellerini değiştirmenize olanak tanır. Bu eğitimde tam olarak nasıl çalıştıklarına hızlıca göz atacağız.

Bu nasıl çalışır?

Sadece CSS kullanarak oldukça karmaşık efektler yaratabiliriz. Hem resimlere hem de HTML öğelerine uygulanabilirler. Tüm bu etkileri kontrol etmek için kullanılan özellik filtre.

filtre: filtre(değer) ;

Tahmin edebileceğiniz gibi bu özellik bir tarayıcı önekinin kullanılmasını gerektirir. Ama şimdilik yalnızca -webkit-(Chrome ve Safari) bu özelliği destekleyen tek tarayıcı motorlarıdır.

Webkit filtresi: filtre(değer) ;
-moz-filtre: filtre(değer) ;
-o-filtre: filtre(değer) ;
-ms-filtre: filtre(değer) ;

Filtrasyon

Çok sayıda filtre var, her birini daha iyi anlamak için onlara ayrı ayrı bakalım. Bir öğeye (boşlukla ayrılmış olarak) birden fazla filtre uygulanabilir; örneğin, parlaklık Ve bulanıklık:

filtre: bulanıklaştırma(5px) parlaklık(0,5);

Aşağıda ele alınmayacak birkaç filtre vardır ancak bunlar mevcut CSS (saydamlık ve gölgeler) ile kolayca uygulanabilir. Filtrelerin nasıl çalıştığını göstermek için kullanacağımız orijinal görsel:

Filtreleri desteklemeyen bir tarayıcı kullanıyorsanız ve sonucu göremiyorsanız, filtre uygulanmış bir fotoğraf (ilk fotoğraf) ve filtre sonucunu statik görsel şeklinde (ikinci fotoğraf) göstereceğim.

Bulanıklık

Hiç sadece CSS kullanarak bir resim veya metin üzerinde Gauss bulanıklığı yapmak istediniz mi? Filtrelerle bunu yapabilirsiniz! Bulanıklık piksel cinsinden ölçülür, böylece şöyle bir şey yapabilirsiniz:

filtre: bulanıklaştırma(5px) ;
// Tarayıcıya Özel
-webkit-filtre: bulanıklaştırma(5px) ;
-moz-filtre: bulanıklaştırma(5px) ;
-o-filtre: bulanıklaştırma(5px) ;
-ms-filtre: bulanıklaştırma(5px) ;

Parlaklık

Parlaklık sıfırdan bire kadar ölçülür; 1 tam parlaklıktır (beyaz) ve 0 orijinal parlaklıktır.

filtre: parlaklık(0,2);
// Tarayıcıya Özel
-webkit filtresi: parlaklık(0,2);
-moz-filtre: parlaklık(0,2);
-o-filtre: parlaklık(0,2);
-ms-filtre: parlaklık(0,2);

Doygunluk

Doygunluk yüzde olarak ölçülür.

filtre: doygunluk (%50) ;
// Tarayıcıya Özel
-webkit-filtre: doygunluk (%50) ;
-moz-filtre: doygunluk (%50);
-o-filtre: doygunluk (%50) ;
-ms-filtre: doygunluk (%50) ;

Ton döndürme

Bu filtre, döndürerek tonu değiştirmenize olanak tanır (daha sonra döndürdüğünüz bir renk çarkı düşünün). Derece cinsinden ölçülür.

filtre: renk tonu döndürme (20 derece);
// Tarayıcıya Özel
-webkit-filtre: hue-rotate(20deg) ;
-moz-filtre: renk tonu döndürme(20 derece);
-o-filtre: hue-döndürme(20 derece) ;
-ms-filtre: hue-rotate(20deg) ;

Zıtlık

Kontrast yine yüzde olarak ölçülür. %100 varsayılandır, %0 tamamen siyah bir görüntü oluşturacaktır. %100'ün üzerindeki her şey kontrast katar!

filtre: kontrast(150%);
// Tarayıcıya Özel
-webkit-filtre: kontrast(150%);
-moz-filtre: kontrast(150%);
-o-filtre: kontrast(150%);
-ms-filtre: kontrast(150%);

İnversiyon

Ayrıca yüzde olarak da ölçülür. Mevcut değerler %0 ila %100 arasındadır. Garip bir şekilde şu anda webkit %100'ün altında olan ters çevirmeleri desteklemiyor.

filtre: ters çevir (%100);
// Tarayıcıya Özel
-webkit-filtre: ters çevir (%100);
-moz-filtre: ters çevir (%100);
-o-filtre: ters çevir (%100);
-ms-filtre: ters çevir (%100);

Ağartma

Yine görüntünün doygunluğunu azaltmak istediğiniz yüzdeyi girin. Mevcut değerler %0 ila %100 arasındadır.

filtre: gri tonlamalı (%100);
// Tarayıcıya Özel
-webkit filtresi: gri tonlamalı (%100);
-moz-filtre: gri tonlamalı (%100);
-o-filtre: gri tonlamalı(100%);
-ms-filtre: gri tonlamalı (%100);

Sepya

Instagram'da bir şey paylaşmak istiyorsanız bunun çok yararlı olduğunu düşünüyorum. Ayrıca bunun için CSS kullanmayacağınızı da varsayıyorum. Aksine, bu gri ve negatif tonları görüntünüze sepya katacaktır. %100 tam bir sepya olacak, %0 orijinal görüntü olacaktır.

filtre: sepya (%100);
// Tarayıcıya Özel
-webkit-filtre: sepya(100%);
-moz-filtre: sepya (%100);
-o-filtre: sepya(100%);
-ms-filtre: sepya(100%);

Tarayıcı desteği

Herhangi bir sorunuz varsa, bizim kullanmanızı öneririz

Merhaba. Bugün web sitelerinde güzel efektlerle kimseyi şaşırtmayacaksınız. Bazıları bunu Flash'ta son 10 yıldır yapıyor, bazıları ise Javascript'te yapmayı henüz bırakmadı, ancak en gelişmiş olanlar CSS3'ü uzun süredir kullanıyor. Bugün yapacağımız şey bu.

Bir CSS görüntüsünün (Gri tonlamalı görüntü css) rengini nasıl değiştireceğinizi öğrenelim ve bunu güzelce yapalım

O halde basit bir şeyle başlayalım, güzel fotoğraflara ihtiyacımız var, şunu alalım:

Doygunluğunu azaltmamız gerekiyor (CSS görüntüsünün doygunluğunu azaltın - renkleri kaldırın, görüntüyü siyah beyaz yapın). Bunun için (ve genel olarak grafiklerle çalışmak için) CSS3'ün özel bir filtre aracı vardır.

Kullanacağımız şey bu.

Çözüm: Görüntünün CSS'sinin doygunluğunu giderin

İlk önce görüntünün kendisini düzenleyelim:

Daha sonra görüntü için bir stil belirleyeceğiz:

Img ( -webkit-filter: gri tonlamalı (%100); -moz-filter: gri tonlamalı (%100); -ms-filter: gri tonlamalı (%100); -o-filter: gri tonlamalı (%100); filtre: gri tonlamalı( %100); filtre: gri; /* IE 6-9 */ )

Artık resmimiz siyah beyaz olacak.

Elbette burada durabilirsiniz, ancak resmin aynı zamanda kullanıcının eylemlerine de yanıt vermesi çok daha ilginçtir.

Resmin üzerine geldiğinizde yavaş yavaş renklenecek şekilde yapmayı öneriyorum.

Aslında bunu yapmak hiç de zor değil ve Javascript bilmenize de hiç gerek yok.

Renk değiştirme görselinin CSS'sini canlandırın

Önceki tarzımıza biraz ekleyelim:

Img ( -webkit-filter: gri tonlamalı (%100); -moz-filter: gri tonlamalı (%100); -ms-filter: gri tonlamalı (%100); -o-filter: gri tonlamalı (%100); filtre: gri tonlamalı( %100); filtre: gri; /* IE 6-9 */ ) img:hover ( -webkit-filter: yok; -moz-filter: yok; -ms-filter: yok; -o-filter: yok; filtre : yok; filtre: yok /* IE 6-9 */ )

Bu, fareyle üzerine geldiğinizde resmin renkli olmasını sağlar. Renk değişikliği sürecini animasyonlu hale getirmek için CSS3 geçişini de kullanalım:

Img ( -webkit-filter: gri tonlamalı (%100); -moz-filter: gri tonlamalı (%100); -ms-filter: gri tonlamalı (%100); -o-filter: gri tonlamalı (%100); filtre: gri tonlamalı( 100%); filtre: gri; /* IE 6-9 */ /*Bu kodu ekleyin*/ -webkit-transition: tümü 1'ler; -moz-transition: tümü 1'ler; /*geçişli kodun sonu; */ ) img:hover ( -webkit-filter: yok; -moz-filter: yok; -ms-filter: yok; -o-filter: yok; filtre: yok; filtre : yok; /* IE 6-9 * / )

Geçişteki all parametresi kuralın tüm stiller için çalışacağını söyler, ikinci parametre ise animasyon süresidir.
İlk parametrede belirli bir özelliği (örneğin, yalnızca yüksekliği canlandırmak için yükseklik) ve ikincisinde saniye cinsinden süreyi (ondalık kesirlerde olabilir - 0,1 saniye) belirtebilirsiniz.

Bir görüntüyü olabildiğince hızlı bir şekilde ve grafik düzenleyiciler kullanmadan gri hale getirmek gerekebilir. Elbette Adobe Photoshop grafik düzenleyicisini kullanabilirsiniz (derinliği ve tonu bile ayarlayabilirsiniz). Elbette bu tür parametreleri tarayıcıda yapılandıramazsınız, ancak gözlerimiz (tabii ki profesyonel değilseniz) farkı pek fark etmeyecektir.

Bu yazıda bir görüntüyü gri yapmanın yollarına bakacağız.

1. CSS filtresi

Özelliğin kullanılması filtre belki de siyah beyaz bir görüntü oluşturmanın en kolay yoludur. IE'de siyah beyaz bir resim oluşturmak için özelliği de kullanmanız gerekir. filtre.

Bugün, mülkiyet filtre Firefox, Chrome ve Safari gibi tarayıcılar tarafından desteklenen CSS3 teknolojisinin bir parçasıdır. Webkit filtreleri yalnızca siyah beyaz efekti oluşturmakla kalmaz, aynı zamanda sepya ve bulanıklık efektleri de verebilir.

Görüntüyü gri yapmak için aşağıdaki özellikleri ayarlamanız gerekir:

Bu kod IE6-9, Chrome18+, Safari 6.0+ ve Opera15+'da çalışacaktır.

2. Javascript

Yukarıdaki kodun bir alternatifi, etkinleştirildiğinde IE6 ve altı dahil tüm tarayıcılarda çalışan Javascript'tir.

function grey(imgObj) ( var canvas = document.createElement ("canvas" ) ; var canvasContext = canvas.getContext ( "2d" ) ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0, 0) ; var imgPixels = canvasContext.getImageData (0, 0, imgW, imgH) ;

Javascript kullanarak, bir görsele, örneğin görselin üzerine gelip tıkladığınızda siyah beyaz efekti verebiliriz. Yumuşak bir solma-gri efekti oluşturmak için jQuery'yi birlikte kullanabilirsiniz. Tek dezavantajı tarayıcıda Javascript'in devre dışı bırakılabilmesidir.

3.SVG

Başka bir yol da SVG filtrelerini kullanmaktır.

Tek yapmanız gereken bir SVG dosyası oluşturmak ve aşağıdaki kodu kullanmaktır:

#gri tonlamalı");"

Sonuç benzer olacaktır.

Çözüm

img ( -webkit-filter: gri tonlamalı(100% ) ; -webkit-filter: gri tonlamalı(1 ) ; filter : gri tonlamalı(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filtre : gri ;

Bu kod Javascript ile birlikte kullanılabilir, Javascript devre dışı ise bu kod çalışacaktır. Modernizr bu konuda yardımcı olabilir. Modernizr ekler js tarayıcıda Javascript etkinleştirilmişse gövde için sınıf ve sınıfı kaydedecektir hayır-js

.no-js img ( -webkit-filter: gri tonlamalı(100% ) ; -webkit-filter: gri tonlamalı(1 ) ; filtre : gri tonlamalı(100% ) ; filtre : url (../img/gray.svg#grayscale " ) ; filtre : gri ) CSS3 filtreleri

Tarayıcıda Photoshop filtrelerine benzer görsel efektler oluşturun. Filtreler yalnızca görsellere değil, boş olmayan tüm öğelere de eklenebilir.

Filtre seti, tarayıcıya önceden yüklenmiş olanlarla sınırlı değildir. SVG filtrelerini, svg öğesiyle birlikte bağlantıdan indirerek de kullanabilirsiniz.

Tarayıcılar sayfayı piksel piksel işler, belirtilen efektleri uygular ve sonucu orijinalin üzerine çizer. Böylece, birkaç filtre kullanarak farklı efektler elde edebilirsiniz; bunlar birbiriyle örtüşüyor gibi görünüyor. Ne kadar çok filtre olursa, tarayıcının sayfayı oluşturması o kadar uzun sürer.

Aynı anda birden fazla filtre uygulayabilirsiniz. Bu tür efektleri uygulamanın klasik yolu, fareyi bir öğenin üzerine getirmektir: vurgulu.

Tarayıcı desteği

yani: desteklemiyor
Kenar: 13.0 url() hariç
Firefox: 35.0
Krom: 18.0 -web kiti-
Safari: 9.1, 6.0 -web kiti-
Opera: 40.0, 15.0 -web kiti-
iOS Safari'si: 9.3, 6.1 -webkit-
Android Tarayıcı: 53.0, 4.4 -webkit-
Android için Chrome: 55.0, 47.0 -webkit-