I am having problem, aligning the div on 3rd box, Result will be like below.
HTML
<div class="hbox">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
</div>
CSS
.hbox
{
float: left;
width: 323px;
height: 188px;
margin: 88px 0 0 5px;
background:url("http://oi59.tinypic.com/96j3g0.jpg") no-repeat;
}
.h1
{float: left;
position: relative;
width:62px;
height:62px;
border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#000;}
http://jsfiddle.net/1mmj24ny/
try pseudo-element :before his code DEMO
.hbox
{
float: left;
width: 323px;
height: 188px;
margin: 88px 0 0 5px;
background:url("http://oi59.tinypic.com/96j3g0.jpg") no-repeat;
position:relative;
}
.hbox:before {
background: none repeat scroll 0 0 #fff;
content: "";
height: 115px;
left: 27px;
position: absolute;
top: 58px;
width: 282px;
z-index: 10;
}
.h1
{float: left;
position: relative;
width:62px;
height:62px;
border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#000;}
.h2
{float: left;
position: relative;
width:62px;
height:62px;
border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#ccc;}
.h3
{float: left;
position: relative;
width:62px;
height:62px;
border-radius:100%;
left: 79px;
top: 24px;
z-index: 2; background:#ff0000;}
Just a quick fix. Add a div with bg white inside .hbox
CSS
.white_div {
position: absolute;
width: 282px;
height: 110px;
background: #fff;
bottom: 17px;
left: 27px;
z-index:100;
}
DEMO
try this
.hbox {
float: left;
width: 323px;
height: 188px;
margin: 88px 0 0 5px;
background: url("http://oi59.tinypic.com/96j3g0.jpg") no-repeat;
position: relative;
}
.hbox:before {
background: none repeat scroll 0 0 #fff;
content: "";
height: 115px;
left: 27px;
position: absolute;
top: 58px;
width: 282px;
z-index: 10;
}
.h1 {
float: left;
position: relative;
width: 62px;
height: 62px;
border-radius: 100%;
left: 79px;
top: 24px;
z-index: 2;
background: #000;
}
.h2 {
float: left;
position: relative;
width: 62px;
height: 62px;
border-radius: 100%;
left: 79px;
top: 24px;
z-index: 2;
background: #ccc;
}
.h3 {
float: left;
position: relative;
width: 62px;
height: 62px;
border-radius: 100%;
left: 79px;
top: 24px;
z-index: 2;
background: #ff0000;
}
<div class="hbox">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
</div>
Related
I'm trying to make this in HTML/CSS
Image design in Figma of what I am trying to make
And currently It looks like this
Current way it looks
I am not sure why it is formatting like that and to clarify I haven't made the other 2 cards yet because I was trying to get the first 2 right.
Here is the HTMl code for it (don't mind the class names please)
<div class="v10_8">
<div class="v10_9"></div>
<div class="v10_15">
<div class="v10_14"><span class="v10_10">CAREY</span><span class="v10_11">1</span></div>
<span class="v10_12">On 56 Points</span>
</div>
</div>
<div class="v10_16">
<div class="v10_17"></div>
<div class="v10_18">
<div class="v10_19"><span class="v10_20">STANWAY</span><span class="v10_21">2</span></div>
<div class="v10_40"><span class="v10_22">On 40 Points</span><span class="v10_39">16 points behind Carey</span></div>
</div>
</div>
</div>
And here is the CSS code for it:
width: 262px;
height: 617px;
background: url("../images/v10_23.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 65px;
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.v10_8 {
width: 262px;
height: 276px;
background: rgba(255,255,255,1);
opacity: 1;
position: relative;
top: 0px;
left: 0px;
border-top-left-radius: 44px;
border-top-right-radius: 44px;
border-bottom-left-radius: 44px;
border-bottom-right-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
}
.v10_9 {
width: 267px;
height: 96px;
background: rgba(248,228,125,1);
opacity: 1;
position: absolute;
top: 180px;
left: 0px;
overflow: hidden;
}
.v10_15 {
width: 135px;
height: 210px;
background: url("../images/v10_15.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 44px;
opacity: 1;
position: absolute;
top: 29px;
left: 65px;
overflow: hidden;
}
.v10_14 {
width: 94px;
height: 138px;
background: url("../images/v10_14.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 17px;
opacity: 1;
position: absolute;
top: 0px;
left: 21px;
overflow: hidden;
}
.v10_10 {
width: 94px;
color: rgba(21,21,21,1);
position: relative;
top: 0px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 29px;
opacity: 1;
text-align: left;
}
.v10_11 {
width: 30px;
color: rgba(21,21,21,1);
position: absolute;
top: 52px;
left: 32px;
font-family: Folito;
font-weight: Bold;
font-size: 71px;
opacity: 1;
text-align: left;
}
.v10_12 {
width: 135px;
color: rgba(21,21,21,1);
position: absolute;
top: 183px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 22px;
opacity: 1;
text-align: left;
}
.v10_16 {
width: 262px;
height: 276px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 341px;
left: 1px;
border-top-left-radius: 44px;
border-top-right-radius: 44px;
border-bottom-left-radius: 44px;
border-bottom-right-radius: 44px;
box-shadow: -10.746728897094727px 9.849809646606445px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
}
.v10_17 {
width: 267px;
height: 96px;
background: rgba(119,221,119,1);
opacity: 1;
position: absolute;
top: 180px;
left: 0px;
overflow: hidden;
}
.v10_18 {
width: 167px;
height: 241px;
background: url("../images/v10_18.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 44px;
opacity: 1;
position: absolute;
top: 16px;
left: 50px;
overflow: hidden;
}
.v10_19 {
width: 135px;
height: 138px;
background: url("../images/v10_19.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 17px;
opacity: 1;
position: absolute;
top: 0px;
left: 16px;
overflow: hidden;
}
.v10_20 {
width: 135px;
color: rgba(21,21,21,1);
position: absolute;
top: 0px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 29px;
opacity: 1;
text-align: left;
}
.v10_21 {
width: 42px;
color: rgba(21,21,21,1);
position: absolute;
top: 52px;
left: 46px;
font-family: Folito;
font-weight: Bold;
font-size: 71px;
opacity: 1;
text-align: left;
}
.v10_40 {
width: 167px;
height: 57px;
background: url("../images/v10_40.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 11px;
opacity: 1;
position: absolute;
top: 183px;
left: 0px;
overflow: hidden;
}
.v10_22 {
width: 137px;
color: rgba(21,21,21,1);
position: absolute;
top: 0px;
left: 15px;
font-family: Folito;
font-weight: Medium;
font-size: 22px;
opacity: 1;
text-align: left;
}
.v10_39 {
width: 167px;
color: rgba(21,21,21,1);
position: absolute;
top: 38px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 16px;
opacity: 1;
text-align: left;
}
I understand the design may look slightly hard to code but I will try.
I would appreciate it if someone can help me thanks.
Two problems here...
FIRST ONE: The first code of the css you provided is incomplete.
FIRST ONE:
As I looked through your code, I realised you interchanged the positioning of the elements. Use the absolute position on the parent element and relative on the contents of the parent element. If you are a bit confused about the second issue, kindly correct the first mistake and prompt me. I'll help you out.
For this design, you must have a box that contains three columns and have two contents in the left column and the contents in the other columns are in the center.
You can achieve this in minimum div this is example for your single card you can make further changes in it.
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: red;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2{
font-size: 25px;
font-weight: bold;
text-align: center;
background: yellow;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869); /* Add the same box-shadow as the parent container */
}
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<p>1</p>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
I have this reindeer code, but it is very off center. I made this following a tutorial but in the tutorial it worked great but not on mine.
This is all the CCS code for the reindeer.
.reindeer {
height: 510px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
Im not sure how it made my reindeer so far off the center, I have tried changing relative to absolute, but it wont work. Anyone want to help me? This is a school project, and i need it done very fast.
https://imgur.com/a/rNKdyut
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
I found out something, but again same problem with it not being completely centered. I forgot to add the
height: 510px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
in the .raindeer
And now it is more centered but i dont know how to make it more centered.
Excellent work on the styles for this. Rather than trying to make the reindeer centred - the simplest approach is to put the reindeer in a div and centre that - I am using 100vw and 100vh to make the container the full screen size - and then flex to align it to the vertical and horizontal centres.
UPDATE - I also adjusted your left positions of the different elements. You can also do this with flex - but to keep it as simple as possible - I just reduced the left values that you have.
Its bbest to view this in the full screen snippet - and again - damn fine work on the styling - I like what you have done :)
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content:center
}
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 0;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 70px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 50px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 15px;
top: 300px;
}
.leg2 {
left: 55px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: -15px;
z-index: -1;
}
<div class="wrapper">
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
</div>
.header {
height: 100%;
width: 50%;
display: flex;
align-items: center;
justify-content:center
}
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
<div class="header">
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
</div>
It's all to do with you setting the left properties in your CSS. If you reduce these to shift the reindeer bits to just occupy the reindeer div you can then set the reindeer width to fit-content then use margin: auto to position it in the center of your screen.
Here's a couple of good videos by Kevin Powell on positioning here and here.
An explainer on how to use margin to center elements can be found on CSS tricks
If you like this sort of thing then try some of the challenges at CSS battle. It'll really sharpen your skills up.
Nice reindeer btw.
.pos {
/*this is used to draw a centerline down the screen. Feel free to delete this*/
position: fixed;
width: 50%;
height: 700px;
border-right: 1px solid red;
}
.reindeer {
/*position: relative; removed this */
width: fit-content; /* added this */
margin: auto; /* added this */
}
.face {
background-color: #a98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 22px; /* reduced this */
}
.antler1,
.antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6c584c;
border-top: 10px solid #6c584c;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1,
.a2,
.a3 {
background-color: #6c584c;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1,
.eye2 {
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px;
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1,
.ear2 {
background-color: #95755e;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #ee0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #f8453b;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1,
.leg2 {
background-color: #6c584c;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 40px; /*reduced this */
top: 300px;
}
.leg2 {
left: 85px; /*reduced this */
top: 200px;
}
.body {
background-color: #95755e;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 5px; /* reduced this */
z-index: -1;
}
<div class='pos'></div>
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
I am making a simple gauge meter which has minimum and maximum value as 0 and 2 respectively.
I am able to achieve the UI so far like,
.sc-gauge { width:200px; height:200px; margin:200px auto; }
.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:gray; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#fff; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#00aeef; }
.sc-percentage { transform:rotate(70deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
.sc-avg {position: absolute; top: 75%;left: 50%;}
.sc-value { position:absolute; top:50%; left:0; width:100%; font-size:48px; font-weight:700 }
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage"></div>
<div class="sc-mask"></div>
<span class="sc-value">0.7 gb</span>
</div>
<span class="sc-min">0</span>
<span class="sc-avg">1</span>
<span class="sc-max">2</span>
</div>
But the expected output needs to be like this,
The pending UI includes,
-> Placing of 0 and 2 exactly at the left beginning and and right ending of the chart.
-> Making small line in left, top and right of the chart.
-> Placing number 1 at top center of the chart..
If my points are unclear then kindly refer the attached image for exact UI.
Things I have tried to make the number 0 and 2 to left and right like image is,
.sc-percentage {
position: relative;
}
.sc-min {
position: absolute;
left: 0;
}
.sc-max {
position: absolute;
left: 0;
}
To make the line at top of the chart and to place number 1 there, I have tried,
.sc-avg {position: absolute; top: 75%;left: 50%;}
But this doesn't work the way as expected ..
I am stuck with this css work for long time.. Please kindly help me to achieve the the exact UI like in the given image.
Try this:
(You can adjust the position in the top and left/right css properties)
.sc-gauge {
width:200px;
height:200px;
margin:200px auto;
}
.sc-background {
position:relative;
height:100px;
margin-bottom:10px;
background-color:gray;
border-radius:150px 150px 0 0;
overflow:hidden;
text-align:center;
}
.sc-mask {
position:absolute;
top:20px;
right:20px;
left:20px;
height:80px;
background-color:#fff;
border-radius:150px 150px 0 0
}
.sc-percentage {
position:absolute;
top:100px;
left:-200%;
width:400%;
height:400%;
margin-left:100px;
background-color:#00aeef;
}
.sc-percentage {
transform:rotate(70deg);
transform-origin:top center;
}
.sc-min {
position: relative;
top:-13%;
left: -7%;
font-size: 12px;
color: gray;
}
.line-min{
color: #00aeef;
}
.sc-max {
position: relative;
top: -13%;
left: 82%;
font-size: 12px;
color: gray;
}
.line-max{
color: gray;
}
.sc-avg {
position: relative;
top: -68%;
left: 41%;
font-size: 12px;
color: gray;
}
.line-avg {
position: relative;
top: -59%;
right: -37%;
color: gray;
}
.sc-value {
position:absolute;
top:50%;
left:0;
width:100%;
font-size:38px;
font-weight:700;
}
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage"></div>
<div class="sc-mask"></div>
<span class="sc-value">0.7 gb</span>
</div>
<span class="sc-min">0
<span class="line-min">_</span>
</span>
<span class="sc-avg">1</span>
<span class="line-avg">|</span>
<span class="sc-max">
<span class="line-max">_</span> 2</span>
</div>
Is this what you want buddy?
.sc-gauge {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
}
.sc-background {
position: relative;
height: 100px;
margin-bottom: 10px;
background-color: gray;
border-radius: 150px 150px 0 0;
overflow: hidden;
text-align: center;
}
.sc-mask {
position: absolute;
top: 20px;
right: 20px;
left: 20px;
height: 80px;
background-color: #fff;
border-radius: 150px 150px 0 0;
}
.sc-percentage {
position: absolute;
top: 100px;
left: -200%;
width: 400%;
height: 400%;
margin-left: 100px;
background-color: #00aeef;
}
.sc-percentage {
transform: rotate(70deg);
transform-origin: top center;
}
.sc-min {
float: left;
}
.sc-max {
float: right;
}
.sc-avg {
position: absolute;
top: -12%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.sc-value {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 38px;
font-weight: 700;
}
.sc-gauge::after {
content: "";
width: 2px;
height: 10px;
background-color: lightgray;
position: absolute;
top: -10px;
left: 50%;
}
https://codepen.io/DineshRout/pen/NWdZKMw?editors=1100
On the wrap element with class .sc-gauge you need add position: relative; after this you can use position: absolute; for the child elements
Try to replace this classes:
.sc-gauge {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
}
.sc-min {
position: absolute;
left: -20px;
margin-top: -27px;
}
.sc-avg {
position: absolute;
top: -23px;
left: 50%;
}
.sc-max {
position: absolute;
right: -20px;
margin-top: -27px;
}
Example:
.sc-background {
position: relative;
height: 100px;
margin-bottom: 10px;
background-color: gray;
border-radius: 150px 150px 0 0;
overflow: hidden;
text-align: center;
}
.sc-mask {
position: absolute;
top: 20px;
right: 20px;
left: 20px;
height: 80px;
background-color: #fff;
border-radius: 150px 150px 0 0
}
.sc-percentage {
position: absolute;
top: 100px;
left: -200%;
width: 400%;
height: 400%;
margin-left: 100px;
background-color: #00aeef;
}
.sc-percentage {
transform: rotate(70deg);
transform-origin: top center;
}
.sc-value {
position: absolute;
top: 50%;
left: 0;
width: 100%;
font-size: 48px;
font-weight: 700
}
/* */
.sc-gauge {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
}
.sc-min {
position: absolute;
left: -20px;
margin-top: -27px;
}
.sc-avg {
position: absolute;
top: -23px;
left: 50%;
}
.sc-max {
position: absolute;
right: -20px;
margin-top: -27px;
}
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage"></div>
<div class="sc-mask"></div>
<span class="sc-value">0.7 gb</span>
</div>
<span class="sc-min">0</span>
<span class="sc-avg">1</span>
<span class="sc-max">2</span>
</div>
This is my timeline code this far, I would like to end the last timeline-post element in a yellow line and then to the last blue dot.
I have tried to add this class .timeline:last-child::after but this does obliviously not work!
.iconspace {
position: relative;
width: 40px;
height: 40px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #25b5f1;
z-index: 7;
}
.iconspace i {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
.timeline {
position: relative;
}
.timeline:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: RED;
z-index: -5;
}
.timeline-post {
height: 100px;
width: 200px;
background-color: green;
margin: 0 auto;
margin-top: 20px;
}
.timeline:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: YELLOW;
z-index: -5;
}
.timeline:after {
position: absolute;
content: "";
display: inline-block;
width: 15px;
height: 15px;
line-height: 1;
background-color: #25b5f1;
margin-top: 50px;
left: 49.8%;
border-radius: 50%;
text-align: center;
}
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-post">
Test 1
</div>
<div class="timeline-post">
Test 2
</div>
<div class="timeline-post">
Test 3
</div>
</div>
You need to apply last-child to timeline-post and not timeline. You need also to set negative value in bottom instead of using height:100% or your line will take the same height of the timeline-post and will never reach the blue dot.
Also never forget to add position:relative to element when using position:absolute with its pseudo-element or any child element.
.iconspace {
position: relative;
width: 40px;
height: 40px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #25b5f1;
z-index: 7;
}
.iconspace i {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
.timeline {
position: relative;
}
.timeline:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: RED;
z-index: -5;
}
.timeline-post {
height: 100px;
width: 200px;
background-color: green;
margin: 0 auto;
margin-top: 20px;
}
.timeline:after {
position: absolute;
content: "";
display: inline-block;
width: 15px;
height: 15px;
line-height: 1;
background-color: #25b5f1;
margin-top: 50px;
left: 49.8%;
border-radius: 50%;
text-align: center;
}
.timeline .timeline-post {
position: relative;
}
.timeline .timeline-post:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: -50px;
left: 49.8%;
width: 3px;
background-color: YELLOW;
z-index: -5;
}
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-post">
Test 1
</div>
<div class="timeline-post">
Test 2
</div>
<div class="timeline-post">
Test 3
</div>
</div>
I am creating a design of controls to personalize the reproduction of videos, having some errors in the design there is a disorder in the design and even more when it comes to visualizing in different type of responsive screen.
In the design of the Speed as I can order them with a drop-down menu as shown in the following example image:
How can I give the correct style to the progress bar similar to the following image:
And carry an adaptive order similar to it.
My code complete:
.seeker {
position: relative;
width: 54%;
margin: 0 1%;
display: inline-block;
margin-right: 5px;
margin: 0 10px;
}
.trackbar {
position: absolute;
width: 100%;
height: 1px;
top: 12px;
z-index: -2;
background: rgba(255,255,255,0.7);
}
.progressbar {
position: absolute;
left: 0;
top: 12px;
width: 0;
height: 1px;
border: 0;
background-color: red;
color: red;
z-index: 0;
pointer-events: none;
}
.content-video-player {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
/*background: -webkit-linear-gradient(left,rgba(0,0,0,.7) 0px,rgba(0,0,0,.7) 95px,transparent 95px,transparent 98px,rgba(0,0,0,.7) 98px);*/
background: rgba(0,0,0,.7);
-webkit-transition: bottom .4s ease-in;
}
.content-video-player div.btn {
width: 95px;
text-align: center;
float: left;
}
.btnPlay::after {
content: "";
background-image: url(http://svgshare.com/i/3um.svg);
width: 50px;
height: 50px;
display: inline-block;
background-size: cover;
position: relative;
top: -7px;
}
.btnStop::after {
content: "";
background-image: url(http://svgshare.com/i/3vz.svg);
width: 65px;
height: 65px;
display: inline-block;
background-size: cover;
position: relative;
top: -7px;
}
.video-time-player {
float: right;
color: #ccc;
text-align: center;
width: 15%;
}
.volume {
position: relative;
cursor: pointer;
width: 70px;
height: 10px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.volumeBar {
display: block;
height: 30%;
position: absolute;
top: 0;
left: 0;
background-color: #a4c9ec;
z-index: 10;
}
.sound, .btnFS {
border: none;
float: right;
}
.sound::after {
content: "";
background-image: url(http://svgshare.com/i/3v6.svg);
width: 45px;
height: 40px;
display: inline-block;
background-size: cover;
position: relative;
top: -4px;
}
.btnFS::after {
content: "";
background-image: url(http://svgshare.com/i/3u5.svg);
width: 25px;
height: 25px;
display: inline-block;
background-size: cover;
position: relative;
top: 6px;
}
<!-- Container of the controls vidio players -->
<div class="content-video-player">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div id="seeker" class="seeker">
<div class="trackbar"></div>
<div id="progressbar" class="progressbar" style="width: 114.7px;">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="video-time-player">
<span class="current">00:03</span> /
<span class="duration">00:03</span>
</div>
</div>
<div class="btnFS" title="Switch to full screen"></div>
<div class="volume" title="Set volume">
<span class="volumeBar" style="width: 84.2857%;"></span>
</div>
<div class="sound sound2" title="Mute/Unmute sound"></div>
</div>
The player layout is mainly 3 components (display: inline-table) within .content-video-player (display:table):
.playbackComponent | .timeComponent | .modComponent
▶ ] [ ⏸ ] [ X ] |_____ 07:22/15:01 | 🔉||||||| ⛶
The controls in each of the components have display:table-cell for a stable linear layout and position:absolute for finer grain adjustments. Included is a menu to adjust playbackRate, just hover over the 3rd button from the left X
Demo
*,
*::after,
*::before {
margin: 0;
padding: 0;
border: 0 none rgba(0, 0, 0, 0);
}
body {
overflow-y: scroll;
}
.content-video-player>* {
display: inline-table;
}
.content-video-player {
position: relative;
transform: translateY(68vh);
left: 0;
width: 100%;
height: 40px !important;
background: rgba(0, 0, 0, .7);
transition: bottom .4s ease-in;
display: table;
table-layout: fixed;
}
.seeker {
position: absolute;
width: 30%;
display: table-cell;
margin: 0 5px;
top: calc(50% - 6px);
left: 100px;
}
.trackbar {
position: absolute;
width: 100%;
height: 1px;
top: 12px;
z-index: -2;
background: rgba(255, 255, 255, 0.7);
}
.progressbar {
position: absolute;
left: 0;
top: 12px;
width: 0;
height: 1px;
border: 0;
background-color: red;
color: red;
z-index: 0;
pointer-events: none;
}
.content-video-player button.btn {
width: 48px;
text-align: center;
background-color: rgba(0, 0, 0, 0);
display: table-cell;
}
.btnPlay::after {
content: "";
background-image: url(http://svgshare.com/i/3um.svg);
width: 48px;
height: 48px;
display: table-cell;
background-size: cover;
position: absolute;
top: -4px;
}
.btnStop::after {
content: "";
background-image: url(http://svgshare.com/i/3vz.svg);
width: 56px;
height: 56px;
display: table-cell;
background-size: cover;
position: absolute;
left: 25px;
top: calc(50% - 28px);
}
.btnSpd {
transform: translateX(-35px);
height: 48px;
width: 48px;
font-size: 24px;
top: calc(50% - 24px);
}
.video-time-player {
position: absolute;
color: #ccc;
text-align: center;
left: 11.5em;
font-size: .3em;
width: auto;
min-width: 90px;
}
.video-time-player>* {
display: inline-block;
}
.volume {
position: relative;
cursor: pointer;
width: 80px;
height: 10px;
right: -5em;
top: 17px;
}
.volumeBar {
display: block;
height: 30%;
position: absolute;
background-color: #a4c9ec;
z-index: 10;
}
.sound,
.btnFS {
border: none;
}
.sound::after {
content: "";
background-image: url(http://svgshare.com/i/3v6.svg);
width: 45px;
height: 40px;
display: table-cell;
background-size: cover;
position: absolute;
top: 4px;
left: 25.5em;
}
.btnFS::after {
content: "";
background-image: url(http://svgshare.com/i/3u5.svg);
width: 25px;
height: 25px;
right: 5px;
display: table-cell;
background-size: cover;
position: absolute;
top: 12px;
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
.cmp {
width: 30%
}
<!-- Container of the controls vidio players -->
<main class='content-video-player'>
<section class="cmp playbackComponent" style='display:inline-table'>
<button class="btnPlay btn" title="Play/Pause video"></button>
<button class="btnStop btn" title="Stop video"></button>
<button class="btnSpd btn">X
<ul class='speed'>
<li>x3.0</li>
<li>x2.5</li>
<li>x2.0</li>
<li>x1.5</li>
<li>x1.0</li>
<li>x0.5</li>
</ul>
</button>
</section>
<section class='cmp timeComponent' style='display:inline-table'>
<div id="seeker" class="seeker">
<div class="trackbar"></div>
<div id="progressbar" class="progressbar" style="width: 114.7px;">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<time class="video-time-player">
<b class="current">00:03</b> /
<b class="duration">00:03</b>
</time>
</div>
</section>
<section id='cmp ModComponent' style='display:inline-table'>
<div class="volume" title="Set volume">
<span class="volumeBar" style="width: 84.2857%;"></span>
</div>
<button class="btn sound sound2" title="Mute/Unmute sound"></button>
<button class="btn btnFS" title="Switch to full screen"></button>
</section>
</main>