Simple CSS Waves | Wave Background Css | Pure Css Wave

Simple CSS Waves | Wave Background Css | Pure Css Wave

Simple CSS Waves | Wave Background Css | Pure Css Wave


Welcome🎉 to Code With Random blog. In this blog, we learn how to create Simple CSS Waves. We use HTML & CSS  for Simple CSS Waves. Hope you enjoy our blog so let's start with a basic HTML structure for the Simple CSS Waves. 

HTML code

 <!--Hey! This is the original version  
 of Simple CSS Waves-->  
 <div class="header">  
 <!--Content before waves-->  
 <div class="inner-header flex">  
 <!--Just the logo.. Don't mind this-->  
 <h1>Simple CSS Waves</h1>  
 </div>  
 <!--Waves Container-->  
 <div>  
 <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
 viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">  
 <defs>  
 <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />  
 </defs>  
 <g class="parallax">  
 <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />  
 <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />  
 <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />  
 <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />  
 </g>  
 </svg>  
 </div>  
 <!--Waves end-->  
 </div>  
 <!--Header ends-->  
 <!--Content starts-->  
 <!--Content ends-->  
There is all HTML code for the Simple CSS Waves. Now, you can see output without CSS, then we write CSS for the Simple CSS Waves.
Output
Simple CSS Waves | Wave Background Css | Pure Css Wave

CSS code

 @import url(//fonts.googleapis.com/css?family=Lato:300:400);  
 body {  
  margin:0;  
 }  
 h1 {  
  font-family: 'Lato', sans-serif;  
  font-weight:300;  
  letter-spacing: 2px;  
  font-size:48px;  
 }  
 p {  
  font-family: 'Lato', sans-serif;  
  letter-spacing: 1px;  
  font-size:14px;  
  color: #333333;  
 }  
 .header {  
  position:relative;  
  text-align:center;  
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);  
  color:white;  
 }  
 .logo {  
  width:50px;  
  fill:white;  
  padding-right:15px;  
  display:inline-block;  
  vertical-align: middle;  
 }  
 .inner-header {  
  height:65vh;  
  width:100%;  
  margin: 0;  
  padding: 0;  
 }  
 .flex { /*Flexbox for containers*/  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  text-align: center;  
 }  
 .waves {  
  position:relative;  
  width: 100%;  
  height:15vh;  
  margin-bottom:-7px; /*Fix for safari gap*/  
  min-height:100px;  
  max-height:150px;  
 }  
 .content {  
  position:relative;  
  height:20vh;  
  text-align:center;  
  background-color: white;  
 }  
 /* Animation */  
 .parallax > use {  
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)   infinite;  
 }  
 .parallax > use:nth-child(1) {  
  animation-delay: -2s;  
  animation-duration: 7s;  
 }  
 .parallax > use:nth-child(2) {  
  animation-delay: -3s;  
  animation-duration: 10s;  
 }  
 .parallax > use:nth-child(3) {  
  animation-delay: -4s;  
  animation-duration: 13s;  
 }  
 .parallax > use:nth-child(4) {  
  animation-delay: -5s;  
  animation-duration: 20s;  
 }  
 @keyframes move-forever {  
  0% {  
   transform: translate3d(-90px,0,0);  
  }  
  100% {   
   transform: translate3d(85px,0,0);  
  }  
 }  
 /*Shrinking for mobile*/  
 @media (max-width: 768px) {  
  .waves {  
   height:40px;  
   min-height:40px;  
  }  
  .content {  
   height:30vh;  
  }  
  h1 {  
   font-size:24px;  
  }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Simple CSS Waves | Wave Background Css | Pure Css Wave

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Simple CSS Waves, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Simple CSS Waves using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - Goodkatz

Check out more.....



Post a Comment

Previous Post Next Post