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ü
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
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
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
, 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
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
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
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
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
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
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
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, 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()
multiply()
blur()
brightness()
CSS, SVG filtrelerini kullanabilir mi?
url()
filtre işlevi bu işlemi etkinleştirir