Bir öğenin arkasında bulanıklık ve renk kayması.
Arka plan içeriğinin bağlamını korurken derinlik oluşturmanın yararlı yollarından biri yarı saydamlık, bulanıklık ve diğer efektlerdir. Buzlu cam, video içi yer paylaşımları, yarı saydam gezinme başlıkları, uygunsuz resim sansürleme ve resim yükleme gibi pek çok kullanım alanını destekler. Bu efektleri iki popüler işletim sisteminde görebilirsiniz: Windows 10 ve iOS.
Ö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, ön plan ve arka plan renklerini filtre işlevlerine göre dinamik olarak harmanlayan background-filter
(veya alternatif olarak -webkit-backdrop-filter
) mülkü aracılığıyla bu özellikleri sağladı. Chrome, 76 sürümünden itibaren background-filter
'ü destekliyor.
Tarayıcı desteği
Performans nedeniyle, backdrop-filter
desteklenmediğinde polyfill yerine bir resme geri dönün. Aşağıdaki örnekte bu durum 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
mülkü, bir öğeye bir veya daha fazla filtre uygulayarak öğenin arkasındaki her şeyin görünümünü değiştirir.- Yer paylaşımı öğesi 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ılmamışsa veya desteklenmiyorsa üst üste binen öğelerin nasıl oluşturulacağı gösterilmektedir. Sağdaki resimde backdrop-filter
kullanılarak bulanıklık efekti uygulanmıştır. backdrop-filter
ile birlikte opacity
öğesini kullandığına dikkat edin. opacity
olmadan bulanıklaştırma uygulanacak bir öğe olmaz. 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. İçeren blok da oluşturulabilir ancak bu işlem yalnızca öğenin mutlak ve sabit konumlu alt öğeleri varsa yapılabilir.
Zengin ve akıllı efektler için filtreleri birleştirebilir veya daha ince ya da hassas efektler için tek bir filtre kullanabilirsiniz. Bunları SVG filtreleri ile de birleştirebilirsiniz.
Örnekler
Daha önce işletim sistemleri için ayrılmış olan tasarım teknikleri ve stilleri artık tek bir CSS beyanı ile etkili ve ulaşılabilir. 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ı saydam arka plan renginden alınır.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
Birden fazla filtre
Bazen istenen efekti elde etmek için birden fazla filtre kullanmanız gerekir. Bunu yapmak için filtrelerin boşlukla ayrılmış bir 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ı bir arka plan filtresi kombinasyonuna sahiptir. Arka planda ise aynı şekil grubu animasyonlu olarak gösterilmektedir.
Katmanlar
Bu örnekte, metnin okunabilirliğini sağlamak için yarı şeffaf bir arka planın nasıl bulanıklaştırılacağı ve sayfanın arka planıyla stil açısından nasıl harmanlanacağı gösterilmektedir.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
Dinamik arka planlarda metin kontrastı
Daha önce de belirtildiği gibi, backdrop-filter
web'de zor veya imkansız olan yüksek performanslı efektlere olanak tanır. Buna örnek olarak, bir animasyona yanıt olarak arka planın değiştirilmesi verilebilir. Bu örnekte backdrop-filter
, metnin arkasında neler olup bittiğine rağmen metin ile arka planı arasında yüksek kontrastı korur. Varsayılan arka plan rengi darkslategray
ile başlar ve dönüşümden sonra renkleri ters ç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 kullanıcımız son birkaç yıl içinde Chromium hatasını yukarı oyu kullanarak bu özelliğin uzun zamandır beklenen bir CSS özelliği olduğunu belirtmiş. Chrome'un 76. sürümünde backdrop-filter
'ü kullanıma sunması, web'i gerçek OS benzeri kullanıcı arayüzü sunumuna bir adım daha yaklaştırdı.