Filtreler

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

  • Chrome: 53..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 9.1.

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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%);
}

contrast

Tarayıcı Desteği

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 18..
  • Kenar: 12..
  • Firefox: 35..
  • Safari: 6..

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

  • Chrome: 5..
  • Kenar: 12..
  • Firefox: 3..
  • Safari: 6..

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

  • Chrome: 76..
  • Kenar: 79..
  • Firefox: 103..
  • Safari: 18..

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?

multiply()
grayscale()
brightness()
blur()
invert()
flip()

CSS, SVG filtrelerini kullanabilir mi?

Hayır
Evet