[CSS] Rozmywanie tła

0

Wtiam!
Robię design w którym chcę wykorzystać efekt Aero. Niestety mam problem z rozmywaniem tła pod "okienkami" tak, żeby były kompatybilne z różnymi rozdzielczościami.
Mam taki pomysł:
Jedno tło(body background) normalne, nie rozmazane. Nad nim ten sam obraz, w tych samych wymiarach ale rozmyty, i będzie się wyświetlał tylko pod "okienkami".

Ktoś wie jak to zrobić, albo ma inny pomysł? Z góry dziękuję :)

0

Myślę, że pomysł masz bardzo dobry. W wersji statycznej, gdzie boxów nie możesz przemieszczać, jest to rozwiązanie dość dobrze znane i opisane. Opisywał to Eric Meyer w książce "CSS według Erica Meyera. Kolejna odsłona."

Musisz tylko wziąć do ręki kalkulator i obliczyć, jakie background-position powinien mieć element z okienkiem, by jego tło zgrywało się idealnie z tłem "pulpitu". Zauważ, że bardzo często pozycja tła w okienku będzie miała wartości ujemne. Np. gdy okienko będzie się zaczynało na współrzędnych (X: 50, Y: 70), to żeby tło okienka zgrywało się z tłem pulpitu będziesz musiał dać okienku background-position: -50px -70px;

Może jeszcze chcesz te okienka przesuwać dynamicznie na ekranie JavaScriptem (takie drag'n'drop)? Jeśli tworzysz aplikację webową, a nie tylko layout zwykłej strony www, to może to być realny wybór. W takim wypadku musiałbyś pozycję tła ustawiać dynamicznie w JavaScripcie po każdym przesunięciu okna.

Ucieknięcie się do JavaScriptu w ogóle może być konieczne, nawet jeśli okienek nie dałoby się przesuwać. Jeśli okienka mają być np. na środku ekranu (co da się oczywiście osiągnąć za pomocą samego CSS), a tło pulpitu masz dosunięte do lewej, to wtedy ciężko Ci będzie wypozycjonować tło okienek za pomocą samego CSS. Czasami da się ustawić background-position zarówno tła pulpitu, jak i okna na center i to pomaga. Czasami jednak chcesz mieć jakiś offset i wtedy już się nie da.

Zawsze możesz olać oklepane wyrównanie strony do środka ekranu i zastosować wyrównanie do lewej niezależnie od rozdzielczości. Takie layouty też się zdarzają, szczególnie najlepsi designerzy lubią urozmaicać swoje projekty w ten sposób. Zobacz np. na stronę domową jednego z nich (projektant m.in. backendu do WordPressa czy subtelnie pięknej witryny A List Apart).

0

Rzeczywiście, że ja na to nie wpadłem! :)

Dziękuję bardzo i pozdrawiam!

1 użytkowników online, w tym zalogowanych: 0, gości: 1