Bir öğenin arkasında bulanıklaştırma ve renk kayması.
Saydamlık, bulanıklaştırma ve diğer efektler, arka plan içeriğinin bağlamını korurken derinlik oluşturmak için faydalı yöntemlerdir. Buzlu cam, video içi yer paylaşımları, yarı saydam gezinme başlıkları, uygunsuz resim sansürleme ve resim yükleme gibi çok sayıda kullanım örneğini destekler. Bu etkileri Windows 10 ve iOS olmak üzere yaygın olarak kullanılan iki işletim sisteminden tanıyabilirsiniz.
Önceden bu tekniklerin web'de uygulanması zordu ve kusursuz saldırılar veya geçici çözümler çok daha az gerektiriyordu. Son yıllarda hem Safari hem de Edge bu özellikleri, filtre işlevlerine göre ön ve arka plan renklerini dinamik olarak birleştiren background-filter
(ve alternatif olarak -webkit-backdrop-filter
) özelliği aracılığıyla sundu. 76 sürümünden itibaren Chrome artık background-filter
hizmetini destekliyor.
Tarayıcı desteği
backdrop-filter
desteklenmediğinde, performans nedeniyle çoklu dolgu yerine resim kullanın. Aşağıdaki örnekte bu gösterilmektedir.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
Temel seviye
backdrop-filter
özelliği, bir öğeye bir veya daha fazla filtre uygulayarak öğenin arkasındaki öğelerin görünümünü değiştirir.- Yer paylaşımlı öğe en azından kısmen şeffaf olmalıdır.
- Yer paylaşımlı öğe yeni bir yığın bağlamına sahip olacak.
CSS backdrop-filter
, yarı saydam veya saydam bir öğeye bir veya daha fazla efekt uygular. Bunu anlamak için aşağıdaki resimleri inceleyin.
.frosty-glass-pane { backdrop-filter: blur(2px); }
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
Soldaki resimde, backdrop-filter
kullanılmadığında veya desteklenmediğinde çakışan öğelerin nasıl oluşturulacağı gösterilmektedir. Sağdaki resimde backdrop-filter
ile bulanıklaştırma efekti uygulanır. backdrop-filter
ile birlikte opacity
öğesini kullandığına dikkat edin. opacity
olmasaydı bulanıklaştırmanın uygulanacağı bir şey olmazdı. opacity
, 1
(tamamen opak) olarak ayarlandığında arka plan üzerinde bir etkisi olmayacağını söylemeye gerek yoktur.
backdrop-filter
özelliği, tüm favori filtre işlevlerinizin desteklenmesi açısından CSS filtrelerine benzer: blur()
, brightness()
, contrast()
, opacity()
, drop-shadow()
vb. Ayrıca, filtre olarak harici bir resim kullanmak istediğinizde url()
işlevini ve none
, inherit
, initial
ve unset
anahtar kelimelerini destekler. MDN'de, söz dizimi, filtreler ve değerlerin açıklamaları da dahil olmak üzere tüm bunlara ilişkin açıklamalar mevcuttur.
backdrop-filter
, none
dışında bir değere ayarlandığında tarayıcı yeni bir yığma bağlamı oluşturur. Yalnızca öğenin mutlak ve sabit konum alt öğeleri olması koşuluyla bir kapsayıcı blok da oluşturulabilir.
Zengin ve akıllı efektler için filtreleri birleştirebilir veya daha ince ya da hassas efektler için yalnızca tek bir filtre kullanabilirsiniz. Bunları SVG filtreleri ile de birleştirebilirsiniz.
Örnekler
Daha önce işletim sistemleri için ayrılmış tasarım teknikleri ve stilleri artık tek bir CSS bildirimiyle yüksek performanslı ve gerçekleştirilebilir. Bazı örneklere göz atalım.
Tek filtre
Aşağıdaki örnekte buzlu efekti, renk ve bulanıklık birleştirilerek elde edilir. Bulanıklaştırma, backdrop-filter
tarafından sağlanırken renk, öğenin yarı şeffaf arka plan renginden gelir.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
Birden fazla filtre
Bazen istenen etkiyi elde etmek için birden fazla filtreye ihtiyacınız olur. Bunun için boşlukla ayrılmış filtrelerin listesini sağlayın. Örneğin:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
Aşağıdaki örnekte, dört bölmenin her biri farklı arka plan filtreleri kombinasyonuna sahiptir ve arka planda aynı şekil kümesi animasyonludur.
Katmanlar
Bu örnekte, bir sayfanın arka planıyla stil olarak uyumluyken metni okunabilir hale getirmek için yarı şeffaf bir arka planın nasıl bulanıklaştırılacağı gösterilmektedir.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
Dinamik arka planlarda metin kontrastı
Daha önce belirtildiği gibi backdrop-filter
, web'de zor veya mümkün olmayan yüksek performanslı efektlere izin verir. Bir animasyona yanıt olarak arka planı değiştirmek buna örnek olarak gösterilebilir. Bu örnekte backdrop-filter
, metnin arkasında olanlara rağmen metin ile arka planı arasındaki yüksek kontrastı korur. Varsayılan arka plan rengiyle (darkslategray
) başlar ve dönüştürmeden sonra renkleri tersine çevirmek için backdrop-filter
kullanır.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
Sonuç
560'tan fazla kişi son birkaç yılda Chromium hatasına olumlu oy verdi ve bu sonucu açıkça uzun süredir beklenen CSS özelliği olarak işaretledi. Chrome'un sürüm 76'da kullanıma sunulan backdrop-filter
, web'i gerçekten OS'e benzeyen kullanıcı arayüzü sunumuna bir adım daha yaklaştırıyor.