Arka plan filtresiyle OS tarzı arka planlar oluşturun

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

Adam Argyle

Joe Medley

Saydamlık, bulanıklık ve diğer efektler, arka plan içeriğinin bağlamını korurken derinlik oluşturmanın kullanışlı yolları olabilir. Bu filtreler; buzlu cam, video yer paylaşımları, yarı saydam gezinme başlıkları, uygunsuz resimlerin sansürlenmesi, resim yükleme gibi birç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. Kaynak.

Geçmişte bu tekniklerin web'de uygulanması zordu ve mükemmel olmayan hilelere veya geçici çözümlere ihtiyaç duyuluyordu. 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. Chrome, 76 sürümünden itibaren background-filter'ü destekliyor.

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

Tarayıcı desteği

Tarayıcı desteği

• 76
• 79
• 103
• 18

Kaynak

Performans nedeniyle, backdrop-filter desteklenmediğinde polyfill yerine bir resme geri dönü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 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.

Dikkat: backdrop-filter performansı olumsuz etkileyebilir. Dağıtmadan önce test edin.

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 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'a ek olarak opacity kullanıldığını unutmayın. 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. Söz dizimi, filtreler ve değerlerin açıklamaları da dahil olmak üzere tüm bunların açıklamaları MDN'de yer almaktadır.

backdrop-filter, none dışında bir değere ayarlandığında tarayıcı yeni bir yığın bağlamı oluşturur. Yalnızca öğenin mutlak ve sabit konumlu alt öğeleri varsa içeren blok da oluşturulabilir.

Zengin ve akıllıca efektler için filtreleri birleştirebilir veya daha ince veya 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, renk ve bulanıklık birleştirilerek buzlu efekt elde edilmiştir. 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);
}

Bu örneği CodePen'de kendiniz deneyebilirsiniz.

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.

Bu örneği CodePen'de kendiniz deneyebilirsiniz.

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 uyumlu hale getirileceği gösterilmektedir.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Bu örneği kendiniz deneyin.

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;
}

Chen Hui Jing tarafından Codrops'ta yayınlanan bu örneği deneyin.

Sonuç

Son birkaç yıl içinde 560'dan fazla kullanıcı, Chromium hatasını yukarı oklayarak bu özelliğin uzun zamandır beklenen bir CSS özelliği olduğunu açıkça belirtmişti. 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

• Özellik
• Chrome Platform Durumu
• MDN
• CSS Tricks'te background-filter
• Codepen'deki örnekler