Blog o budowie stron i marketingu - Aurelia Sypniewska
Blog o budowie stron i marketingu - Aurelia Sypniewska
Tematem jaki tym razem chce poruszyć jest tło poruszające się za kursorem myszy. W praktyce końcowym efektem będzie tło będzie podrożało podążające za ruchem myszki odsłaniając lub chowając fragmenty obrazu, zdjęcia lub grafiki umieszczonej w tle. Efekt ten można użyć jako np. tło elementu lub całej sekcji strony.
Właściwość CSS backdrop-filter należy do grupy filtrów z ich pomocą możemy wpływać na rozmycie tła w elemencie blokowym np. <div>, <span>, <p>. Właściwość ta doskonale się sprawdzi w sytuacji kiedy chcemy umieścić tekst na grafice.
Od razu przyznam się, że kiedy pierwszy raz zobaczyłam skośne tło na stronie internetowej to myślałam, że ktoś obrócił tło strony. To była moja pierwsza myśl i jak się kazało błędna.
W związku z tym, że mamy wakacje postanowiłam pisać o nieco lżejszych tematach. Dlatego też dzisiaj pokażę wam jak zrobić efekt falującego tła (wavy shape, efekt fali) na stronie. W brew pozorom efekt ten przynajmniej w uproszczonej wersji jest dosyć prosty i mało czasochłonny.
Zastanawialiście się kiedyś nad kolorem tekstu na stronie internetowe? Chcieli byście użyć tego koloru na wszej własnej stronie internetowe?
Jeśli tak to dzięki temu wpisowi dowiecie się jak go sprawdzić.
Efekt Parallax lub inaczej paralaksa to jeden z ciekawszych i jednocześnie łatwiejszych efektów jakie można spotkać na stronie internetowej. Stosowany jest głównie w wersjach strony na komputery bynajmniej nie tylko dlatego, że lepiej się na nich prezentuje.
Tym razem zajmiemy się przezroczystością na stronie internetowej. Czyli w dużym skrócie pokażę jak w prosty sposób można uzyskać przezroczystość w CSS. Efekt tego typu można bardzo łatwo i szybko uzyskać. Trzeba jedynie wiedzieć jak!
Na początku każda strona internetowa posiada białe tło. To czy budując stronę zatrzymamy ten kolor lub czy go zmienimy zależy tylko od nas.
![Jak osiągnąć efekt skośnego tła na stronie? [CSS]](https://aurainweb.pl/wp-content/uploads/2019/10/office-16.jpg)
![Efekt Parallax podczas przewijania strony internetowej [CSS]](https://aurainweb.pl/wp-content/uploads/2017/01/parallax_11zon.jpg)
![Jak umieścić grafikę, obraz, zdjęcie w tle strony internetowej! [CSS]](https://aurainweb.pl/wp-content/uploads/2017/01/office4.jpg)