Arka plan filtresiyle OS tarzı arka planlar oluşturun

Bulanıklık ve rengin bir öğenin arkasında kayması.

Adem Parça
Ali Porsuk
Ali Polat
GitHub
Saydamlık, bulanıklaştırma ve diğer efektler, arka plan içeriğinin bağlamını korurken derinlik oluşturmanın faydalı yollarıdır. Buzlu cam, video yer paylaşımları, yarı saydam gezinme başlıkları, uygun olmayan resim sansürleme, görüntü yükleme ve benzeri kullanım alanlarını desteklerler. Bu etkileri iki popüler işletim sisteminden fark etmiş olabilirsiniz: Windows 10 ve iOS.

Buzlu cam efekti örneği.
Buzlu cam efekti örneği. Kaynak.

Geçmişte, bu tekniklerin web'de uygulanması zordu ve kusursuz saldırılar veya geçici çözümler 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 sunuyor. Sürüm 76'dan itibaren Chrome, background-filter özelliğini artık destekliyor.

backdrop-filter için filtre işlevlerinin tanıtımı. CodePen'deki örneği deneyin.

Tarayıcı desteği

Tarayıcı Desteği

  • 76
  • 17
  • 103
  • 9

Kaynak

Performansı korumak açısından, backdrop-filter desteklenmediğinde çoklu dolgu yerine bir resmi kullanı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 özelliği, bir öğeye bir veya daha fazla filtre uygulayarak öğenin arkasındaki her şeyin 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ı alır.

CSS backdrop-filter, yarı saydam veya şeffaf bir öğeye bir veya daha fazla efekt uygular. Bunu anlamak için aşağıdaki resimleri inceleyin.

Ön planda şeffaflık yok
Daire üzerine yerleştirilmiş bir üçgen. Daire, üçgenin içinden görülemez. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Ön plan şeffaflığı
Daire üzerine yerleştirilmiş bir üçgen. Üçgen yarı saydam olduğundan dairenin içinden görünmesini sağlar. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Soldaki resimde, backdrop-filter kullanılmazsa veya desteklenmezse çakışan öğelerin nasıl oluşturulacağı gösterilmektedir. Sağdaki resimde backdrop-filter kullanılarak bulanıklaştırma efekti uygulanıyor. backdrop-filter ile birlikte opacity kullandığına dikkat edin. opacity olmadan bulanıklaştırma uygulanabilecek bir öğe de olmayacaktır. opacity, 1 (tamamen opak) olarak ayarlandığında arka planda herhangi bir etkisinin olmayacağını söylemeye gerek yok.

backdrop-filter özelliği, sevdiğiniz tüm filtre işlevleri bakımından CSS filtrelerine benzer: blur(), brightness(), contrast(), opacity(), drop-shadow() vb. none, inherit, initial ve unset anahtar kelimelerinin yanı sıra filtre olarak harici bir resim kullanmak istiyorsanız url() işlevini de destekler. Söz dizimi, filtre ve değerlerin açıklamaları da dahil olmak üzere tüm bunların açıklamalarını MDN'de bulabilirsiniz.

backdrop-filter, none dışında bir değere ayarlandığında tarayıcı yeni bir yığınlama bağlamı oluşturur. Bir içeren blok da oluşturulabilir, ancak bunun için öğenin mutlak ve sabit konum alt öğeleri olması gerekir.

Zengin ve akıllıca efektler için filtreleri birleştirebilir veya daha ince ya da hassas efektler için tek bir filtre kullanabilirsiniz. Dilerseniz bunları SVG filtreleriyle 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 ulaşılabilir. Bazı örneklere göz atalım.

Tek filtre

Aşağıdaki örnekte buzlu efekti, renk ve bulanıklığın birleştirilmesiyle 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);
}
Bu örneği CodePen'de kendiniz deneyin.

Birden çok filtre

Bazen istenen etkiyi elde etmek için birden fazla filtreye ihtiyacınız olur. Bunun 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 filtreleri kombinasyonuna sahiptir ve aynı şekil kümesi arkalarında animasyonludur.

Bu örneği CodePen'de kendiniz deneyin.

Yer paylaşımları

Bu örnekte, sayfanın arka planıyla stil açısından harmanlanırken metnin okunabilir olması 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);
}
Bu örneği kendiniz için deneyin.

Dinamik arka planlarda metin kontrastı

Daha önce belirtildiği gibi backdrop-filter, web'de zor veya imkansız olacak etkili efektlere izin verir. Arka planı, animasyona yanıt olarak değiştirmek buna örnek olarak gösterilebilir. Bu örnekte backdrop-filter, metnin arkasında olup bitenlere rağmen metin ile arka planı arasındaki yüksek kontrastı koruyor. Varsayılan arka plan rengiyle (darkslategray) başlar ve dönüşümden 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;
}
Codrops'daki Chen Hui Jing'den alınan bu örneği deneyin.

Sonuç

Geçtiğimiz birkaç yılda 560'tan fazla kullanıcı Chromium hatasına olumlu oy verdi ve bu hata, uzun süredir beklenen bir CSS özelliği olduğu açıkça belli oldu. Chrome'un sürüm 76'daki backdrop-filter sürümü, web'i gerçekten OS benzeri kullanıcı arayüzü sunumuna bir adım daha yaklaştırıyor.

Ek kaynaklar