How to add waves between sections of your website
For my portfolio, I want to give an overall feeling of movement and use water-related imagery. One style idea I had was to use a waveshape between sections of the website.
How to implement this? I mostly followed the process outlined in this how-to. The steps below follow his method, adding styling for multiple background colors.
Step 1: Setting up the HTML and CSS
An outline of the HTML body that has one header and two sections is below. The structure is that each header or section of the website is contained in a div tag with class="wave-container". At the bottom of each of these containers, after the header/section content, the SVG code for the wave will be inserted. If you wanted your wave at the top of a section, the SVG code would be inserted above the header/section content in the container.
<body>
<div class="wave-container">
<header>
<!-- Content -->
</header>
<!-- SVG goes here -->
</div>
<div class="wave-container">
<section>
<!-- Content -->
</section>
<!-- SVG goes here -->
</div>
<div class="wave-container">
<section>
<!-- Content -->
</section>
<!-- SVG goes here -->
</div>
<!-- Footer, scripts, etc. -->
</body>
Starting point for the CSS:
*,*::before,*::after {
box-sizing: border-box;
}
html, body {
margin: 0;
color: #ffffff;
font-family: 'Helvetica', sans-serif;
letter-spacing: 1px;
text-align: center;
}
h1, h2, h3, p{
margin: 0;
}
h1{
padding: 1em;
}
.wave-container > svg {
display: block;
}
*Note - the SVG must have the property display: block. Otherwise, you will end up with white space around your SVG (in this case, beneath the SVG).
Step 2: Pick some colors!
To pick my background colors, I used the palette generator on https://mycolor.space. My starting hex code came from an image I plan to use on the site.
I added these colors to my CSS below:
.background-first{
background-color: #65728d;
}
.background-second{
background-color: #8a6e96;
}
.background-third{
background-color: #7b7096;
}
Step 3 - Make waves!
I used the tool recommended in the how-to I linked at the top of this post: https://getwaves.io/. This tool allows you to create a waveshape and then download the SVG code.
The code will look something like the below. Two properties to keep in mind for later:
viewBox creates a box around the SVG. The wave scales proportionally within this box.
fill designates the fill color for the SVG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#65728d" fill-opacity="1" d="..."></path>
</svg>
Paste the code for your SVG in the wave container.
I generated two different waveshapes to vary the transition between sections. I used one SVG underneath the header and the second section, and one beneath the first section.
Step 4 - Styling
This was the trickiest part for me - I wanted the color of a given section to match that of the SVG wave beneath it, giving the appearance that the section and SVG were all one piece. I then wanted the color of the next section to begin.
To achieve this, the wave container background needs to match the background of the next section. Here's how that looks in the HTML, using the CSS background classes I created above:
<body>
<div class="wave-container background-second">
<header class="background-first">
<!-- Content -->
<h1>Allison Truhlar</h1>
<h3>Full-stack Software Developer</h3>
</header>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#65728d" fill-opacity="1" d="..path 1.."></path>
</svg>
</div>
<div class="wave-container background-third">
<section class="background-second">
<!-- Content -->
<h2>Projects</h1>
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#8a6e96" fill-opacity="1" d="..path 2.."></path>
</svg>
</div>
<div class="wave-container background-first">
<section class="background-third">
<!-- Content -->
<h2>Contact</h1>
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#7b7096" fill-opacity="1" d="..path 1.."></path>
</svg>
</div>
<!-- Footer, scripts, etc. -->
<footer class="background-first"><p>Footer</p></footer>
</body>
Note - the fill of the SVG path should match the hex code of the header or section background class.
The result:
