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/>
Related
I'm trying to create a timeline in WordPres like this:
I managed to create the vertical line in the middle of the content by using the following code:
.here:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 40px dotted #44b072;
transform: translate(-50%);
}
div {
margin: 10px auto;
width: 60%;
height: 100px;
position:relative;
text-align:center
}
<div class="here"></div>
But how can I add the numbers on top of the vertical line, and how do I add the line at the left or right of the number. I thought of using pseudo elements to achieve that. But haven't figured it out yet.
Usually I would suggest to use svg for complicated graphics like these, but here is an example how I solved it with pure html/css.
.timeline {
display: flex;
flex-direction: column;
position: absolute;
top: 25%;
left: 50%;
padding-top: 20px;
}
.timeline__backroad {
background-color: #45B072;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}
.timeline__backroad:before {
content: '';
border-left: 2px dotted white;
height: 100%;
position: absolute;
left: 50%;
}
.timeline__circle {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #7D206A;
border-radius: 50%;
font-size: 30px;
color: white;
margin-bottom: 50px;
z-index: 2;
}
.timeline__circle.is--left:before {
content: '';
border: 2px solid #7D206A;
width: 25px;
position: absolute;
left: -25px;
}
.timeline__circle.is--right:after {
content: '';
border: 2px solid #7D206A;
width: 25px;
position: absolute;
left: 50px;
}
<div class="timeline">
<div class="timeline__backroad"></div>
<div class="timeline__circle is--left">5</div>
<div class="timeline__circle is--right">6</div>
</div>
I made a bulb in pure CSS and I want the bulb to change color on click. But my bulb shape consists of two shapes, so I cannot hover over both. Is there a way to solve this without using JavaScript, sticking to CSS only? Is there maybe a way to create this yellow shape without the need to combine two? Or any other way I could have the hover effect working.
.box {
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 600px;
background: white;
}
#circle {
position: absolute;
width: 40%;
height: 40%;
background: yellow;
top: 20%;
left: 30%;
margin: 0 auto;
border-radius: 50%;
}
#trapezoid {
position: absolute;
background: yellow;
height: 30%;
width: 40%;
left: 30%;
top: 42%;
-webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
#bottom1 {
position: absolute;
height: 5%;
width: 25%;
background: grey;
top: 72%;
left: 37.5%;
z-index: 1;
}
#bottom1:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom1:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#bottom2 {
position: absolute;
height: 5%;
width: 22%;
background: grey;
top: 78%;
left: 39%;
}
#bottom2:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom2:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#bottom3 {
position: absolute;
height: 5%;
width: 18%;
background: grey;
top: 84%;
left: 41%;
z-index: 1;
}
#bottom3:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom3:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#shine {
width: 20%;
height: 20%;
background: white;
border-radius: 50%;
top: 20%;
position: absolute;
left: 18%;
}
.halfCircle {
height: 100px;
width: 100px;
border-radius: 0 0 90px 90px;
}
#halfCircle {
height: 45px;
width: 90px;
border-radius: 0 0 90px 90px;
background: black;
margin: 0 auto;
top: 88%;
position: relative;
}
.drop {
width: 5%;
height: 5%;
position: absolute;
border: 15px solid orange;
}
#left {
left: 38%;
top: 45%;
border-radius: 50% 50% 0 50%;
}
#left:after {
content: "";
height: 110px;
width: 24px;
border: 15px solid orange;
display: block;
position: absolute;
left: 100%;
top: 100%;
}
#right {
right: 38%;
top: 45%;
border-radius: 50% 50% 50% 0;
}
#circle:hover {
background: red;
}
#trapezoid:hover {
background: red;
}
<div class='box'>
<div id='circle'>
<div id='shine'></div>
</div>
<div id='trapezoid'></div>
<div id='bottom1'></div>
<div id='bottom2'></div>
<div id='bottom3'></div>
<div id='halfCircle'></div>
<div class='drop' id='left'></div>
<div class='drop' id='right'></div>
<div id='wire'></div>
</div>
You don't have to apply the :hover directly to the element that you want to change. You can hoist it to a wrapping element and apply it there.
Considering your example, your selectors would likely be something along the lines of:
.box:hover #circle {
background: red;
}
.box:hover #trapezoid {
background: red;
}
Consider this concrete example. Hovering either of the nested <div> cause the sibling <div> to also change color because #container is being :hovered.
#foo,
#bar {
height: 20px;
background-color: green;
border: 1px solid white;
}
#foo:hover,
#bar:hover {
background-color: blue;
border: 1px dashed yellow;
}
#container:hover #foo,
#container:hover #bar {
background-color: red;
}
<div id="container">
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
I have a cloud made with HTML/CSS and I'm trying to include some text in the center of it. But I'm having trouble positioning it and having it overlap over the cloud divs.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
overflow: hidden;
position: absolute;
z-index: -2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c">
<p class="text">
this is some text
</p>
</div>
<div id="left_c">
</div>
</div>
Not entirely sure how to make it work, I thought the z-index would allow the text to take "priority" and show first, but it doesn't seem to be working. Do I need to insert the p tags inside another div? Any suggestions would be appreciated!
Remove the text element from its current nesting level. Just make it a sibling of the border divs. Still one overall container.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
position: absolute;
top: 40px;
left: 135px;
z-index: 2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
<p class="text">this is some text</p>
</div>
If you change your html to:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
<p class="text">
this is some text
</p>
and the text element in css to:
.text {
overflow: hidden;
position: absolute;
z-index: 2;
top:200px;
right:200px;
}
then it works.
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;
}
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/