CSS Filtreleri, yazarların çeşitli görsel efektler (tarayıcı için Photoshop filtreleri gibi) elde etmek için kullanabilecekleri güçlü bir araçtır. CSS filterözelliği, öğe görüntülenmeden önce bir öğenin işlemesinde bulanıklaştırma veya renk kaydırma gibi efektlere erişim sağlar. Filtreler genellikle bir görüntünün, arka planın veya kenarlığın oluşturulmasını ayarlamak için kullanılır.
Sözdizimi şöyledir:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Değer için kullanılacak bir dizi işlev vardır:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- SVG filtreleri uygulamak içincustom()- "Çok yakında"
Boşluklarla ayrılmış olarak birden fazla işlev kullanılabilir.
.do-more-things ( filter: blur(20px) grayscale(20%); )Filtre Fonksiyonları
CSS filtre özelliğini kullanmak için, yukarıda listelenen aşağıdaki işlevlerden biri için bir değer belirtirsiniz. Değer geçersizse işlev "yok" değerini döndürür. Belirtilenler dışında, yüzde işaretiyle ifade edilen bir değeri alan işlevler (% 34'te olduğu gibi), ondalık olarak ifade edilen değeri de kabul eder (0.34'te olduğu gibi).
İşte bireysel filtrelerle biraz oynamanıza izin veren bir demo:
gri tonlamalı ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Giriş görüntüsünü gri tonlamaya dönüştürür. "Miktar" değeri, dönüşüm oranını tanımlar. % 100 değeri tamamen gri tonlamadır. % 0 değeri, girişi değiştirmeden bırakır. % 0 ile% 100 arasındaki değerler, efektin doğrusal çarpanlarıdır. "Miktar" parametresi eksikse,% 100 değeri kullanılır. Negatif değerlere izin verilmez.
sepya()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Giriş görüntüsünü sepyaya dönüştürür. "Miktar" değeri, dönüşüm oranını tanımlar. % 100 değeri tamamen sepyadır. 0 değeri, girişi değiştirmeden bırakır. % 0 ile% 100 arasındaki değerler, efektin doğrusal çarpanlarıdır. "Miktar" parametresi eksikse,% 100 değeri kullanılır. Negatif değerlere izin verilmez.
doyurmak ()
filter: saturate(2); /* same as… */ filter: sature(200%);Giriş görüntüsünü doyurur. "Miktar" değeri, dönüşüm oranını tanımlar. % 0 değeri tamamen doygun değildir. % 100 değeri, girişi değiştirmeden bırakır. Diğer değerler, efekt üzerindeki doğrusal çarpanlardır. Süper doygun sonuçlar sağlayan% 100'ün üzerindeki değerlere izin verilir. "Miktar" parametresi eksikse,% 100 değeri kullanılır. Negatif değerlere izin verilmez.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Giriş görüntüsüne bir ton dönüşü uygular. "Açı" değeri, giriş örneklerinin ayarlanacağı renk çemberi etrafındaki derece sayısını tanımlar. 0deg değeri, girdiyi değiştirmeden bırakır. "Açı" parametresi eksikse, bir değeri 0degkullanılır. Maksimum değer 360deg.
ters çevir ()
filter: invert(100%);Giriş görüntüsündeki örnekleri ters çevirir. "Miktar" değeri, dönüşüm oranını tanımlar. % 100 değeri tamamen ters çevrilir. % 0 değeri, girişi değiştirmeden bırakır. % 0 ile% 100 arasındaki değerler, efektin doğrusal çarpanlarıdır. "Miktar" parametresi eksikse,% 100 değeri kullanılır. Negatif değerlere izin verilmez.
opaklık ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Giriş görüntüsündeki örneklere şeffaflık uygular. "Miktar" değeri, dönüşüm oranını tanımlar. % 0 değeri tamamen şeffaftır. % 100 değeri, girişi değiştirmeden bırakır. % 0 ile% 100 arasındaki değerler, efektin doğrusal çarpanlarıdır. Bu, girdi görüntü örneklerini miktarla çarpmaya eşdeğerdir. "Miktar" parametresi eksikse,% 100 değeri kullanılır. Bu işlev, daha yerleşik opaklık özelliğine benzer; fark, filtrelerle bazı tarayıcıların daha iyi performans için donanım hızlandırma sağlamasıdır. Negatif değerlere izin verilmez.
parlaklık()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Giriş görüntüsüne doğrusal bir çarpan uygulayarak daha çok veya daha az parlak görünmesini sağlar. % 0 değeri, tamamen siyah bir görüntü oluşturur. % 100 değeri, girişi değiştirmeden bırakır. Diğer değerler, efekt üzerindeki doğrusal çarpanlardır. Daha parlak sonuçlar sağlayan% 100'ün üzerindeki değerlere izin verilir. "Miktar" parametresi eksikse,% 100 değeri kullanılır.
kontrast()
filter: contrast(4); /* same as… */ filter: contrast(400%);Girişin kontrastını ayarlar. % 0 değeri, tamamen siyah bir görüntü oluşturur. % 100 değeri, girişi değiştirmeden bırakır. Miktarın% 100'ün üzerindeki değerlere izin verilir, bu da daha az kontrastlı sonuçlar sağlar. "Miktar" parametresi eksikse,% 100 değeri kullanılır.
bulanıklık()
filter: blur(5px); filter: blur(1rem);Giriş görüntüsüne Gauss bulanıklığı uygular. "Yarıçap" değeri, Gauss işlevine olan standart sapmanın değerini veya ekranda kaç pikselin birbirine karıştığını tanımlar, böylece daha büyük bir değer daha fazla bulanıklık yaratacaktır. Hiçbir parametre sağlanmazsa, 0 değeri kullanılır. Parametre bir CSS uzunluğu olarak belirtildi, ancak yüzde değerlerini kabul etmiyor.
Düşen gölge()
filter: drop-shadow((2,3) ?)Giriş görüntüsüne bir alt gölge efekti uygular. Alt gölge, belirli bir renkte çizilmiş, girdi görüntüsünün alfa maskesinin görüntünün altında birleştirilen bulanık, ofset bir versiyonudur. İşlev, 'inset' anahtar sözcüğüne izin verilmemesi dışında, (CSS3 Arka Planlarında tanımlanan) bir tür parametresi kabul eder.
Bu işlev, daha yerleşik kutu gölge özelliğine benzer; fark, filtrelerle bazı tarayıcıların daha iyi performans için donanım hızlandırma sağlamasıdır.
Alt gölge box-shadow, yalnızca kutuyu yolu olarak değerlendirmekten farklı olarak, amaçlanan nesnelerin doğal olarak anahatlarını taklit eder .
Metin gölgesinde olduğu gibi, nesneden daha büyük katı bir gölge oluşturmak için "yayılma" parametresi yoktur.
url ()
filter: url()url()Fonksiyon Bir SVG filtre belirten bir XML dosyasının konumunu alır ve belirli bir filtre elemanının bir çapa içerebilir. İşte eğlenceli bir demo ile SVG filtrelerine güzel bir giriş olarak çalışan bir öğretici.
Hareketli Filtreler
Filtreler canlandırılabilir olduğundan, bir sürü eğlence için kapıları açabilir.
Notlar
Oluşturmayı değiştirmek için herhangi bir sayıda işlevi birleştirebilirsiniz, ancak sıralama yine de önemlidir (yani, grayscale()after kullanmak sepia()tamamen gri çıktıyla sonuçlanacaktır).
"Yok" dışında hesaplanan bir değer, CSS opaklığının yaptığı gibi bir yığın bağlamının oluşturulmasıyla sonuçlanır. Filter özelliğinin hedef öğenin kutu modelinin geometrisi üzerinde hiçbir etkisi yoktur, ancak filtreler bir öğenin kenarlık kutusunun dışında boyamaya neden olabilir. Hedef elemanın herhangi bir kısmı filtre işlevlerinden etkilenir. Bu, filtrenin uygulandığı öğenin ve onun alt öğelerinin tüm içeriğini, arka planını, kenarlıklarını, metin süslemesini, ana hatlarını ve görünür kaydırma mekanizmasını içerir. Filtreler, tek tek metin yayılımları gibi satır içi içeriğe de uygulanabilir.
Spesifikasyon ayrıca filter(image-URL, filter-functions)bir görüntü için bir sarmalayıcı işlevi sunar. CSS içinde kullandığınız anda herhangi bir resmi filtrelemenize izin verir. Örneğin, metni bulanıklaştırmadan bir arka plan resmini bulanıklaştırabilirsiniz. Bu filtre işlevi henüz tarayıcılarda desteklenmemektedir. Bu arada, benzer bir efekt oluşturmak için hem arka planı hem de filtreyi bir sözde öğeye uygulayabilirsiniz.
IE'ye özel filtre öğeleri
Ayrıca filterözelliği, aşağıdaki gibi kullandı:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Çoğunlukla IE 8'i ve aşağıyı desteklemeniz gerektiğinde opaklık için kullanılır.
Daha fazla bilgi
- W3C Filtre Efektleri Özellikleri
- http://html5-demos.appspot.com/static/css/filters/index.html
- Bennett Feely'nin Filtreler Galerisi
- MDN Belgeleri
- Kullanabilirmiyim
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- CSS Filtresi Efektlerini Anlamak
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 18 * | 35 | Hayır | 79 | 6 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 * | 6.0-6.1 * |