I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>
Related
I'm trying to add a point/triangle to my div with a background image but am struggling with how to create enough empty space.
Here's what I'm going for:
Here's what I have so far:
<div class="bg"></div>
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
I tried following this Stack Overflow question, but the approach in the top answer creates borders that come from the ends of the rectangular div.
Could achieve your design using another div. Hope you'll like it :)
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
.helper {
position: absolute;
height: 50px;
top: 0;
left: 0;
right: 0;
}
.helper:before, .helper:after {
content: "";
background: white;
position: absolute;
top: 0;
bottom: 0;
width: calc(50% - 50px);
}
.helper:before {left: 0;}
.helper:after {right: 0;}
<div class="bg">
<div class="helper"></div>
</div>
You can achieve what you want by using pseudo element and skew them to get the shape border
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
overflow: hidden;
}
.bg:before {
content: '';
background: #fff;
position: absolute;
top: 0;
right: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(-40deg);
}
.bg:after {
content: '';
background: #fff;
position: absolute;
top: 0%;
left: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(40deg);
}
<div class="bg"></div>
I am trying to create a button with two slanted lines. One from the bottom left to the right center which I managed. The next one needs to be from the top left to the right.
The height of the left side is 50px and the height of the right side should be 30px
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
z-index: 1000;
}
.slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
I tried to do this with a :before but this didn't work out.
Suggestions are very much appreciated.
Thanks very much.
It works find using ::before. Just change the transform-origin:
.slantedButton {
position: relative;
box-sizing: border-box;
padding: 5px;
height: 30px;
background-color: #3c50a2;
line-height: 15px;
color: white;
width: 150px;
margin: 30px;
z-index: 1;
}
.slantedButton:before, .slantedButton:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
z-index: -1;
background-color: inherit;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.slantedButton:before {
transform-origin: top right;
transform: skewY(4deg);
}
.slantedButton:after {
transform-origin: top right;
transform: skewY(-4deg);
}
<div class="slantedButton">Hello World!</div>
so i have a container div which holds 5 other divs (see picture ) and on hover those divs slide in the direction the arrow is pointed ( to right of picture ). I achieved this simply with CSS's :hover property. However, it achieved it's purpose but I simply just do not like the result ( see snippet ); certain mouse positions would cause the div to go back to the original position then back to hovered position again. Any ideas for improving the hover property? Picture
body, html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow : hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before, #summer:before, #winter:before, #autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
}
#spring:hover {
left: -10%;
top:-10%;
}
#winter:hover{
left:-15%;
top:65%;
}
#autumn:hover{
left:65%;
top:65%;
}
#summer:hover {
left: 65%;
top:-15%;
}
#spring:before {
bottom: -100px;
right: -100px;
}
#summer:before {
bottom: -100px;
left: -100px;
}
#winter:before {
top: -100px;
right: -100px;
}
#autumn:before {
top: -100px;
left: -100px;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
Instead of moving the main div, you create pseudo elements and move them.
When done like that, it will solve the hover issue.
Note, you might need to adjust the movement a little, I just made them up to show how-to
body,
html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before,
#summer:before,
#winter:before,
#autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
transition: 0.6s;
border-radius: 50%;
transform-origin: left top;
}
#spring:before {
left: calc(100% - 100px);
top: calc(100% - 100px);
}
#summer:before {
top: calc(100% - 100px);
left: -100px;
}
#winter:before {
top: -100px;
left: calc(100% - 100px);
}
#autumn:before {
top: -100px;
left: -100px;
}
#spring:after,
#summer:after,
#winter:after,
#autumn:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
transform-origin: left top;
z-index: -1;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
#spring:hover::before,
#spring:hover::after {
transform: translate(-30%,-15%);
}
#winter:hover::before,
#winter:hover::after {
transform: translate(-15%,30%);
}
#autumn:hover::before,
#autumn:hover::after {
transform: translate(30%,15%);
}
#summer:hover::before,
#summer:hover::after {
transform: translate(30%,-15%);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
Trying to create a contact form in an overlay. I have the overlay div working, but it only works if I set it to "position: absolute". The div inside of the overlay, will not position properly, regardless of what I try.
Need the "form-wrap to be centered vertically & horizontally.
<div id="overlay">
<div id="form-wrap">
<img id="close-btn" src="images/framework/close.png">
<form id="form-box">
<input name="first-name" id="first-name" type="text" maxlength="32">
</form>
</div>
</div>
#overlay{
top: 0;
left: 0;
height:100%;
width: 100%;
position: absolute;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
position: relative;
z-index: 900;
margin: 0;
background-color: white;
}
try this:
#overlay{
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
position: relative;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
background-color: white;
}
Example
This will only work if the height of your overlay is greater than 600px!
#overlay{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
top: 50%;
position: relative;
z-index: 900;
margin: -300px auto 0 auto;
background-color: white;
}
Example
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/