• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

html efekt bluru

VPS Starter Arubacloud
0 głosów
521 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)

Czy jest możliwość, aby tło było rozmyte tylko za zaznaczonym elementem?

Chodzi o to, aby cały obraz w tle był widoczny, tylko do obiektu na środku była by przypisana jakaś linijka w css, która sprawia, że to co prześwituje jest przezroczyste.

komentarz 14 sierpnia 2021 przez Comandeer Guru (599,730 p.)
Chcesz, żeby obrazek prześwitujący przez ten element był rozmyty? Bo na razie średnio rozumiem z opisu, co chcesz dokładnie osiągnąć.
komentarz 14 sierpnia 2021 przez Dawidziu Bywalec (2,610 p.)
Dokładnie

Tylko tak, żeby elementy w środku tego białego kwadratu były normalnie widoczne

1 odpowiedź

+2 głosów
odpowiedź 14 sierpnia 2021 przez Comandeer Guru (599,730 p.)
wybrane 14 sierpnia 2021 przez Dawidziu
 
Najlepsza

To, co chcesz zrobić, robi backdrop-filter. Haczyk polega na tym, że nie działa w Firefoksie. Żeby zrobić coś, co działa wszędzie, prawdopodobnie trzeba byłoby przyszykować odpowiedni SVG z filtrem lub zastosować podobny zabieg z ::before, ale użyć filter: blur.

Albo, co ja bym zrobił, olać rozmycie w Firefoksie, bo to tylko dodatek wizualny i nie wpływa na odbiór treści. A prędzej czy później i tak się ten efekt w lisku pojawi.

komentarz 14 sierpnia 2021 przez JakSky Stary wyjadacz (14,770 p.)
Jest jeszcze opcja przygotowania gotowego obrazka w Photoshopie czy w Gimpie i ustawienie go jako tło.

Oraz druga opcja, czyli użycie biblioteki JS.
komentarz 14 sierpnia 2021 przez Comandeer Guru (599,730 p.)

Pierwsza opcja działa… dopóki całość nie musi być responsywna ;) Bo wtedy trudno zrobić obrazek tak, by działał na każdej wielkości viewportu.

Opcja druga pewnie będzie działać – tylko że brzmi jak typowa armata na muchę. Bo prawdopodobnie będzie to rysowała na żywca na canvas.

komentarz 14 sierpnia 2021 przez Dawidziu Bywalec (2,610 p.)
Dzięki wielkie za pomoc. A co do firefoxa, to tego nie potrzebuję, bo to tylko taki niewielki projekt
komentarz 14 sierpnia 2021 przez VBService Ekspert (251,210 p.)

Tu masz przykłady efektu blur, który w zamierzeniach autorów ma zadziałać na jak największej ilości przeglądarek:  [ 1 ]  [ 2 ]

 

Podobne pytania

0 głosów
2 odpowiedzi 154 wizyt
pytanie zadane 25 stycznia 2021 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)
0 głosów
1 odpowiedź 700 wizyt
pytanie zadane 10 września 2017 w HTML i CSS przez pebrzosky Obywatel (1,160 p.)
0 głosów
2 odpowiedzi 556 wizyt
pytanie zadane 26 stycznia 2017 w HTML i CSS przez Meggie Nowicjusz (120 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...