Kişiler

Css kullanarak arka plan nasıl bulanıklaştırılır? Gelişmiş CSS filtreleri

  • 18.06.2019

Etkisi itibarıyla, bulanıklaştırma CSS'si bir filtreye çok benzer " Gauss bulanıklığı" Artık aynı etkiyi web sayfalarında da elde edebiliriz.

Bulanıklaştırma, yanlış kullanıldığında kullanıcıların bir hafta boyunca sitenizi ziyaret etmiş gibi hissetmelerine neden olabilir. baş ağrısı. Bunu düzeltmek için, bu makalede de göstereceğim gibi, genellikle bir bulanıklık efekti bir geçişle birleştirilir.

Lütfen IE 9+ sürümüne dikkat edin

Microsoft getirmeye karar verdiğinde İnternet Explorer modern web standartlarına göre bu, birçok şeyin kaybına neden oldu özel CSS IE 5.5'ten bu yana bu tarayıcıda desteklenen DX filtreleri dahil değerler. Ne yazık ki, CSS3 alternatifleriyle değiştirilemedikleri için IE9, 10 ve 11'i zor durumda bıraktılar. Bu yazının yazıldığı sırada, tamamen aynı bulanıklık efektlerine sahip görüntülere ihtiyaç duyan geliştiriciler, tarayıcılar arası bir çözüm olarak tuval tabanlı bir komut dosyası olan StackBlur'u kullanıyor.

HTML Kodu:

Daha sonra sınıf aracılığıyla uygulanan bulanıklaştırma efekti:

img.blur ( genişlik:367; yükseklik:459px; -webkit-filter: bulanıklaştırma(3px); filtre: bulanıklaştırma(3px); )

SVG bulanıklık filtresi

Açık şu an CSS arka plan bulanıklığı çalışıyor Google Chrome, Safari ( mobil ve masaüstü versiyonları) ve Firefox 35+. Daha erken destek almak için Firefox sürümleri, SVG filtresini uygulamanız gerekir:

Dosyayı Blur.svg olarak kaydedin ve CSS'yi şununla değiştirin:

img.blur ( genişlik:367; yükseklik:459px; filtre: url(blur.svg#blur); -webkit-filter: bulanıklaştırma(3px); filtre: bulanıklaştırma(3px); )

IE'nin eski sürümleri için destek

IE 4 - 9'da aynı etkiyi elde etmek için şunu kullanmanız gerekir: eski filtre Microsoft'tan DX. Sınıfımız şöyle görünecek:

img.blur ( genişlik:367; yükseklik:459px; filtre: url(blur.svg#blur); -webkit-filter: bulanıklaştırma(3px); filtre: bulanıklaştırma(3px); filtre:progid:DXImageTransform.Microsoft.Blur( PixelRadius = "3");

Efekti kapatma

Görüntüye odaklanmak istiyorsanız, CSS filtre bulanıklığını bir sonraki çağırışınızda bunu yok olarak ayarlamanız gerekir. İÇİNDE bu durumda Fareyle üzerine gelindiğinde filtrenin davranışını :hover aracılığıyla değiştiriyorum:

img.blur:focus, img.blur:hover ( -webkit-filter: bulanıklık(0px); filtre: bulanıklık(0px); filtre: yok; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); )

Bir tarayıcının (IE dışında) üzerine geldiğinizde, CSS geçişi sayesinde bulanık görüntünün giderek daha keskin hale geldiğini göreceksiniz.

Bir resmin kenarlarını kırpma

Şu ana kadar incelediğimiz diğer filtrelerden farklı olarak CSS bulanıklaştırma efekti, bir öğenin sınırlarının ötesine uzanarak görüntünün kenarlarını ve çevresini bulanıklaştırır. Görüntünün yalnızca içeriden bulanıklaştırılmasını istiyorsanız bunun için birkaç olası yöntem vardır:

  1. Tüm kenarların aynı renkte olduğu bir görseliniz varsa arka plan rengini ( arka plan rengi)V veya aynı renkteki bir kap elemanı;
  2. Bir görüntünün kenarlarını kırpmak için Clip özelliğini kullanın. Klip her zaman aşağıdaki sırayla belirtilir.

klip: rect(üst, sağ klibin sol taraftan uzaklığı, alt kısmın üstten uzaklığı, sol)

367 piksel genişliğinde x 459 piksel yüksekliğinde bir görüntü için ve bulanıklık efekti CSS 2 piksel, Klip şu şekilde "formüle edilecektir":

klip: rect(2px,365px,457px,2px);

Clip'in yalnızca konum: mutlak olan öğeler için geçerli olduğunu unutmayın. IE8 veya sonraki sürümlerde desteğe ihtiyacınız varsa önceki versiyonlar, değerlerin sonundaki px'i kaldırmayı unutmayın.

Görüntüyü bir kapsayıcı öğeye sarın (ör.

görüntüden biraz daha küçük olan ), overflow: gizli'yi uygulayın dış eleman ve bu kenarlardaki görünür bulanıklığı ortadan kaldırmak için görüntüyü biraz sola ve yukarıya doğru hareket ettirin.

Bulanık metin

Şimdilik metni bulanıklaştırmak için bu filtreyi kullanabilirsiniz.

Makalenin çevirisi “ CSS ile Çapraz Tarayıcı Görüntü Bulanıklaştırma” Güleryüzlü proje ekibi tarafından hazırlandı

CSS3, belirli sayfa öğelerinin düzenini önemli ölçüde hızlandırabilecek birçok yeni özelliğe sahiptir. Örneğin, bugün bunlardan biri hakkında konuşacağımız CSS filtreleri.

Her birimiz sayfadaki bulanıklık etkisini en az bir kez gözlemleme fırsatı bulduk. Genellikle, jQuery kütüphanesi bjurjs onu oluşturmak için kullanılır. Ancak jQuery'nin tüm sitelerde kullanılması tavsiye edilmez ve teknoloji yerinde durmuyor: artık saf bir CSS çözümü kullanabiliriz. Deneyelim mi?

En basit işaretlemeye bir örnek:

Bulanıklık

Web sitemize hoşgeldiniz!



Böylece, iç içe geçmiş iki div için kapsayıcı görevi gören sarmalayıcı sınıfına sahip bir ana div tanımlanır: iç sarmalayıcı hoş geldiniz metnini içerecek ve bulanıklık, bulanıklaştırma efektinin uygulanması gereken görüntü olacaktır.

Stillere dönelim.

Sarmalayıcı ( konum: göreceli; genişlik: 500 piksel; yükseklik: 500 piksel; kenar boşluğu: 0 otomatik;) .inner-wrapper, .blur ( konum: mutlak; genişlik: 500 piksel; yükseklik: 300 piksel; sol: 0; üst: 0; alt: 0; sağ: 0;

Gördüğünüz gibi alt bloklar kesinlikle konumlandırılmış ve aynı seviyededir. Mesele şu ki, bulanıklaştırma efekti, kaçınmak istediğimiz tebrik metnine de uygulanacaktır. Bu nedenle blokların birbirine göre konumunu z-index kullanarak kontrol etmek daha iyidir. Bunu yapalım ve ayrıca .blur için gerekli arka planı ayarlayalım:

İç sarmalayıcı ( z-index : 100 ; color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba ( 0 , 0 , 0 , .5 ); ) .blur ( z-index : 99 ; arka plan resmi: url(resim.png); arka plan boyutu: kapak; arka plan tekrarı: tekrarlama yok)

Şu anda elimizde basit bir sayfa resim ve metinle birlikte:

Sihri kullanmanın zamanı geldi! Ne yazık ki, firefox henüz CSS filtrelerini desteklemiyor, bu yüzden küçük bir numara yardımcı olacaktır: onu aşağıdaki içeriğe sahip bir svg dosyasıyla "beslemeniz" gerekir:

ve bu dosyanın yolunu belirtmenin yanı sıra istediğiniz filtreye erişin. Bizim durumumuzda yalnızca tek bir filtre vardır: id bulanıklığı altında tanımlanan filtre. Bulanıklaştırma efektini elde etmek için CSS kodunun şu şekilde dönüştürülmesi gerekir:

İç ambalajlayıcı ( z-endeksi : 100 ; /* metin bulanık değil */ renk: #fff; metin hizalama: ortala; metin gölgesi: 0 0 5px rgba (0, 0, 0, .5); ) .blur ( z-index : 99 ; /* görüntü bulanık */ arka plan resmi : url(resim.png) ; arka plan boyutu: kapak; arka planda tekrarlama: tekrarlama yok; -webkit-filtre : bulanıklaştırma (5 piksel); -moz-filtre : bulanıklaştırma (5 piksel); filtre: bulanıklaştırma (5 piksel); filtre: url("blur.svg#blur"; /* svg'nin yolu */ )

Ve işte bulanıklaştırma efektinin uygulandığı son versiyon:

Tek dezavantajı: ana öğenin ötesine uzanan belirsiz bulanık kenarlıklar. Çoğu zaman bu yan etki istenmeyen olabilir. Bulanıklaştırma yarıçapıyla oynayabilir veya overflow: Hidden uygulayabilirsiniz.

Aralarındaki anlamsal farkı koruyarak arka planı ve arka planı kısaca Rusça'ya çeviremedim, bu yüzden şimdi açıklayacağım:
arka plan - öğenin arkasında olan ve çerçevesinden kesilerek içinden görülebilen şey;
arka plan da bir arka plandır, ancak öğenin bir parçasıdır ve arka plan özelliği ona atıfta bulunur.

2011 yılında tarayıcılar CSS filtrelerini . O zamanlar destek esas olarak SVG filtreleri içindi ve bunları uygulayabilen tek tarayıcı Firefox'tu. HTML içeriği(temelde hiçbir şey değişmedi).

Bulanıklaştırma(), kontrast() veya gri tonlama() gibi CSS filtreleri CSS'ye harika eklemelerdir, ancak SVG harika şeyler yapabilir. Onlar hakkında daha fazla bilgiyi birçok kaynakta bulabilirsiniz.

arka plan filtresi

Bunlardan ilki ve en önemlisi, Filtre Efekti Düzeyi 2'de tanımlanan zemin filtresi özelliğidir. Filtrelerin, bir öğenin arka planı yerine arka planına uygulanmasına olanak tanır.

Şüpheliydim ama Şubat ayında WebKit gecelikleriyle oynamaya başladım ve fikrimi değiştirdim; çok havalı. 48 saatte 20 binin üzerinde izlenme alan Vine paylaşımımdan da anlaşılacağı üzere herkes benimle aynı fikirde olacaktır.

Haziran ayında Apple, WWDC'de bu özelliklerin Safari 9'da mevcut olacağını duyurmuştu. Bu iyi bir haber. Kontrol etme zamanı geldi (yazar kullanıyor iOS beta'sı 9 ve Safari 9).

Bu özellik sayesinde ulaşılması zor olan efektleri elde edebilirsiniz. En banal şey iOS'taki gibi bulanıklıktır:

Başlık ( arka plan rengi: rgba(255,255,255,.6); arka plan filtresi: bulanıklık (5px) )
Başlığın arkasındaki her öğe 5 piksel bulanıklaştırılır. Çok basit.

filtre()

Bazen ne öğeye ne de arka plana (arka plan) filtre uygulamanız gerekir. Sadece arka plana uygulamak istiyorsunuz ancak arka plan filtresi özelliği yok. İşte bu noktada filter() işlevi kullanışlı olabilir; filter özelliğiyle karıştırılmamalıdır. İşlev iki parametre alır: görüntü ve filtre ve yeni bir görüntü döndürür. Bu görüntü herhangi bir şeyle kullanılabilir CSS özelliği, destekleyici resimler. Bunun gibi bir şey:

Öğe ( arka plan: filtre(url(yol/giden/img.jpg), bulanıklaştırma(5px)); )
Sonuç olarak artık görselleri arka plan olarak kullanmadan önce filtre uygulayabilirsiniz. Bunun arka plan filtresinin (veya arka plan opaklığının, arka plan bulanıklığının) bir çeşidi olduğunu düşünebilirsiniz, ancak çok daha güçlüdür.

JSBin'de canlı örnek (yalnızca Safari 9).

İyi haber şu ki, Apple'dan bahsetmeden bile Safari 9'da mevcut.

Bilmeniz gereken birkaç şey:

  • arka plan boyutunda bir hata var
  • fonksiyon canlandırılabilir
  • işlev önek gerektirir: -webkit-filter()
Arka filtre ve filtrenin() CSS geçişleri veya animasyonları veya JavaScript kullanılarak kolaylıkla canlandırılabileceğini belirtmekte fayda var.

Bu özelliklerin tarayıcılarda uygulandığını görmek için sabırsızlanıyorum. SVG de bunu yapabilir ancak aynı harika efektler CSS ile de kolaylıkla yapılabilir. Geçen yıldan bu yana CSS ile ilgili tartışmaların çoğu mimari, metodoloji ve araçlara odaklandı. CSS'nin de bununla ilgili olduğunu hatırlamak güzel grafik Tasarım(SVG ile birlikte).

Tamam, destek şu anda minimum düzeyde ancak bu, yıl sonuna kadar milyonlarca iPhone ve iPad'de mümkün olacak.

Bu cevap yatay harita düzeni içindir Materyal Tasarımı dinamik yükseklik ve görüntü ile.

Dinamik harita yüksekliğinden kaynaklanan görüntü bozulmasını önlemek için şunu kullanabilirsiniz: arka plan görüntüsü yükseklik değişikliklerini ayarlamak için bulanıklık içeren yer tutucu.

açıklama

Kod

Sarmalayıcı ( ekran: flex; genişlik: %100; kenarlık: 1px katı rgba(0, 0, 0, 0,16); kutu gölgesi: 0 1px 1px rgba(0, 0, 0, 0,16), 0 1px 1px rgba(0 , 0, 0, 0,23); arka plan rengi: #fff; kenar boşluğu: 1rem otomatik; .wrapper:hover ( kutu gölgesi: 0 3px 6px rgba(0, 0, 0, 0,16), 0 3px 6px rgba(0, 0, 0, 0,23); .link ( ekran: blok; genişlik: 200 piksel; yükseklik: otomatik; taşma: gizli; konum: göreceli; sağ kenarlık: 2 piksel katı #ddd; ) .blur ( konum: mutlak; sol: 0 ; kenar boşluğu: otomatik; yükseklik: %100; -moz-filtre: bulanıklık(5px); -ms-filtre: bulanıklık(5px); 20px); maksimum genişlik: %100; yükseklik: otomatik; konum: mutlak üst: 0; .pic:hover: tümü 0,2s dönüşüm: metin dekorasyonu: yok; .içerik (ekran: esnek; esnek yön: sütun; genişlik: %100; maksimum genişlik: %100; dolgu: 20 piksel; taşma-x: gizli; ) .text ( kenar boşluğu: 0; )

Gündem, reklam notları ile ilgili. Bazen klima tasarımına da dikkat edin. Ista rom sibi vul apud tam. Ab'nin masraflarını genişletmeyi düşünmüyorum. Aliae cogor masalları fas modus parum sap nullo. Manifestoya göre gönüllü olarak giriş yapın. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.

2018-12-04T00:00Z

CSS'deki tab.content'te bunu konum:absolute olarak değiştirin. Aksi halde görüntülenen sayfa kaydırılmayacaktır.

2018-12-11T00:00Z

Lütfen aşağıdaki kodu kontrol edin:

Arka Plan GörüntüsüCVR( konum:göreceli; dolgu:15 piksel; ) .background-image( konum:mutlak; sol:0; sağ:0; üst:0; alt:0; arka plan:url("http://www.planwallpaper.com) /static/images/renkli-üçgenler-background_yB0qTG6.jpg"); arka plan boyutu: kapak; z-index:1; -webkit-filter: bulanıklaştırma (10 piksel); -moz-filter: bulanıklaştırma (10 piksel); -o- filtre: bulanıklaştırma (10 piksel); -ms filtresi: bulanıklaştırma (10 piksel);

2018-12-18T00:00Z

Diğer cevaplarda belirtildiği gibi, bu şu şekilde başarılabilir:

Ayrıca arka plan filtresini de kullanabilirsiniz

Şu anda Edge, Safari ve iOS Safari'de desteklenen, arka plan filtresi adı verilen desteklenen bir özellik vardır (istatistikler için caniuse.com'a bakın).

Arka plan filtresi özelliği, bir öğenin arkasındaki alanı bulanıklaştırma veya renk değiştirme gibi efektler sağlar; bu efektler daha sonra öğenin şeffaflığı/opaklığı ayarlanarak o öğenin içinden görülebilir.

Bunu şu şekilde kullanırsınız:

Box ( -webkit-backdrop-filter: bulanıklık(5px); // Safari 9+, Edge 17+ (hata değil) ve iOS Safari 9.2+ için kullanın zemin filtresi: bulanıklık(5px); // Kimse non'u desteklemiyor henüz önek eklenmiş)

2018-12-25T00:00Z

İki farklı kap kullanmanız gerekecek: biri arka plan resmi için, diğeri içeriğiniz için.

Örnekte iki kapsayıcı oluşturdum: .background-image ve .content.

Her ikisi de konum: sabit ve sol: 0; sağ: 0; sol: 0; sağ: 0; Görüntülenmelerindeki farklılık, öğeler için farklı şekilde ayarlanan z-endeksi değerlerinden kaynaklanmaktadır.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam period in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam, nisl eu felis vulputate porta'da.

Sorunu giderin. Aliquam consequat in ague sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan ve nunc vulputate accumsan. Vestibulum tempor, mattis fringilla'da dönem, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam en azından önceden. Sed lobortis et lorem in sagittis. Est et araçta suscipit.

Sorun

"Işık kutusu efekti nasıl oluşturulur" makalesinde, yarı saydam siyah bir arka plan kullanarak onları karartarak dikkati web uygulamasının bazı bölümlerinden uzaklaştırmanın bir yolunu öğrendik. Ancak sayfa şunları içeriyorsa çok sayıda ayrıntılar varsa, üstte görüntülenen metinle yeterli kontrastı sağlamak veya ışık kutusuna veya başka bir öğeye dikkat çekmek için çok koyulaştırılması gerekir.

Daha zarif bir yol, koyulaştırmaya ek olarak veya bunun yerine, vurgulanan öğe dışındaki her şeyi bulanıklaştırmaktır. Ayrıca daha fazlasını yaratır gerçekçi etki Derinlik, onlara odaklandığımızda, fiziksel olarak bize yakın olan nesneleri görüşümüzün algılama biçimini simüle eder. Ancak bu etkinin gerçekleşmesi çok daha zordur.

Filtre Efektleri spesifikasyonundan önce bu hiç mümkün değildi, hatta bir filtre kullanmak bile mümkün değildi. bulanıklık() görev hala zor. Bulanıklaştırma filtresini neye takmalıyım? Yoksa bunu belirli bir öğe dışında her şeye mi uygulamalıyız? Bunu bir elemente uygularsak , dikkat çekmek istediğimiz öğe de dahil olmak üzere sayfanın tüm içeriği bulanıklaşacaktır.

Durum “Buzlu Cam Etkisi” yazımızda incelediğimiz duruma çok benziyor ancak burada aynı çözüme başvuramıyoruz çünkü diyalog kutumuzun arkasında sadece bir arka plan resmi değil, herhangi bir şey olabilir. Ne yapalım?

Çözüm

Ne yazık ki için bu etki ek ihtiyacımız olacak HTML öğesi: Bulanıklaştırılmaması gereken öğeler hariç sayfamızın tüm içeriğini bir sarmalayıcı öğeye sarmamız ve ardından bulanıklaştırmayı ona uygulamamız gerekecek.

Öğe bunun için idealdir

, çünkü ikili bir amacı vardır: sayfanın ana içeriğini işaretler ( diyalog kutuları genellikle ana içeriğe dahil edilmez) ve bize asılacak bir kanca sağlar gerekli stiller. İşaretleme şuna benzer:
HTML
Bacon Ipsum dolor otur amet…

Ey HAI, ben bir diyaloğum. Reddetmek için bana tıklayın.

Resimde destek olmadan neye benzediğini görebilirsiniz. Bu yüzden sınıfı elemana uygulamamız gerekiyor

Diyalog ekranda her gösterildiğinde, aynı anda bulanıklaştırma filtrelemesi uygulanırken şu şekilde:

main.de-vurgulanmış (
filtre: bulanıklaştırma (5 piksel);
}

Aşağıdaki resmin de doğruladığı gibi, bu şimdiden ileriye doğru atılmış büyük bir adımdır. Ancak artık bulanıklık hemen uygulanıyor, bu da pek doğal görünmüyor ve kullanıcının sayfadaki deneyimini olumsuz etkiliyor. CSS filtreleri animasyonu desteklediğinden, sayfa bulanıklığının düzgün ve kademeli olarak görünmesini sağlayabiliriz:
ana(
geçiş: .6s filtre;
}
main.de-vurgulanmış (
filtre: bulanıklaştırma (5 piksel);
}


İki vurgu azaltma efektini (koyulaştırma ve bulanıklaştırma) birleştirmek genellikle faydalıdır.
Bunu yapmanın bir yolu parlaklık() ve/veya kontrast() filtrelerini kullanmaktır:

main.de-vurgulanmış (
filtre: bulanıklaştırma(3px) kontrast(.8)
parlaklık(.8);
}

Sonucu şekilde görebilirsiniz. Karartma oranı CSS filtreleri desteklenmiyorlarsa hiçbir geri dönüş çözümünün uygulanmadığı anlamına gelir. Belki de koyulaştırma, aynı zamanda hizmet edebilecek başka bir yöntem kullanılarak daha iyi gerçekleştirilebilir. yedekleme çözümü(örneğin, daha önce yaptığımız gibi box-shadow özelliğini kullanmak önceki sır). Bu aynı zamanda çizimde kenarlarda görülebilen "parlaklık efektinden" de kurtulacaktır.




Konuyla ilgili makaleler

En son makaleler
Popüler Makaleler
Editörün Seçimi
rzdoro.ru