Przesuń slider — obserwuj jak światło się załamuje
Każdy slider ma inną moc szkła: od delikatnego frosted po głęboki blur.
Refrakcja = zniekształcenie pikseli pod szkłem. Różne moce + jeden dynamiczny (rośnie przy ruchu).
Te same wysokie refrakcje, ale od w pełni przezroczystego po mocno zamazany frost.
Porównaj: 3 warianty krawędziowe (wąska/szeroka/gradient) vs pełna refrakcja 70px na dole.
Poprzedni faworyt — turbulencja na krawędziach, do porównania z nowym podejściem poniżej.
Gładka soczewka (bez turbulencji) — środek idealnie czysty, krawędzie załamują jak prawdziwe szkło. Ostatni to pełna soczewka wypukła dla porównania.
Przeciągasz = refrakcja narasta. Puszczasz = płynnie wraca do przezroczystego szkła.
Prawie przezroczysty. Blur 2px, minimalny tint.
Delikatne matowe szkło. Blur 6px, lekki frost.
Wyraźny efekt szkła. Blur 12px, nasycone kolory.
Mocne rozmycie. Blur 20px, głęboki frost.
Prawie nieprzezroczysty. Blur 30px, gęsty tint.
Refrakcja 4px. Ledwo widoczne zniekształcenie.
Refrakcja 12px. Wyraźne falowanie tła.
Refrakcja 30px. Widoczne przesunięcie pikseli.
Refrakcja 60px. Maksymalne zniekształcenie.
Blur 10px + refrakcja 20px. Połączenie efektów.