Rozmyte tło to znak rozpoznawalny systemu iOS oraz macOS, które wszechobecne jest praktycznie wszędzie. Windows nie pozostaje dłużny wprowadzając w wersjach 7 i wyższych możliwość włączenia trybu AREO dodającego rozmyte, półprzezroczyste paski okienek czy pasek główny. Przyszedł więc również czas na strony WWW! Osiągnięcie efektu rozmazanego tła było ciężkie do osiągnięcia z pomocą CSS dlatego też twórcy postanowili dodać nową właściwość.

Przygotowania.

Do korzystania z tej właściwości koniecznym będzie uruchomienie funkcji Experimental Web Platform features w naszej przeglądarce (dla chrome chrome://flags). Oraz zastosowanie prefixu -webkit- dla przeglądarki Safari.

Chwila, chwila co on gada.

Tak owszem właściwość filter o wartości blur() rozmazywała element, ale razem z zawartością. Efekt ten był przydatny, ale przez działanie na elementy umieszczone w nim pozbawiał tym samym wielu zastosowań. Dlatego też właśnie powstała nowa właściwość CSS backdrop-filters. Jest to bliźniacza właściwość do filters z różnicą braku działania na dzieci elementu.
Przykład:

Nie samym rozmyciem człowiek żyje.

Wbrew pozorom właściwość ta nie oferuje jedynie poprawnego działania funkcji blur(). Oto pełna lista możliwych do użycia wartości:
-blur
-brightness
-contrast
-drop-shadow
-grayscale
-hue-rotate
-invert
-opacity
-sepia
-saturate

Dodatkowo niektóre wartości możemy łączyć uzyskując coraz to ciekawsze efekty. Czy wprawdzenie tej właściwości spowoduje wprowadzenie nowych trendów w projektowaniu witryn WWW? Według mnie, jak najbardziej. Liczę na ciekawe wykorzystanie jej możliwości na nowych stronach.

Źródło: https://webdesign.tutsplus.com/tutorials/css-backdrop-filters–cms-27314

Autor: Radosław Bogusławski

TEMATY:
Najświeższe artykuły