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>
Related
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:-
I wanted to add property further on clock so added a outline type effect property .
But whenever I hover on element parent element hover property is also activated . Know this is type bubbling/capturing effect in JS and also this is how CSS works.
Plz CSS only if possible : may be JS can be used like this
onhover="func()"
getElementId().style.boxShadow = " "
have to add to every element
Can it be possible have outline property on hovered element only .
Any suggestion on better property for outline-radius or outline effect with radius are very needed
Thanks for help
#clockOuterCircle {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#clockOuterCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockInnerCircle {
position: relative;
width: 38vw;
height: 38vw;
text-align: center;
padding: 0%;
border-radius: 50%;
border: 6px solid black;
background-color: white;
}
#clockInnerCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockStyleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 28.5%;
left: 28.5%;
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
#clockStyleCircle:hover {
box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}
#clockStyleEyeCircle1 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 10%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
/* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
background-color: black;
}
#clockStyleEyeCircle2 {
position: absolute;
width: 4vw;
height: 4vw;
top: 24%;
left: 65%;
border: 3px solid black;
border-radius: 50%;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
background-color: black;
}
#clockStyleSimileCircle {
position: absolute;
width: 8vw;
height: 3vw;
top: 68%;
left: 25%;
border: 3px solid rgb(36, 36, 36);
/* border-radius: 0 0 50% 50% / 0 0 100% 100%; */
border-bottom-left-radius: 100% 200%;
border-bottom-right-radius: 100% 200%;
background-color: black;
box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
}
#clockCenterDot {
position: absolute;
width: 4%;
height: 4%;
top: 48%;
left: 48%;
border-radius: 50%;
background-color: rgba(0, 0, 0);
box-shadow: 3px 3px 10px;
z-index: 4;
}
#hourNeedle {
position: absolute;
height: 30%;
width: 2%;
top: 20%;
left: 49%;
background-color: rgb(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 1;
}
#minuteNeedle {
position: absolute;
height: 38%;
width: 1.6%;
top: 12%;
left: 49.2%;
background-color: rgba(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 2;
}
#secondNeedle {
position: absolute;
height: 46%;
width: 1%;
top: 8%;
left: 49.5%;
background-color: rgba(0, 0, 0);
border-radius: 5px 5px 0 0;
box-shadow: 3px 3px 10px;
z-index: 3;
}
<div id="clockOuterCircle">
<div id="clockInnerCircle">
<div id="clockStyleCircle">
</div>
<div id="clockCenterDot"></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;
}