Jak uzyskać efekt dynamicznego bluru w CSS?


(sajmon17099) #1

Witam, wiem że istnieje takie coś jak backdrop-filter, ale to zbytnio nie działa na żadnej przeglądarce poza Safari. Chciałbym więc znaleźć jakąś alternatywę pozwalającą na blur wszystkiego za divem (tła, tekstu, innych divów itp.). Znalazłem takie coś:

https://codepen.io/Kseso/pen/JBrcD

lecz, mimo że wygląda to imponująco, to nie jest to wystarczające. Blur obejmuje jedynie tło, omijane są przy tym divy i tekst (po prostu ich nie widać).


#2

Pobierz kod z poddanej strony i przypisz opcję filter: blur; do body:after to powinno Ci “zblurować” całe tło za divami. Przetestuj.


(sajmon17099) #3

Chodzi mi o to żeby blurowało też divy, bo tło jest już blurowane, ale poza nim nie ma bluru na niczym.


(jaredj) #4

Nie znam tematu za dobrze, ale może jquery by miało coś co wyszukało by wszystkie obiekty o z-index mniejszym niż twój div i nadało dynamicznie atrybut blur. Na zamknięcie twojego diva wywołał byś jakąś funkcję zdejmującą ten atrybut ze wszystkiego. Inna sprawa to sprawdzenie obszaru do zblurowania - tylko pod divem, czyli mogło by być tak, że część jakiegoś innego obiektu pod spodem ma być zblurowana ale nie całość.


(sebkor96) #5

Też kiedyś próbowałem to zrobić ale blur to na chwilę obecną całkiem nowe rozwiązanie w przeglądarkach i lepiej byłoby tego unikać. Jeżeli naprawdę Ci na tym zależy to powinieneś pobawić się canvasem:

Ewentualnie stworzyć dwa div’y z czego jeden będzie odgrywał rolę tła z blurem, a drugi będzie wrapperem dla contentu. Później musisz je odpowiednio “ułożyć” żeby Ci się nie rozjeżdżały. Problem z którym się mierzysz, namieszał w głowach sporej liczbie frontendowców i wielokrotnie temat ten był poruszany na stack’ach:

Powodzenia. :slight_smile: