I want to style every element of my page except for a particular div. I believe this is done with :not, but I'm not sure. I'm doing this to make the opacity of all elements 0.7, except for a popup.
Here is my alternative sugestion: a layer with opacity in front of the web, but behind the overlay.
Here is an example: https://jsfiddle.net/j1jodsej/
HTML
<div id="overlaybg"></div>
<div id="overlay">
I'm the overlay
</div>
CSS
#content {
text-align: justify;
}
#overlaybg {
position: fixed;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,0.5);
}
#overlay {
position: fixed;
z-index: 2;
top: 30px;
background: #FFF;
text-align: center;
left: 50%;
width: 200px;
margin-left: -100px;
padding: 30px;
}
You can give it a id/class like no-opacity and then in css opacity: 1 !important;
Here's an example: http://jsfiddle.net/Lez6kkgw/1/
Related
I want to do an effect similar to a Penrose stair where you have element-1 on top of element-2 but behind element-3 witch is behind of element-2 a bit complicated from what I can tell.
I have this code
<body>
<div class="parent">
<div id="s1" class="square"><div></div></div>
<div id="s2" class="square"><div></div></div>
</div>
</body>
.parent {
width: 300px;
height: 300px;
border-radius: 25px;
background: orange;
position: relative;
}
.square{
display: inline-block;
position: absolute;
z-index: 10;
}
#s1{
--Color: teal;
left: calc(100px);
top: calc(100px);
transform: rotate(45deg);
}
#s2{
--Color: cornflowerblue;
right: calc(100px);
bottom: calc(100px);
transform: rotate(-135deg);
}
.square>div{
width: 50px;
height: 50px;
border-radius: 10px;
background: var(--Color);
opacity: 1;
}
.square>div:before{
content: " ";
display: inline-block;
position: relative;
width: 100px;
height: 8px;
background: var(--Color);
background: #000;
z-index: -1;
top: 5px;
left: 5px;
}
The code has two elements both with a before reaching the other element, this is a simplified version of my problem, but I want to have the before behind both elements.
There are some other restrictions I need to consider, this should be responsive so I can't get away with a set width so easely. Also, I'm trying to keep it as vanilla as possible.
Edit 1:
I'm want to acheave this
effect
You can make each box elements full width in two elements. One side having a higher z-index than the other side and the thin lines. This will give the illusion that you hove one box instead of pseudo elements to make up the entirety of your box element. Adjust the radius of each combining element so it is only on the two corners it needs to be. Adjust the positioning of each absolute element to line up with its corresponding colored half.
-- EDIT: OP asked to have the two black lines below the two box elements --
In this case you can use the #s2 pseudo element copying the properties to recreate the same box, make it position: absolute then move it left using positioning essentially covering up the two black lines.
Because the second element is parsed after the first in the DOM and
they are sort of tied at the hip; one set being a box and its child
element the black line, we use the second parent elements pseudo
element #s2:after to cover the first as it will naturally sit on top of
both elements in z-indices.
-- end of edit --
NOTE: I also created divs out of your span elements as a div is a block level element and should not be nested inside SPAN.
My example is just down and dirty but it should illustrate how this illusion can be achieved.
.parent {
width: 300px;
height: 300px;
border-radius: 25px;
background: orange;
position: relative;
}
.square{
display: inline-block;
position: absolute;
z-index: 10;
}
#s1{
--Color: teal;
left: calc(100px);
top: calc(100px);
transform: rotate(45deg);
position: relative;
z-index: 1;
}
#s2{
--Color: cornflowerblue;
right: calc(100px);
bottom: calc(100px);
transform: rotate(-135deg);
}
#s2:after{
content: "";
position: absolute;
background-color: teal;
border-radius: 10px;
top: 0;
left: 70px;
width: 100%;
height: 100%;
}
.square>div{
width: 50px;
height: 50px;
border-radius: 10px;
background: var(--Color);
opacity: 1;
}
.square>div:before{
content: " ";
display: inline-block;
position: relative;
width: 100px;
height: 8px;
background: #000;
z-index: -1;
top: 5px;
left: 5px;
}
<body>
<div class="parent">
<div id="s1" class="square"><div></div></div>
<div id="s2" class="square"><div></div></div>
</div>
</body>
I am trying to create a solid line that extends both to and from the left side of an element. I can create one that extends to the left, but it overlaps the element (in this case an H2). I need it to "start" before the text does. I can use something like right: 15px to solve this problem, but I would need to adjust the px size in every instance this is used since some H2s will be longer, and some shorter. I would like to find a solution that doesn't require different right values since this will be used with multiple H2s of various lengths.
Here is the code I am using now:
h2::before {
display: inline-block;
content: "";
height: 3px;
background: #E47325;
position: absolute;
width: 400%;
top: 50%;
margin-top: -2px;
}
This is how it currently looks:
And this is how I would like it to look ideally, without having to arbitrarily set padding to the right side:
Something like this?
body {
text-align: center;
}
h2 {
position: relative;
display: inline-block;
}
h2::before {
display: inline-block;
content: "";
height: 3px;
background: #E47325;
position: absolute;
width: 100%; /* Added */
top: 50%;
left: calc(-100% - 10px); /* Added */
margin-top: -2px;
}
/* And the same on the other side */
h2::after {
display: inline-block;
content: "";
height: 3px;
background: #E47325;
position: absolute;
width: 100%;
top: 50%;
left: calc(100% + 10px); /* Different here */
margin-top: -2px;
}
<h2>Hello</h2>
Wrap <h2> in a <header> (or any block element but <header> is 100% semantic).
Assign ::before to <header> instead. Make <header> position: relative
Assign h2 position: absolute and z-index: 1
Assign header::before position: absolute as well
The height and top values are based on the browser default font-size: 1.5em of h2 -- so adjust accordingly if h2 font-size has been altered.
header {
position: relative;
height: 1.625em;
}
h2 {
position: absolute;
z-index: 1;
right: 0;
top: calc(50% - 1.3125em);
width: max-content;
background: #FFFFFF;
}
header::before {
content: " ";
display: block;
position: absolute;
top: calc(50% - 1.5px);
height: 3px;
width: 99%;
background: #E47325;
}
<header>
<h2>HEADING</h2>
</header>
<header>
<h2>A LONGER HEADING</h2>
</header>
Is there a property that allows one element in a div to stack over another element in the same div?
I know with two divs you can use position: relative; & position: absolute; to get this working, but with two elements in the same div I'm not sure what to do.
If you would like to "stack" elements on top of each other, yes you can use the position property.
You would use z-index to alter stack order; the element with the higher z-index would be in front of an element with the lower z-index.
You can see this here, in this fiddle.
.el1 {
height: 100px;
width: 100px;
background: yellow;
position: relative;
z-index: 1;
}
.el2, .el3 {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
background: blue;
z-index: 2;
}
.el3 {
background: green;
z-index: 3;
top: 5px;
left: 5px;
}
<div class="el1">
<div class="el2">el2</div>
<div class="el3">el3</div>
</div>
I have this div here...
<div class="gallery"></div>
and here is the CSS:
.gallery {
background-color: #000;
height: 125px;
text-align: center;
position: fixed;
width: 100%;
z-index: 99999999;
top: 10%;
}
Now my site is broken up into <section> and I am trying to have that element at the top of the section at all times, not that top of the page. How would I accomplish this ?
Add css position: relative to your <section>. Then for .gallery, change fixed to position: absolute; top: 0; left; 0;
Remove that top; 10% stuff too...
You would have to modify the position to be absolute and and top: 0;
I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!