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ć.
<div class="wave"/>
<div/>Jak widać jest to zwykły DIV praktycznie na stronie niewidoczny. Dlatego teraz zmodyfikujemy go z pomocą CSS.
.wave {
position: relative;
height: 70px;
width: 600px;
background: #d63e3e;
margin: 0 auto;
}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:
.wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 57%;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
.wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 51%;
height: 70px;
background-color: #d63e3e;
left: 0;
top: 27px;
}A tak to wygląda po złożeniu w całość:
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.