Arka plan filtresiyle OS tarzı arka planlar oluşturun

Bir öğenin arkasında bulanıklık ve renk kayması.

Adam Argyle

Joe Medley

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

Ön plan şeffaflığı yok

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Ön plan şeffaflığı

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

Ek kaynaklar

• Spesifikasyon
• Chrome Platform Durumu
• MDN
• CSS Püf Noktaları'nda background-filter
• Codepen'deki örnekler