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ü
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
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
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()
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
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
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
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
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
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
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
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
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?