It is similar to the one we discussed earlier, just smaller in height. To recreate this, we’ll make three similar waves with only slight differences in the amplitude and frequency. Layered waves with SVGĪnother common wave design involves using multiple waves to form a layered effect. SVG Wave Design by Saleh-Mubashar ( CodePen. The SVG approach is similar, however, we add the SVG code directly after the container. With the CSS approach, we simply add the div with class of wave after the container:ĬSS Wave Design by Saleh-Mubashar ( CodePen. We’ll implement the wave at the bottom of the blue background. The design is very simple, consisting of a title, some text, and a dummy button, but you can build onto it as desired. To wrap things up, we’ll create a simple web design using both the CSS and SVG waves. Take a look at the one below for our wave: Lastly, L creates the straight lines to the right and left of the rectangle.Ī great way to create a wave, visualize it, and work with SVGs in general is to use an SVG path editor. We’ve given it three coordinates, which represent the maximum and minimum points of the wave. Basically, we are moving to the coordinate 0,100. For the path, we first have an M command in the position 0,100. ViewBox in the SVG element basically determines the width and height of the SVG as a whole. In the HTML, you can see the simple, four line SVG code we used to create this wave. Simple SVG Wave by Saleh-Mubashar ( CodePen. C: Curve to takes three sets of coordinates as parameters to create a Bézier curve.L: Line to takes two x and y parameters, creating a line from the current position to the new position.M: Move to takes two x and y parameters.Below is a brief overview of the commands we’ll use: The SVG path element will do most of the work for us. To start off, we need a basic understanding of how SVG shapes work. Let’s create the same wave from above in SVG. Creating waves with SVGĬreating shapes like waves and other similar complex designs is arguably easier to do with SVG than CSS. Pseudo Elements CSS Wave by Saleh-Mubashar ( CodePen. We use the clip-path in the after element so the purple circle, as shown in the image above, does not exceed the rectangle’s height: Instead, we have a transform scale in the wave class that we can use to scale the wave up or down in the x and y directions. For one, you don’t have to change any values within the code to manually adjust the height and width of the wave. There are a few important things to note here. We’ll use the top property to move the ovals up and down and a border-radius to give them a circular shape: Ĭlip-path: ellipse(100% 15% at -15% 100%) We’ll give each an absolute position according to the image above, as well as a fixed height and width. Then, we’ll create two pseudo classes for the purple and red ovals. To create this type of wave effect in CSS, first, we’ll create a wave div that will have a relative position and a fixed height and width. If we make the purple oval black and the red oval white, our wave will be done! We can remove the excess purple part on top of the rectangle by using clip-path, which we’ll discuss later: The basic idea behind creating a wave shape is to create a rectangle element with an oval above and below it:Īs seen in the image below, by overlapping the two ovals on top of the rectangle, we can create the shape of a wave: In this article, we’ll learn how to create a few kinds of simple waves using both CSS and SVG, then implement them into an actual UI. Nowadays, wavy backgrounds are a popular trend in web design, however, the wave is a notoriously difficult shape to implement. To add gradient background we will be using the Background property in which we will define the type of gradient here we will be adding the “radial gradient” and adding a ellipse effect at the center of our webpge we have added 3,4 color to add the gradient effect to our webpage.Using the overflow property we also added the hidden property to hide the data overflow.Having interesting, eye-catching visuals can go a long way towards making your site memorable to viewers. Now using the body tag we will be adding a gradient background color to our webpage. Using the html and body tag selector we will be adding height to “100%” to our webpage. Margin-bottom:-7px /*Fix for safari gap*/Īnimation: move-forever 25s cubic-bezier(.55.5.45.5) infinite Hope you enjoy our blog so let’s start with a basic HTML structure for the Simple Waves background Css. Do you use any external links to create this project?.Which code editor do you use for this Wave Backgrounds project coding?.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |