CSS Podcast - 023: Filtreler
Resmin üzerinde bulunan ve hafif opak, buzlu cam efekti olan bir öğe oluşturmanız gerektiğini düşünelim. Metnin resim değil, canlı metin olması gerekir. Bunu nasıl yapacaksınız?
CSS filtrelerinin ve backdrop-filter özelliklerinin kombinasyonu, gerçek zamanlı olarak efekt uygulamamıza ve gerekli olanları bulanıklaştırmamıza olanak tanır.
Bulanıklık ve opaklık, kullanabileceğiniz çok sayıda filtreden ikisidir. Şimdi bu filtrelerin ne işe yaradığına ve nasıl kullanıldıklarına hızlıca göz atalım.
filter özelliği
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 filtrelerin geri kalanı çalışmaz.
blur
Bu yöntem, gauss bulanıklığı uygular ve iletebileceğiniz tek bağımsız değişken radius, yani
ne kadar bulanıklaştırma uygulandığıdır.
Bunun, 10px gibi bir uzunluk birimi olması gerekir. Yüzde değerleri kabul edilmez.
.my-element {
filter: blur(0.2em);
}
brightness
Bir öğenin parlaklığını artırmak veya azaltmak için parlaklık işlevini kullanın. Parlaklık değeri, değişmeyen resim %100 olarak ifade edilen bir yüzde 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
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
grayscale() değeri olarak 1 değerini veya tamamen doymuş bir öğe için 0 değerini kullanarak tamamen gri tonlamalı bir efekt uygulayabilirsiniz.
Yalnızca kısmi bir gri tonlama efekti uygulamak için yüzde veya ondalık değerler de kullanabilirsiniz.
Hiçbir bağımsız değişken iletmezseniz öğe tamamen gri tonlamalı olur.
%100'den büyük bir değer geçirirseniz bu değer %100 ile sınırlandırılır.
.my-element {
filter: grayscale(80%);
}
invert
grayscale işlevinde olduğu gibi, açmak veya kapatmak için invert() işlevine 1 veya 0 aktarabilirsiniz. Bu özellik açıldığında, öğenin renkleri tamamen tersine çevrilir.
Ayrıca, renklerin yalnızca kısmi ters çevirmesini uygulamak 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 ters çevrilir.
.my-element {
filter: invert(1);
}
opacity
opacity() filtresi, opacity özelliği gibi çalışır. Burada, opaklığı artırmak veya azaltmak için bir sayı ya da yüzde iletebilirsiniz.
Hiçbir bağımsız değişken iletmezseniz öğe tamamen görünür.
.my-element {
filter: opacity(0.3);
}
saturate
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
Bu filtreyle grayscale() gibi çalışan bir sepya tonu efekti ekleyebilirsiniz.
Sepya tonu, sıcak tutmak amacıyla siyah tonları kahverengi tonlara dönüştüren bir fotoğraf baskı tekniğidir.
sepia() için bağımsız değişken olarak bir sayı veya yüzde iletebilirsiniz. Bu, etkiyi artırır veya azaltır.
Hiçbir bağımsız değişken iletilmediğinde tam sepya etkisi eklenir (sepia(100%) ile eşdeğerdir).
.my-element {
filter: sepia(70%);
}
hue-rotate
hsl dokümanındaki tonun, renk çemberinin dönüşüne nasıl referans verdiğini renkler dersinde öğrenmiştiniz ve bu filtre de benzer şekilde çalışıyor.
Derece veya dönüş gibi bir açıdan geçerseniz öğenin tüm renklerinin tonunu değiştirir ve referans olduğu renk çemberinin parçasını değiştirir. Hiçbir bağımsız değişkeni iletmezsen, hiçbir şey yapmaz.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
drop-shadow ile Photoshop gibi bir tasarım aracında yaptığınız gibi kıvrımlı bir gölge uygulayabilirsiniz.
Bu gölge, bir alfa maskesine uygulandığından kesit resmine gölge eklemek açısından çok kullanışlıdır.
drop-shadow filtresi boşlukla ayrılmış ofset-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 kelime ve dağılım değeri desteklenmiyor.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Gölgeler modülündeki farklı gölge türleri hakkında daha fazla bilgi edinin.
url
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
backdrop-filter özelliği, aynı filtre işlevi değerlerinin tümünü filter ile 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, arka planı öğenin tamamına uygular.
Bu dersin hemen başındaki örnek mükemmel bir örnektir. Çünkü metnin bulanıklaştırılmasını ve ideal olarak da fazladan HTML öğeleri eklemek zorunda kalmazsınız. Filtreleri yalnızca arka plana uygulayabilmek bu işlemi 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()multiply()blur()brightness()CSS, SVG filtrelerini kullanabilir mi?
url() filtre işlevi,