Google I/O'ya katıldığınız için teşekkürler! İçerikleri isteğe bağlı olarak izleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Filtreler

The CSS Podcast - 023: Filters

Bir resmin üst kısmında yer alan, biraz opak, buzlu cam efekti olan bir öğe oluşturmanız gerektiğini varsayalım. Metin, resim değil canlı metin olmalıdır. Bunu nasıl yapıyorsunuz?

CSS filtreleri ve backdrop-filter ile efektleri uygulayabilir ve gerektiğinde gerçek zamanlı olarak bulanıklaştırabiliriz. Bulanıklaştırma ve opaklık, mevcut birçok filtreden ikisidir. Bu filtrelerin ne işe yaradığına ve nasıl kullanıldığına kısaca göz atalım.

`filter` mülkü

Browser Support

Source

filter için aşağıdaki filtrelerden birini veya daha fazlasını değer olarak uygulayabilirsiniz. Bir filtreyi yanlış uygularsanız filter için tanımlanan diğer filtreler çalışmaz.

`blur`

Bu işlev, Gauss bulanıklığı uygular ve iletebileceğiniz tek bağımsız değişken radius'dir. Bu bağımsız değişken, bulanıklığın ne kadar uygulanacağını belirtir. Bu, 10px gibi bir uzunluk birimi olmalıdır. Yüzdeler kabul edilmez.

.my-element {
    filter: blur(0.2em);
}

`brightness`

Browser Support

Source

Bir öğenin parlaklığını artırmak veya azaltmak için parlaklık işlevini kullanın. Parlaklık değeri yüzde olarak ifade edilir. Değişmeyen görüntü %100 değerinde ifade edilir. %0 değeri resmi tamamen siyah yapar. Bu nedenle, %0 ile% 100 arasındaki değerler resmin parlaklığını azaltır. Parlaklığı artırmak için% 100'ün üzerindeki değerleri kullanın.

.my-element {
    filter: brightness(80%);
}

Not: brightness gibi filtrelerde yüzde değerleri yerine ondalık değerler de kullanabilirsiniz. Ondalık sayı kullanarak parlaklığı% 80 olarak ayarlamak için 0.8 yazın.

`contrast`

Browser Support

Source

Sırasıyla kontrastı azaltmak veya artırmak için% 0 ile% 100 arasında bir değer ayarlayın.

.my-element {
    filter: contrast(160%);
}

`grayscale`

Browser Support

Source

grayscale() için değer olarak 1'ü kullanarak tamamen gri tonlamalı bir efekt uygulayabilir veya tamamen doygun bir öğe elde etmek için 0'yi kullanabilirsiniz. Yalnızca kısmi bir gri tonlama efekti uygulamak için yüzde veya ondalık değerler de kullanabilirsiniz. Bağımsız değişken iletmezseniz öğe tamamen gri tonlara dönüşür. %100'den büyük bir değer gönderirseniz bu değer %100 olarak sınırlandırılır.

.my-element {
    filter: grayscale(80%);
}

`invert`

Browser Support

Source

grayscale gibi, invert() işlevini etkinleştirmek veya devre dışı bırakmak için 1 ya da 0 değerini invert() işlevine iletebilirsiniz. Bu işlev etkinleştirildiğinde öğenin renkleri tamamen tersine çevrilir. Renkleri yalnızca kısmen ters çevirmek için yüzde veya ondalık değerler de kullanabilirsiniz. invert() işlevine herhangi bir bağımsız değişken iletmezseniz öğe tamamen tersine çevrilir.

.my-element {
    filter: invert(1);
}

`opacity`

Browser Support

Source

opacity() filtresi, opaklığı artırmak veya azaltmak için bir sayı veya yüzde iletmeniz gereken opacity mülkü gibi çalışır. Bağımsız değişken iletmezseniz öğe tamamen görünür olur.

.my-element {
    filter: opacity(0.3);
}

`saturate`

Browser Support

Source

Doygunluk filtresi, brightness filtresine çok benzer ve aynı bağımsız değişkeni kabul eder: sayı veya yüzde. saturate, parlaklık efektini artırmak veya azaltmak yerine renk doygunluğunu artırır ya da azaltır.

.my-element {
    filter: saturate(155%);
}

`sepia`

Browser Support

Source

Bu filtreyle grayscale() gibi çalışan bir sepya tonu efekti ekleyebilirsiniz. Sepya tonu, siyah tonları sıcaklaştırmak için kahverengi tonlara dönüştüren bir fotoğraf baskı tekniğidir. Etkiyi artıran veya azaltan sepia() için bağımsız değişken olarak bir sayı veya yüzde geçirebilirsiniz. Hiçbir bağımsız değişken iletilmediği takdirde tam bir sepya efekti (sepia(100%) ile eşdeğer) eklenir.

.my-element {
    filter: sepia(70%);
}

`hue-rotate`

Browser Support

Source

hsl içindeki ton değerinin, renklerle ilgili derste renk tekerleğinin bir dönüşümünü nasıl referans aldığı hakkında bilgi edinmiştiniz. Bu filtre de benzer şekilde çalışır. Derece veya tur gibi bir açı gönderirseniz bu açı, öğenin tüm renklerinin tonunu değiştirerek referans verdiği renk tekerleğinin bölümünü değiştirir. Hiçbir bağımsız değişken iletmezseniz hiçbir işlem yapılmaz.

.my-element {
    filter: hue-rotate(120deg);
}

`drop-shadow`

Browser Support

Source

drop-shadow ile Photoshop gibi bir tasarım aracında yaptığınız gibi eğriyi saran bir gölge uygulayabilirsiniz. Bu gölge, bir alfa maskesine uygulanır. Bu sayede, kesilmiş bir resme gölge eklemek için çok kullanışlı olur. drop-shadow filtresi, boşlukla ayrılmış offset-x, offset-y, blur ve color değerlerini içeren bir gölge parametresi alır. box-shadow ile neredeyse aynıdır ancak inset anahtar kelimesi ve spread değeri desteklenmez.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Gölgeler modülünde farklı gölge türleri hakkında daha fazla bilgi edinin.

`url`

Browser Support

Source

url filtresi, bağlı bir SVG öğesinden veya dosyasından SVG filtresi uygulamanıza olanak tanır. SVG filtreleri hakkında daha fazla bilgiyi burada bulabilirsiniz.

Arka plan filtresi

Browser Support

Source

backdrop-filter mülkü, filter ile aynı filtre işlevi değerlerinin tümünü kabul eder. backdrop-filter ile filter arasındaki fark, backdrop-filter özelliğinin filtreleri yalnızca arka plana uygularken filter özelliğinin bunları öğenin tamamına uygulamasıdır.

Metnin bulanıklaşmasını ve ideal olarak ek HTML öğeleri eklemek zorunda kalmayı istemediğiniz için bu dersin en başındaki örnek mükemmel bir örnektir. Yalnızca arka plana filtre uygulayabilmek bunu mümkün kılar.

Öğrendiklerinizi test etme

Filtrelerle ilgili bilginizi test edin

Aşağıdakilerden hangisi CSS filtre işlevleridir?

grayscale()

🎉

invert()

🎉

flip()

Tekrar deneyin.

multiply()

Tekrar deneyin.

blur()

🎉

brightness()

🎉

CSS, SVG filtrelerini kullanabilir mi?

Evet

url() filtre işlevi bunu sağlar

Hayır

Tekrar deneyin.