What is the right way to place the content inside the box div with rounded corners so it wouldn't overlap?
Blue box is the content div which is inside the white box parent div. I want the header to be within that parent box so that it has rounded corners at the top as well.
When I tried "overflow: hidden;" on parent box, content (blue box) just went down:
.WhiteBox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.BlueBox {
background-color: rgb(50, 116, 186);
height: 35px;
}
Specific CSS Properties
If you want border-radius for less than 4 corners, then you need to use specific properties:
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
Demo
body {
background: #000;
}
.wbox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.bbox {
background-color: rgb(50, 116, 186);
height: 35px;
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
}
<section class='wbox'>
<div class='bbox'></div>
</section>
Related
This is my website: https://zarmdev.github.io/To-doz/index.html
When I hover over the +, it doesn't overlap the panes (the squares with text).
I gave it and it's parent a z-index of 10 and the panes a z-index of 0.
CSS for the pane
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: 0; /* Z-index set here */
}
CSS for the dropdown
#dropdown {
position: relative;
display: inline-block;
z-index: 10;
}
#dropdown-content {
display: none;
position: absolute;
background-color: rgba(128, 128, 128, 0.534);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 8px 12px;
z-index: 10;
}
To see for yourself, first hover over the + button and press the other + button a few times.
When changing background color.
ALSO: When I try to hover on the other buttons, it disappears because it overlaps and thinks im hovering the pane.
Your #dropdown is partly transparent, that's why the stuff behind is visible: You defined background-color: rgba(128, 128, 128, 0.534); for it - the "0.534" value in there is the transparency value.
Change that value to avoid that.
Try change z-index property of your .pane class to value -1.
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: -1; /* Z-index set here */
}
Check here a tuto with dinamic and online examples:
z-index tutorial and examples
as a complementary solution, in the screenshot it is seen that applying z-index -1 works
the solution with z-index: -1 worked for me
I have a button with icon which I made by background-image property. And also I have focus, active pseudoclasses at button, and when button clicked it adds a border to button. And because of the border, I think, my icon moving on a px.
How can I fix it?
.form__button__section__button__social__facebook{
width: 420px;
height: 48px;
border-radius: 2px;
border:none;
outline: none;
margin-bottom: 16px;
background: #597DA3;
background-image: url("facebook_logo.png");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: 112px center;
font-family: 'RF Tone';
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
padding: 0px 0px 0px 15px;
}
.form__button__section__button__social__facebook:focus{
background-color: #3B5998;
border: 1px solid rgba(40, 40, 40, 0.1);
box-sizing: border-box;}
.form__button__section__button__social__facebook:hover,:active{
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
<button class="form__button__section__button__social__facebook" > Facebook</button>
It's effected by the border.
Try adding a transparent border for the button like below.
.form__button__section__button__social__facebook{
width: 420px;
height: 48px;
border-radius: 2px;
border: 1px solid transparent;
outline: none;
margin-bottom: 16px;
background: #597DA3;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAaVBMVEU6VZ////81Up0yT5xgc61+jbsvTZyXo8hFXaOirM0nSJmlrs7O1OUkRpkfQ5c1UZ1oerKHlcDp6/M9WKHHzeHV2ulxgravt9Td4Ozl6PGDkb7ByN5YbatQZ6j29/q3v9h2hrhMY6aQnMSsAnKHAAAC70lEQVR4nO3caXLiMBRFYdoihhhsQ5jDlPT+F9mdqv7bRrYQ7z7XOQug9BUWHiQzmRARERERERERERERERERqVe0IZQPCtaDHFwo62Yz/VrP3jtbrH0Sy7rYH46/YtpV1oPtX6jCbBel+2npThjq/Taa51AYmrdTH583YdHsP/r5nAnLTa/j05+w+ezv8yRsq/MQoB9hmPeegb6E5eU2DOhFWK4G+rwIw3CgD2G4Dge6ELaboXPQi7CJu4nwK6zvKUAHwvCVBHQgrFMmoQdh4jGqL2wviUB5YRP/uMKnsJ2mAtWF9XLkwjblcs2FsDqMXZh6LpQXhn06UFtYpZ7t5YX1wEczboTF/AlAaWFYP0OovPZU9pmGt9194W79sIq/Jt2uqqrytwbcxJ4NT9e6tR7soEIk8N749E2K7zjgubEe6dAi75yOboGxwrnTQ/RvRZTwIHy6e1SccF5Yj3N4UcJjbT3MhKKEh9J6mAlFCZWvyR4WJXxDqBxChPohRKgfQoT6IUSoH0KE+iFEqB9ChPqNQ1h0vKJcxWwt/aofvelsDFzNOlpECO9dH/DT+8ZUWMYgErNdfXuB8Ga7RPwCofHy2wuE59EfpQvbH9MXCNejF65st2q8QPhtu5Mhv/BmfE2TX/hhvGMqv3BpvBslv/BuvGUqv3A2+nloff+YX3gx3rmYX2j9CCC78Ga9NzO78GS9dTG7cDv679B8c2Z24e/R/9LsRy+8Wm/kzy60nobZhdb3TvmF9u8e5hYaP0p8gfB99PPQ/l2F3MKp+StDuYXWvuxC60eJ+YXm907ZhQJ/NlA+4d9ZOrrbH6WTzbyjmL+D/Oz6BNsl/H8V/y9E7TYpOz7BGveoceyn6QohQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLs0R8aFUYEFLSeAgAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: 112px center;
font-family: 'RF Tone';
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
padding: 0px 0px 0px 15px;
}
.form__button__section__button__social__facebook:focus{
background-color: #3B5998;
border: 1px solid rgba(40, 40, 40, 0.1);
box-sizing: border-box;}
.form__button__section__button__social__facebook:hover,:active{
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
<button class="form__button__section__button__social__facebook" > Facebook</button>
I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background-image: linear-gradient(90deg, #1559EC, #1559EC);
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
The issue is not the gradient but the pseudo element. The gradient is using the same color so the angle is useless. What you need is to invert height/width values on the pseudo element and adjust the direction of its gradient. You can also replace the gradient of the main element by simple color:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 50%;
height: calc(100% - 4px);
background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
And you can simplify it like below using multiple background on the main element:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:
linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
<div class="sidebar">
The quick brown fox
</div>
The gradient you're trying to change has both colors the same so you won't see the difference. The easiest way to make what you want IS using a generator since the code for each render engine is a bit different.
The easiest keyword solution is to use "to direction" instead of a degree. See below. The first box is top to bottom and the second is left to right.
Your example has a pseudo-class (:after) adding a second gradient to create the hard line. You could achieve a similar effect by adding more stops to the gradient.
.box{
width: 100px;
height: 100px;
margin-bottom: 20px
}
.gradient1 {
background: linear-gradient(to bottom, #8fc400, #29b8e5);
}
.gradient2 {
background: linear-gradient(to right, #8fc400, #29b8e5);
}
.gradient3 {
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
}
<div class="box gradient1">
</div>
<div class="box gradient2">
</div>
<div class="box gradient3">
</div>
I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.Good luck, and I hope this helps.
html, body {
perspective: 100px;
height: 100%;
width: 100%;
margin: 0;
}
div {
margin: 20px;
border-style: solid;
border-width: 4px 1px 1px 1px;
border-color: rgb(54, 81, 143);
border-top-color: blue;
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
width: 100px;
height: 100px;
}
<div></div>
I'm trying to make elements that look like this: http://i.imgur.com/oQr7vBI.png
but so far I've only been able to make something like this: http://i.imgur.com/o2KXgxI.png
Is there a way to move the border inside a little bit ?
span.smallCircle {
position: relative;
top: 20px;
background-color: rgba(145, 142, 142, 0.5);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 11px;
padding-right: 11px;
border: 2px dashed #fff;
border-radius: 20px;
}
Add a box shadow with the same color
box-shadow: 0px 0px 0px 5px rgba(145, 142, 142, 0.5);