To get figures on one above the other, currently I am using the below method:-
<div id="box_cgf" class="box red"><figure class="c-green" id="cg1"><figure class="c-yellow" id="cy1"></figure></figure></div>
This is like, making one figure as parent and another as child. But, I do not want to use parent-child method. I would like to use as below:
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
.container {
width: 500px;
height: 500px;
margin: auto;
margin-top: 80px;
cursor: pointer;
/* border: 1px solid black; */
}
.container-row1,
.container-row3 {
width: 100%;
height: 40%;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
height: 100%;
width: 40%;
}
}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
float: left;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
display: flex;
justify-content: center;
align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
width: 70%;
height: 70%;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
width: 35%;
height: 35%;
float: left;
margin: 7.5%;
/* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
width: 33.333%;
height: 16.667%;
float: left;
border: 1px solid black;
}
.red {
background-color: #dc2418;
}
.white {
background-color: #fff;
}
.card {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.c-yellow {
display: flex;
align-items: center;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
height: 90%;
width: 90%;
background: rgb(246, 243, 0);
background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
box-shadow: 1px 1px #888888;
}
.c-green {
display: flex;
align-items: center;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
height: 90%;
width: 90%;
background: rgb(97, 194, 31);
background: radial-gradient(circle, rgba(97, 194, 31, 1) 5%, rgba(97, 194, 31, 1) 100%);
box-shadow: 1px 1px #888888;
}
<!DOCTYPE html>
<html>
<body>
<div class="container card">
<!-- First row -->
<div class="container-row1 clearfix">
<div class="row1-col3">
<div class="row1-col3-child clearfix white">
<div id="box_cgf" class="box red">
<figure class="c-green" id="cg1"></figure>
<figure class="c-yellow" id="cy1"></figure>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you see its not getting one above the other, and its coming out of the div too.
Expected result is:-
Related
Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both:
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
.container {
width: 500px;
height: 500px;
margin: auto;
margin-top: 80px;
cursor: pointer;
/* border: 1px solid black; */
}
.container-row1,
.container-row3 {
width: 100%;
height: 40%;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
height: 100%;
width: 40%;
}
}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
float: left;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
display: flex;
justify-content: center;
align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
width: 70%;
height: 70%;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
width: 35%;
height: 35%;
float: left;
margin: 7.5%;
/* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
width: 33.333%;
height: 16.667%;
float: left;
border: 1px solid black;
}
.yellow {
background-color: #f6c700;
}
.white {
background-color: #fff;
}
.card {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.c-yellow {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
height: 90%;
width: 90%;
border-radius: 50%;
height: 90%;
width: 90%;
background: rgb(246, 243, 0);
background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
box-shadow: 1px 1px #888888;
}
.c-blue {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
height: 90%;
width: 90%;
border-radius: 50%;
height: 90%;
width: 90%;
background: rgb(0, 243, 243);
background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
box-shadow: 1px 1px #888888;
}
<!DOCTYPE html>
<html>
<body>
<div class="container card">
<!-- First row -->
<div class="container-row1 clearfix">
<div class="row1-col3">
<div class="row1-col3-child clearfix white">
<div class="yellow">
<figure class="c-yellow">
<figure class="c-blue"></figure>
</figure>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both.
Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both:
please use the below code to center vertically and horizontally
.yellow {
display: flex;
align-items: end;
justify-content: center;
}
.c-yellow {
display: flex;
align-items: center;
}
I added to .card, .row1-col1-child,.row1-col3-child,.row3-col1-child,.row3-col3-child ,.container-row1,.container-row3 classes
display: flex;
align-items: center;
justify-content:center;
css:
<style>
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
.container {
width: 500px;
height: 500px;
margin: auto;
margin-top: 80px;
cursor: pointer;
/* border: 1px solid black; */
}
.container-row1,
.container-row3 {
width: 100%;
height: 40%;
display: flex;
align-items: center;
justify-content: center;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
height: 100%;
width: 40%;
}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
float: left;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
display: flex;
justify-content: center;
align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
width: 70%;
height: 70%;
display: flex;
align-items: center;
justify-content: center;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
width: 35%;
height: 35%;
float: left;
margin: 7.5%;
/* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
width: 33.333%;
height: 16.667%;
float: left;
border: 1px solid black;
}
.yellow {
background-color: #f6c700;
}
.white {
background-color: #fff;
}
.card {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
display: flex;
align-items: center;
justify-content: center;
}
.card:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.c-yellow {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
height: 90%;
width: 90%;
border-radius: 50%;
height: 90%;
width: 90%;
background: rgb(246, 243, 0);
background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
box-shadow: 1px 1px #888888;
}
.c-blue {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
height: 90%;
width: 90%;
border-radius: 50%;
height: 90%;
width: 90%;
background: rgb(0, 243, 243);
background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
box-shadow: 1px 1px #888888;
}
</style>
I am trying to make a progress bar as is shown here in the about section however I am just lost.
I can make a bar and a box but neither look anywhere near as good as that and I cannot for the life of me get them to be beside each other with equal height. I just keep getting something along the lines of
What I am trying to achieve in case website goes down:
.myskills {
width: 45vw;
height: 100%;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
justify-content: center;
height: 2vh;
}
.skillName {
background-color: blue;
width: 5vw;
float: left;
height: 100%;
font-size: 2em;
}
.meter {
float: left;
width: 80%;
height: 100%;
/* Can be anything */
position: relative;
background: #555;
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: hotpink;
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"></span>
</div>
</div>
</div>
This code below will give you the percentage sign on the right of the percentage bar. A lot of this is purely layering with hmtl/css.
Here are some links for layering and z-index:
https://www.tutorialspoint.com/css/css_layers.htm#:~:text=The%20CSS%20layers%20refer%20to,element%20should%20come%20at%20bottom.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
https://css-tricks.com/almanac/properties/z/z-index/
.myskills {
width: 90%%;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
}
.skillLevel{
right: 0;
font-size: 1.7em;
position: absolute;
}
.skillName {
background-color: rgb(77, 252, 208);
float: left;
font-size: 2em;
}
.meter {
float: left;
width: 100%;
/* Can be anything */
position: relative;
background: rgb(218, 217, 217);
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: rgb(31, 134, 117);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"><span class="skillLevel">90%</span></span>
</div>
</div>
</div>
Well, IMO you should use less vh and vw. Your font simply defines the height and the width of the text part. By removing them, you get something as you want as I understood (I also removed useless properties) :
.myskills {
width: 45vw;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
}
.skillName {
background-color: blue;
font-size: 2em;
}
.meter {
float: left;
width: 100%;
/* Can be anything */
position: relative;
background: #555;
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: hotpink;
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"></span>
</div>
</div>
</div>
Now, if it was my progress bar I'd use flex instead of width for .meter, I'd take a smaller font size and put padding to the text :
.myskills {
width: 45vw;
background: red;
margin: 1em;
}
.skillbarContainer {
display: flex;
}
.skillName {
background-color: blue;
font-size: 18px;
padding: 3px 10px;
}
.meter {
float: left;
flex: 1;
/* Can be anything */
position: relative;
background: #555;
padding: 3px;
}
.meter>span {
display: block;
height: 100%;
background-color: hotpink;
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
<div class="myskills">
<div class="skillbarContainer">
<div class="skillName">HTML</div>
<div class="meter">
<span style="width: 80%"></span>
</div>
</div>
</div>
I'm currently making a forum in school, and I'm working on a profile page. On this profile page, I want to have a couple of banners that the users can choose from. I want to make these banners the same size as the div they're in. I also want them to be centred inside the div and resize it. Is it possible to do what I have shown in the two images where the banner get's cut off when it's resized?
This is my code:
.user-pic {
width: 120px;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
float: left;
margin: 10px;
transition: .4s ease-in-out;
z-index: 2;
}
.user-pic:hover {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.user-pic-overlay {
width: 120px;
position: absolute;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
margin: 10px;
opacity: 0;
transition: .5s ease-in-out;
z-index: 3;
}
.user-pic-overlay:hover {
opacity: .8;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
width: 75%;
margin: 25px auto;
box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
height: 33vh;
margin: auto;
border: 5px solid #1b1b1b;
box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
z-index: 2;
}
.user-header-pic {
position: absolute;
z-index: -2;
margin: auto;
width: 75%;
}
.user-header-pic-overlay {
position: absolute;
margin: auto;
height: 33vh;
opacity: 0;
cursor: pointer;
transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
opacity: .8;
}
.user-header-nav {
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
text-align: right;
margin: auto;
}
.user-header-btn {
margin: 5px 5px 5px 5px;
padding: .4em .6em;
background-color: #424242;
border-radius: 2px;
font-size: 14px;
color: #f5f5f5;
cursor: pointer;
border: none;
}
.user-haeder-btn:focus {
outline: none;
}
<div class="user-header-wrap">
<div class="user-header">
<img class="user-header-pic" src="../images/header.jpg" alt="">
<img class="user-pic" src="<?php echo $ppp;?>" alt="">
<p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
<p class="prof-txt-2">Level</p>
</div>
<div class="user-header-nav">
<button class="user-header-btn">Edit Profile</button>
</div>
</div>
First Image Second Image
added
.user-header-pic {
position: relative;
z-index: -2;
margin: auto;
width: 100%;
height: 100%;
}
.user-pic {
width: 120px;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
float: left;
margin: 10px;
transition: .4s ease-in-out;
z-index: 2;
}
.user-pic:hover {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.user-pic-overlay {
width: 120px;
position: absolute;
border: 3px solid #1b1b1b;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
margin: 10px;
opacity: 0;
transition: .5s ease-in-out;
z-index: 3;
}
.user-pic-overlay:hover {
opacity: .8;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
}
.user-header-wrap {
width: 75%;
margin: 25px auto;
box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.4);
}
.user-header {
height: 33vh;
margin: auto;
border: 5px solid #1b1b1b;
box-shadow: 0 -25px 100px -22px inset rgba(0, 0, 0, 0.8);
z-index: 2;
}
.user-header-pic {
position: relative;
z-index: -2;
margin: auto;
width: 100%;
height: 100%;
}
.user-header-pic-overlay {
position: absolute;
margin: auto;
height: 33vh;
opacity: 0;
cursor: pointer;
transition: .4s ease-in-out;
}
.user-header-pic-overlay:hover {
opacity: .8;
}
.user-header-nav {
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
text-align: right;
margin: auto;
}
.user-header-btn {
margin: 5px 5px 5px 5px;
padding: .4em .6em;
background-color: #424242;
border-radius: 2px;
font-size: 14px;
color: #f5f5f5;
cursor: pointer;
border: none;
}
.user-haeder-btn:focus {
outline: none;
}
<div class="user-header-wrap">
<div class="user-header">
<img class="user-header-pic" src="https://images.unsplash.com/photo-1553052944-763b0cbd086a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="">
<img class="user-pic" src="<?php echo $ppp;?>" alt="">
<p class="prof-txt"><?php $ss = $_SESSION["GLOBALNAVN"]; echo $ss; ?></p>
<p class="prof-txt-2">Level</p>
</div>
<div class="user-header-nav">
<button class="user-header-btn">Edit Profile</button>
</div>
</div>
This question already has answers here:
center overflowing div inside smaller div
(1 answer)
Larger div centered inside smaller div
(3 answers)
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
I have a login page that is absolutely centered in the middle of the page both horizontally and vertically.
Inside there are 2 divs, smaller pink one and bigger blue one.
How can I center the bigger one?
.container {
background: rgba(249, 249, 249, 1);
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
height: 342px;
height: max-content;
left: 0;
margin: auto;
padding: 60px 30px 60px 30px;
position: absolute;
right: 0;
top: 0;
width: 300px;
overflow: visible;
}
.smaller {
background: pink;
}
button {
background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
border: 0;
color: rgba(255, 255, 255, 1);
margin: 10px;
padding: 8px 70px 8px 20px;
box-sizing: content-box;
width: 50px;
}
.bigger {
width: 400px;
text-align: center;
background: blue
}
<div class="container">
<div class="smaller pink">
<h2>Sign In</h2>
<input>
</div>
<div class="bigger blue">
<button>Back</button><button>Login</button>
</div>
</div>
.container {
background: rgba(249, 249, 249, 1);
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
height: 342px;
height: max-content;
left: 0;
margin: auto;
padding: 60px 30px 60px 30px;
position: absolute;
right: 0;
top: 0;
width: 300px;
overflow: visible;
}
.smaller {
background: pink;
}
button {
background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
border: 0;
color: rgba(255, 255, 255, 1);
margin: 10px;
padding: 8px 70px 8px 20px;
box-sizing: content-box;
width: 50px;
}
.bigger {
width: 400px;
text-align: center;
background: blue;
margin: auto;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
<div class="container">
<div class="smaller pink">
<h2>Sign In</h2>
<input>
</div>
<div class="bigger blue">
<button>Back</button><button>Login</button>
</div>
</div>
Just set width to 100%
.container {
background: rgba(249, 249, 249, 1);
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
height: 342px;
height: max-content;
left: 0;
margin: auto;
padding: 60px 30px 60px 30px;
position: absolute;
right: 0;
top: 0;
width: 300px;
overflow: visible;
}
.smaller {
background: pink;
}
button {
background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
border: 0;
color: rgba(255, 255, 255, 1);
margin: 10px;
padding: 8px 70px 8px 20px;
box-sizing: content-box;
width: 50px;
}
.bigger {
width: 100%;
text-align: center;
background: blue
}
<div class="container">
<div class="smaller pink">
<h2>Sign In</h2>
<input>
</div>
<div class="bigger blue">
<button>Back</button><button>Login</button>
</div>
</div>
I think this will help you
.container {
background: rgba(249, 249, 249, 1);
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
height: 342px;
height: max-content;
left: 0;
margin: auto;
padding: 60px 30px 60px 30px;
position: absolute;
right: 0;
top: 0;
width: 450px;
overflow: visible;
}
.smaller {
background: pink;
width: 300px;
margin:auto;
}
button {
background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
border: 0;
color: rgba(255, 255, 255, 1);
margin: 10px;
padding: 8px 70px 8px 20px;
box-sizing: content-box;
width: 50px;
}
.bigger {
width: 400px;
text-align: center;
background: blue;
margin:auto;
}
<div class="container">
<div class="smaller pink">
<h2>Sign In</h2>
<input>
</div>
<div class="bigger blue">
<button>Back</button><button>Login</button>
</div>
</div>
You may want to consider using flexbox which also is responsive by nature.
.container {
background: rgba(249, 249, 249, 1);
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
height: 342px;
height: max-content;
left: 0;
margin: auto;
padding: 60px 30px 60px 30px;
position: absolute;
right: 0;
top: 0;
width: 300px;
overflow: visible;
}
.smaller {
background: pink;
}
button {
background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
border: 0;
color: rgba(255, 255, 255, 1);
margin: 10px;
padding: 8px 70px 8px 20px;
box-sizing: content-box;
width: 50px;
}
.bigger {
display: flex;
background: blue;
justify-content: space-around;
}
<div class="container">
<div class="smaller pink">
<h2>Sign In</h2>
<input>
</div>
<div class="bigger blue">
<button>Back</button><button>Login</button>
</div>
</div>
Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks
Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}