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

CSS Podcast'i - 023: Filtreler 'nı inceleyin.

Hafif opak, benzersiz ve basit bir öğe bir resmin üzerinde yer alan buzlu cam efekti. Metnin resim değil, canlı metin olması gerekir. Bunu nasıl yapabilirsiniz?

CSS filtreleri ve backdrop-filter öğesinin bir kombinasyonu gerçek zamanlı olarak efekt uygulamamızı ve gerekenleri bulanıklaştırmamızı sağlıyor. Bulanıklık ve opaklık pek çok filtreden ikisidir. Şimdi, bunların ne işe yaradığına ve nasıl kullanılacağına hızlıca bakalım.

`filter` mülkü

Tarayıcı Desteği

Kaynak

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

`blur`

Bu, gauss bulanıklaştırma uygular ve geçirebileceğiniz tek bağımsız değişken radius olur. yani ne kadar bulanıklaştırma uygulandığından. Bunun 10px gibi bir uzunluk birimi olması gerekir. Yüzdeler kabul edilmez.

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

`brightness`

Tarayıcı Desteği

Kaynak

Bir öğenin parlaklığını artırmak veya azaltmak için: parlaklık işlevini kullanın. Parlaklık değeri bir yüzde olarak ifade edilir ve değiştirilmemiş resim %100 değeri olarak ifade edilir. %0 değeri, resmi tamamen siyah hale getirir. bu nedenle% 0 ile% 100 arasındaki değerler resmin parlaklığını azaltır. Parlaklığı artırmak için% 100'ün üzerinde değerler kullanın.

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

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

`contrast`

Tarayıcı Desteği

Kaynak

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

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

`grayscale`

Tarayıcı Desteği

Kaynak

grayscale() için bir değer olarak 1 kullanarak tamamen gri tonlama efekti uygulayabilirsiniz. veya 0 için tamamen doygun bir öğe kullanın. Yalnızca kısmi gri tonlama efekti uygulamak için yüzde veya ondalık değerleri de kullanabilirsiniz. Hiçbir bağımsız değişken iletmezseniz öğe tamamen gri tonlamalı olur. %100'den yüksek bir değer geçerseniz değer %100 ile sınırlanır.

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

`invert`

Tarayıcı Desteği

Kaynak

Tıpkı grayscale gibi, invert() işlevine 1 veya 0 ileterek bu işlevi açabilir veya kapatabilirsiniz. Bu özellik açıkken öğenin renkleri tamamen tersine çevrilir. Renklerin yalnızca kısmi tersini uygulamak için yüzde veya ondalık değerleri de kullanabilirsiniz. invert() işlevine bağımsız değişken iletmezseniz öğe tamamen tersine çevrilmiş olur.

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

`opacity`

Tarayıcı Desteği

Kaynak

opacity() filtresi aynı opacity özelliğinde olduğu gibi çalışır. Burada opaklığı artırmak veya azaltmak için bir sayı ya da yüzde değeri iletebilirsiniz. Hiçbir bağımsız değişken iletmezseniz öğe tamamen görünür olur.

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

`saturate`

Tarayıcı Desteği

Kaynak

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

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

`sepia`

Tarayıcı Desteği

Kaynak

grayscale() gibi çalışan bu filtreyle bir sepya tonu efekti ekleyebilirsiniz. Sepya tonu, siyah tonları kahverengi tonlara dönüştüren bir fotoğraf baskısı tekniğidir. sepia() için bağımsız değişken olarak bir sayı veya yüzde aktarabilirsiniz Bu da etkiyi artırır veya azaltır. Bağımsız değişken verilmemesi, tam bir sepya efekti ekler (sepia(100%) ile eşdeğerdir).

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

`hue-rotate`

Tarayıcı Desteği

Kaynak

hsl içindeki tonun, renk çemberinin dönüşüne referans renkler dersini kullanın ve bu filtre benzer şekilde çalışır. Derece veya dönüş gibi bir açıdan geçerseniz öğenin tüm renklerinin tonunu değiştirir, renk çemberinin atıfta bulunduğu kısmı değiştirmeniz gerekir. Hiçbir bağımsız değişkeni iletmezseniz hiçbir şey yapılmaz.

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

`drop-shadow`

Tarayıcı Desteği

Kaynak

Bir tasarım aracında olduğu gibi eğriyi kucaklayan bir gölge uygulayabilirsiniz, Örneğin Photoshop gibi drop-shadow. Bu gölge, bir alfa maskeye uygulandığından kesik resme gölge ekleme açısından çok kullanışlı olur. drop-shadow filtresi; boşluk-x, ofset-y, bulanıklaştırma ve renk değerlerini içeren bir gölge parametresi alır. box-shadow ile neredeyse aynı, ancak inset anahtar kelimesi ve yayılma değeri desteklenmiyor.

.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`

Tarayıcı Desteği

Kaynak

url filtresi, bağlı bir SVG öğesinden veya dosyasından SVG filtresi uygulamanıza olanak tanır. Şunları yapabilirsiniz: SVG filtreleri hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Arka plan filtresi

Tarayıcı Desteği

Kaynak

Arka plan filtresi 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 uygulamasıdır. Burada filter özelliği, bunu tüm öğeye uygular.

Bu dersin başındaki örnek mükemmel bir örnek. Böylece metnin bulanıklaştırılmasını ve ideal olarak fazladan HTML öğeleri eklemek zorunda kalmazsınız. Yalnızca arka plana filtre uygulayabilmek bu özelliği mümkün kılar.

Öğrendiklerinizi sınayın

Filtreler hakkındaki bilginizi test edin

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

grayscale()

🎉

invert()

🎉

flip()

Tekrar deneyin.

multiply()

Tekrar deneyin.

blur()

🎉

brightness()

🎉

CSS, SVG filtrelerini kullanabilir mi?

Evet

url() filtre işlevi bu işlemi etkinleştirir

Hayır

Tekrar deneyin.

Filtreler

CSS Podcast'i - 023: Filtreler 'nı inceleyin.

filter mülkü

blur

brightness

contrast

grayscale

invert

opacity

saturate

sepia

hue-rotate

drop-shadow

url

Arka plan filtresi

Öğrendiklerinizi sınayın

`filter` mülkü

`blur`

`brightness`

`contrast`

`grayscale`

`invert`

`opacity`

`saturate`

`sepia`

`hue-rotate`

`drop-shadow`

`url`