Arka plan filtresiyle OS tarzı arka planlar oluşturun

Bir öğenin arkasında bulanıklaştırma ve renk kayması.

Adam Argyle
Joe Medley
Joe Medley
GitHub
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 pek çok kullanım alanını destekler. Bu etkileri Windows 10 ve iOS olmak üzere yaygın olarak kullanılan iki işletim sisteminden tanıyabilirsiniz.

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

Ö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.

backdrop-filter için filtre işlevlerinin gösterimi. Örneği CodePen ile deneyin.

Tarayıcı desteği

Tarayıcı Desteği

  • 76
  • 79
  • 103
  • 9

Kaynak

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 bir öğeye bir veya daha fazla efekt uygular. Bunu anlamak için aşağıdaki resimleri inceleyin.

Ön plan şeffaflığı yok
Daire üzerine yerleştirilmiş üçgen. Daire, üçgenin içinden görülemez. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Ön plan şeffaflığı
Daire üzerine yerleştirilmiş üçgen. Üçgen yarı saydamdır ve içinden çemberin görülebilmesini sağlar. 
.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);
}
CodePen'de bu örneği kendiniz için deneyin.

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.

CodePen'de bu örneği kendiniz için deneyin.

Yer paylaşımları

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);
}
Kendiniz için bu örneği deneyin.

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;
}
Codrops'daki Chen Hui Jing adlı kanaldan elde edilen bu örneği deneyin.

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.

Ek kaynaklar