Filtreler

CSS Podcast'i - 023: Filtreler

Resmin üst kısmına yerleştirilen hafif opak, buzlu cam efektine sahip bir öğe oluşturmanız gerektiğini varsayalım. Metnin resim değil, canlı metin olması gerekir. Bunu nasıl yapabilirsiniz?

CSS filtreleri ve backdrop-filter'ın birlikte kullanılması, efektler uygulayıp gerekli olanları anında bulanıklaştırmamıza olanak tanır. Bulanıklık ve opaklık, kullanılabilir birçok filtreden ikisidir. Şimdi bunların ne işe yaradığını ve nasıl kullanıldıklarını hızlıca inceleyelim.

filter mülkü

Tarayıcı Desteği

  • 53
  • 12
  • 35
  • 9.1

Kaynak

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

blur

Bu yöntemde gauss bulanıklaştırma uygulanır ve iletebileceğiniz tek argüman radius, yani ne kadar bulanıklaştırma uygulanır uygulanır. Bunun 10px gibi bir uzunluk birimi olması gerekir. Yüzdeler kabul edilmez.

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

brightness

Tarayıcı Desteği

  • 18
  • 12
  • 35
  • 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 yapar. 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

  • 18
  • 12
  • 35
  • 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

  • 18
  • 12
  • 35
  • 6

Kaynak

grayscale() için bir değer olarak 1, tamamen doymuş bir öğe için 0 değerini kullanarak tamamen gri tonlamalı bir efekt uygulayabilirsiniz. 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

  • 18
  • 12
  • 35
  • 6

Kaynak

grayscale gibi, invert() işlevine 1 veya 0 değerini ileterek bu işlevi açabilir veya kapatabilirsiniz. Açık olduğunda, öğ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 herhangi bir bağımsız değişken iletmezseniz öğe tamamen ters çevrilmiş olur.

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

opacity

Tarayıcı Desteği

  • 18
  • 12
  • 35
  • 6

Kaynak

opacity() filtresi, opacity özelliğiyle aynı şekilde çalışır. Bu özellikte, 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

  • 18
  • 12
  • 35
  • 6

Kaynak

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 veya azaltır.

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

sepia

Tarayıcı Desteği

  • 18
  • 12
  • 35
  • 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 etkiyi artıran veya azaltan bir sayı veya yüzde aktarabilirsiniz. Bağımsız değişken verilmemesi, tam sepya efekti ekler (sepia(100%) ile eşdeğerdir).

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

hue-rotate

Tarayıcı Desteği

  • 18
  • 12
  • 35
  • 6

Kaynak

Renkler dersinde hsl özelliğindeki tonun, renk çemberinin dönüşüne göndermede bulunduğunu öğrendiniz ve bu filtrenin de benzer şekilde çalıştığını öğrendiniz. Derece veya dönüş gibi bir açı geçirirseniz öğenin tüm renklerinin tonu değişir ve renk çemberinin başvuruda bulunduğu kısım değişir. 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

  • 18
  • 12
  • 35
  • 6

Kaynak

drop-shadow ile Photoshop gibi bir tasarım aracında olduğu gibi eğrileri kucaklayan bir gölge uygulayabilirsiniz. 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ıdır, ancak inset anahtar kelime ve oran 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

Tarayıcı Desteği

  • 5
  • 12
  • 3
  • 6

Kaynak

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

Arka plan filtresi

Tarayıcı Desteği

  • 76
  • 79
  • 103
  • 18

Kaynak

backdrop-filter özelliği, 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. filter özelliği, filtreleri tüm öğenin tamamına uygular.

Bu dersin hemen başındaki örnek mükemmel bir örnek. Çünkü metnin bulanıklaştırılmasını ve ideal koşullarda fazladan HTML öğeleri eklemek istemiyorsunuz. 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.