CSS görüntü filtreleri. CSS3 Filtreleri: Stil Oluşturma CSS Filtresi İşlevlerini ve Sözdizimini Kullanarak Görüntüleri Değiştirme

Bu, herhangi bir komut dosyası veya ön işleme olmadan CSS kullanılarak yapılabilir. Evet, teknolojiler durmuyor :) Uygulaması çok basit ve zamanımızda popüler olan herhangi bir SVG'nin kullanılmasını bile gerektirmiyor.

Fotoğraftaki yazı tipi rengi nasıl yeniden renklendirilir

MDN'yi dikkatlice okursanız, neredeyse hepsi aynı olmasına rağmen, karışım modlarını kabaca anlayabilir ve aralarındaki farkları görebilirsiniz. Resmin üzerinde beyaz metin olması bize metnin üst üste geldiği yerde ters çevrilmiş bir resim olan bir sonuç verir. Basit siyah beyaz görüntüler için, orijinal görüntüdeki siyah, üzerinde beyaz metin olduğunda beyaza döner ve orijinal görüntüdeki beyaz, üstünde beyaz metin olduğunda siyaha döner.

Örnek olarak ilkel bir HTML kodunu ele alalım:

Ve ona biraz daha ilkel CSS ekleyin:

Arka plan (arka plan: url (super_cat.jpg); genişlik: 800 piksel; yükseklik: 450 piksel;) h2 (renk: #FFF; karma karışım modu: fark; yazı tipi: 900 120 piksel / 120 piksel Arial; metin hizalama: merkez) yayılma (ekran: blok; yazı tipi boyutu: 80 piksel)

Photoshop olmadan bile harika çıktı! Hem metin hem de görüntü değiştirilebilir ve efekt, herhangi bir JavaScript'e veya CSS veya SV maskelerinde herhangi bir değişiklik yapılmasına gerek kalmadan korunur. Ancak bu basit görüntüler için iyidir. Daha karmaşık filtreler ile ek filtreler uygulamanız ve bunları karıştırmanız gerekir.

Örneğin, bize yardımcı olması için aşağıdaki css filtresini h2 etiketimize ekleyebiliriz:

H2 (filtre: ters çevir (1) gri tonlamalı (1) kontrast (9))

Filtreleri paylaşma seçenekleri yalnızca hayal gücünüzle ve stil zevkinizle sınırlıdır.

ters çevir () işlevi, görüntüdeki renkleri tersine çevirir. Bir fotoğrafı negatife çevirmeye benzer şekilde çalışır.

Sözdizimi

filtre: ters çevir (<значение>);

Tanımlamalar

	Açıklama	Örnek
<тип>	Değerin türünü belirtir.	<размер>
A &&B	Değerler gösterilen sırada görüntülenmelidir.	<размер> && <цвет>
bir | B	Önerilen değerlerden yalnızca birinin seçilmesi gerektiğini belirtir (A veya B).	normal | küçük şapkalar
Bir || B	Her değer tek başına veya herhangi bir sırayla başkalarıyla birlikte kullanılabilir.	genişlik || saymak
	Grup değerleri.	[kırp || geçmek]
*	Sıfır veya daha fazla kez tekrarlayın.	[,<время>]*
+	Bir veya daha fazla kez tekrarlayın.	<число>+
?	Belirtilen tür, sözcük veya grup isteğe bağlıdır.	ek?
(A, B)	En az A'yı tekrarlayın, ancak B'den fazla değil.	<радиус>{1,4}
#	Virgülle ayırarak bir veya daha fazla kez tekrarlayın.	<время>#

Değerler

0 değeri görüntüyü olduğu gibi bırakır. %100 veya 1 değeri, resmin renklerini tamamen tersine çevirir. %0'dan %100'e veya 0'dan 1'e kadar olan değerler renkleri kısmen tersine çevirir.

Negatif değerlere izin verilmez. Boş bir değer 0 olarak kabul edilir.

Kum havuzu

img (filtre: ters çevir (((playgroundValue))%);)

Örnek

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.

Pirinç. 1. Renk inversiyonu. Solda orijinal, sağda filtreli bir fotoğraf

Not

Sürüm 53'ten önceki Chrome, sürüm 40'tan önceki Opera ve sürüm 9.1'den önceki Safari -webkit-filter özelliğini destekler.

Şartname

Her spesifikasyon birkaç onay aşamasından geçer.

• Öneri - Bu belirtim W3C tarafından onaylanmıştır ve standart olarak önerilmektedir.
• Aday Önerisi ( Olası öneri) - standarttan sorumlu grup, hedeflerine uygun olduğundan memnundur, ancak standardı uygulamak için geliştirici topluluğunun yardımına ihtiyaç vardır.
• Önerilen Öneri ( Önerilen öneri) - Bu noktada belge nihai onay için W3C Danışma Konseyi'ne sunulur.
• Çalışma Taslağı - Tartışma ve topluluk incelemesi için yapılan değişikliklerden sonra taslağın daha olgun bir versiyonu.
• Editörün taslağı ( içerik taslağı) - proje editörleri tarafından düzenlendikten sonra standardın taslak versiyonu.
• Taslak ( taslak şartname) standardın ilk taslağıdır.

tarayıcılar

tarayıcılar

Tarayıcı tablosunda aşağıdaki kurallar kullanılır.

Açıklama

Öğenin renk veya saydamlık parametrelerini ayarlar, ayrıca dönüşü ayarlar.

Sözdizimi

filtre: progid: DXImageTransform.Microsoft.BasicImage (seçenekler)

Seçenekler

etkin Filtreyi etkinleştirir veya devre dışı bırakır. Filtreyi etkinleştirmek için True, devre dışı bırakmak için false. grayScale Renkler gri tonlarına dönüştürülür. 1 - gri renkler, 0 - orijinal renkleri görüntüler. invert Öğenin renklerini tersine çevirir. 1 - renkleri ters çevir, 0 - orijinal renkleri koru. mask Belirli renklerin saydam olması gerektiğini belirtir. 1 - şeffaflık maskColor parametresi kullanılarak değiştirilir, 0 - orijinal renkleri görüntüler. mascColor Öğenin içeriği için opaklık maskesi olarak kullanılan rengi ayarlar. Renk, 0xAARRGGBB biçiminde belirtilir; burada AA, saydamlığın onaltılık değeridir, RR kırmızı bileşendir, GG yeşil bileşendir, BB mavi bileşendir. ayna Öğeyi yansıtın. 1 - yatay çevir, 0 - orijinali koru. opaklık Opaklık değerini ayarlar. 0 - tam şeffaflık, 1.0 - eleman opaklığı. döndürme Öğeyi döndürür. 0 - ana konum, 1 - 90 ° saat yönünde dönüş, 2 - 180 ° dönüş, 3 - 270 ° dönüş. xray Renkler, renk tersine çevrilerek gri tonlamaya dönüştürülür.

Filtrenin içindeki parametreler, herhangi bir sırada virgülle ayrılmış olarak listelenir.

HTML5 CSS2.1 IE Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.

Pirinç. 1. xray parametresini kullanma

tarayıcılar

IE6 ve IE7'de filtreler yalnızca özelliği ayarlanmış öğelere uygulanır.

Internet Explorer 9, bir belge yazdırdığınızda öğelere filtre eklemez.

CSS3 filtreleri, bulanıklık, parlaklık ve daha birçok filtre uygulayarak HTML öğelerini ve görüntülerini değiştirmenize olanak tanıyan, SVG'nin çok ilginç bir dalıdır. Bu eğitimde, tam olarak nasıl çalıştıklarına hızlıca bir göz atacağız.

Nasıl çalışır?

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

filtre: filtre (değer);

Beklediğiniz gibi, bu özellik bir tarayıcı önekinin kullanılmasını gerektirir. Ama şimdilik sadece -webkit-(Chrome ve Safari), bu özelliği destekleyen tek tarayıcı motorudur.

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

filtreleme

Kullanılabilir çok sayıda filtre vardır, bu yüzden her birini daha iyi anlamak için bunlara ayrı ayrı göz atalım. Bir öğeye (bir boşlukla ayrılmış) birkaç filtre uygulanabilir, örneğin, parlaklık ve bulanıklık:

filtre: bulanıklık (5 piksel) parlaklık (0,5);

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

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

Bulanıklık

Hiç bir resmi veya metni tek bir CSS ile Gauss bulanıklaştırmayı istediniz mi? Filtrelerle yapabilirsiniz! Bulanıklık piksel cinsinden ölçülür, böylece şöyle bir şey yapabilirsiniz:

filtre: bulanıklık (5 piksel);
// Tarayıcıya Özgü
-webkit filtresi: bulanıklık (5 piksel);
-moz filtresi: bulanıklık (5 piksel);
-o-filtre: bulanıklık (5 piksel);
-ms filtresi: bulanıklık (5 piksel);

Parlaklık

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

filtre: parlaklık (0.2);
// Tarayıcıya Özgü
-webkit filtresi: parlaklık (0.2);
-moz filtresi: parlaklık (0.2);
-o-filtre: parlaklık (0.2);
-ms filtresi: parlaklık (0.2);

Doyma

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

filtre: doymuş (%50);
// Tarayıcıya Özgü
-webkit filtresi: doymuş (%50);
-moz-filtre: doymuş (%50);
-o-filtre: doymuş (%50);
-ms-filtre: doymuş (%50);

döndürme tonu

Bu filtre, tonu çevirerek değiştirmenize olanak tanır (sonra çevirdiğiniz bir renk çarkı hayal edin). Derece olarak ölçülür.

filtre: ton döndür (20 derece);
// Tarayıcıya Özgü
-webkit-filtre: ton döndürme (20deg);
-moz-filtre: ton-döndür (20deg);
-o-filtre: ton döndürme (20 derece);
-ms-filtre: ton döndürme (20deg);

Zıtlık

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

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

ters çevirme

Yüzde olarak da ölçülür. %0'dan %100'e kadar değerler mevcuttur. İşin tuhafı, şu anda webkit, %100'den küçükse ters çevirmeleri desteklemiyor.

filtre: ters çevir (%100);
// Tarayıcıya Özgü
-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üyü desatüre etmek istediğiniz yüzdeyi belirtin. %0'dan %100'e kadar değerler mevcuttur.

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

Sepya

Instagram'da bir şeyler yayınlamak istiyorsanız, bunun çok yararlı olduğunu düşünüyorum. Yine de bunun için CSS kullanmayacağınızı varsayıyorum. Her neyse, bu gri ve negatif tonları, bir araya geldiğinde görüntüye sepya eklemenize izin verecektir. %100 - bu bitmiş sepya olacak, %0 - orijinal görüntü.

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

tarayıcı desteği

	Web seti	Mozilla	trident	presto
Bulanıklık	Deneysel	Numara	Numara	Numara
Parlaklık
Doyma
Tonları döndür
Zıtlık
ters çevirme	Yalnızca tam tersine çevirme
ağartma	Deneysel
Sepya

Herhangi bir sorunuz varsa, uygulamamızı kullanmanızı öneririz.