Is it possible to mask a div with wave structure - html

I have a design with wave structure in top and three static images in bottom.Top image is the banner image ie dynamic, user will upload a image,we need to show that image in a div with wave structure as show below.Is there is any way to achieve it using svg, canvas, HTML and css3.

You can play with the values:
HTML:
<div id="wave"></div>
CSS:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}

Related

create multiple pseudo elements in the same container

In this way, the last statement will be the only one visible due to the css cascade.
Isn't there an alternative way to have all three pseudo-elements in the same container?
div class="container"</div>
.container {
position: relative;
}
.container:after {
position: absolute;
content: "some text";
top: 10%;
left: 20%;
}
.container:after {
position: absolute;
content: "";
border: 5px solid yellow;
width: 50%;
top: 10%;
left: 20%;
}
.container:after {
position: absolute;
content: "";
border: 5px solid blue;
width: 60%;
top: 30%;
left: 50%;
}
As it is not possible to have multiple before or after pseudo elements on one element, this snippet takes a different approach to placing the yellow and blue underlines.
They are drawn using CSS background-image with two linear-gradients on one pseudo element. Each is sized and positioned appropriately.
The snippet produces this:
body {
width: 100vw;
display: flex;
justify-content: center;
}
.container {
--h: 0.5em;
/* set this to the height of each underline */
font-family: sans-serif;
font-size: 36px;
text-align: center;
position: relative;
display: inline-block;
}
.container::before {
content: '';
position: absolute;
width: 300%;
height: 2em;
left: 50%;
transform: translateX(-50%);
background-image: linear-gradient(#ffff66, #ffff66), linear-gradient(cornflowerblue, cornflowerblue);
background-size: 95% var(--h);
background-position: left 0.75em, right 1em;
background-repeat: no-repeat;
z-index: -1;
}
<div class="container">Some text</div>
Obviously you will want to set the various dimensions to suit your particular case.

Responsive two colored waves

I been scratching my head trying to figure out how to do this using CSS.
I'm not opposed to doing this another way, but I am trying to figure out how to get this done overlapping and image or video and making it responsive.
waves
Pen: https://codepen.io/skella1/pen/GRjNLzx
#wave {
position: relative;
height: 70px;
width: 100%;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
Use this code it will work
#wave {
position: relative;
height: 70px;
width: 100%;
background: #e0efe3;
}
#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: 50%;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"/>
<div/>

create curved div without image [duplicate]

This question already has answers here:
Wavy shape with css
(7 answers)
Closed 4 years ago.
I want to replicate an image effect. On this page https://inventi.studio/en you can see some div containers with "waves". The curved effect is achieved by uploading an image as a background.
So this is what I currently have
#box {
height: 200px;
background-image: linear-gradient(135deg, #47b784, #009d90 26%, #00818e 50%, #25647b 74%, #36495d);
}
<div id="box">
</div>
<div id="page">
Content starts here
</div>
and this is what I tried to achieve
#wave {
position: relative;
height: 70px;
width: 600px;
background: #47b784;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #47b784;
left: 0;
top: 27px;
}
<div id="wave">
</div>
<div id="page">
content starts here
</div>
but as you can see the div below the curved div gets covered. I am trying to achieve this effect with one single div container that is not overlapping other ones.
How can I achieve this with one div container and no image as a background?
Can you not just add padding top to page equal to the top of the wave before?
#wave {
position: relative;
height: 70px;
width: 600px;
background: #47b784;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: 0;
top: 39px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #47b784;
left: 0;
top: 27px;
}
#page {
padding-top: 40px;
}
<div id="wave">
</div>
<div id="page">
content starts here
</div>

Overlay background image of div over image that was loaded through js

I am trying to overlay an image in a div ontop of another image from the <img>. My code right now is:
<div class="something">
<img class="pp" src="get_pp()" />
<div class="img1"></div>
</div>
get_pp() is a Js function that gives me the img url before the page loads. And my css:
#pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
#img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Unfortunately setting the z-index doesn't work. Any help would be appreciated!
Your error probably has something to do with the fact that you have your elements identified with class names in your HTML, but defined as IDs in your CSS.
Change CSS to:
.pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
.img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Try this for starters.
First thing you have used class instead of id
so change
.pp {
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
}
.img1 {
background-image: url("../images/img_name.png");
height: 50px;
width: 50px;
top: 315px;
left: 30px;
position: absolute;
display: block;
z-index:300;
}
Second use image here instead of get_pp() etc.
Demo here

How to add a half circle at the bottom middle of my header?

Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/