Tło w kształcie fali (wavy shape) z pomocą CSS

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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.

Ostateczny efekt, o który nam chodzi będzie taki jak na obrazku poniżej.

Nie jest to więc jakaś „duża fala”, ale od czegoś trzeba zacząć.

Falujące zakończenie tła z pomocą CSS

Budowę naszego tła zaczniemy od zbudowania kontenera, którego tło będziemy przekształcać.

Jak widać jest to zwykły DIV praktycznie na stronie niewidoczny. Dlatego teraz zmodyfikujemy go z pomocą CSS.

No dobrze mamy teraz zwykły prostokąt. Teraz by stworzyć falę skorzystamy z pseudo elementów CSS czyli :before i :after. Odsyłam was do mojego wpisu na ten temat jeśli jeszcze ich nie znacie albo chcecie wiedzieć na ten temat coś więcej.

Natomiast nasz kod prezentuje się następująco:

A tak to wygląda po złożeniu w całość:

See the Pen
wave
by Aura (@Julka85)
on CodePen.

Gdzie można wykorzystać ten efekt?

Podchwytliwe pytanie 😏 – oczywiście na stronie internetowej. Jeżeli rozdzielimy sekcje naszej strony z pomocą takiego efektu będzie ona na pewno ciekawiej wyglądać.

 

Źródła:
https://stackoverflow.com/questions/17202548/wavy-shape-with-css
https://www.freecodecamp.org/forum/t/bottom-wave-shape-effect/169299/2

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *