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>
Related
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>
I have made a footer in Photoshop looking like this:
As you can see, the footer here is slightly arced all the way across. I have tried doing something with border-radius, but that almost only targets the edge, which makes the arc more curved in the edges, and not even receiving the effect of a subtle arced footer as seen in the image.
Is there an easy CSS way to do this, or do I need some JavaScript or something to achieve this?
Use a pseudo element of the footer with border-radius to make the arch.
I made them different colors here so you can see which element is which.
body {
margin: 0;
max-height: 100vh;
overflow: hidden;
}
footer {
bottom: 0; left: 0; right: 0;
position: absolute;
background: brown;
height: 10vh;
}
footer::before {
content: '';
background: red;
width: 200%;
position: absolute;
left: 50%;
top: -100%;
transform: translateX(-50%);
height: 1000%;
border-radius: 50%;
z-index: -1;
}
<footer></footer>
This solution uses a large width to get a more pleasant curve, but without the pseudo-element:
footer {
background-color: red;
width: 200%;
transform: translateX(-25%);
height: 200px;
border-radius: 50% 50% 0 0;
}
<div>
<footer></footer>
</div>
Its not perfect, but here i've got a really really big circle that's absolutely positioned with the overflow hidden so that you only see the top part of the arc.
#container{
background: grey;
height:300px;
width:500px;
position:relative;
overflow:hidden;
}
#arc{
position: absolute;
top:200px;
left:-800px;
width:2000px;
height:2000px;
border-radius:2000px;
background:brown;
}
<div id="container">
<div id="arc">
</div>
</div>
https://jsfiddle.net/z9pq1026/
You can actually use border-radius to do this without a pseudo element.
.arc {
width: 100%;
height:500px;
background: #000000;
border-radius: 50% / 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div class="arc"></div>
will work just fine. Make sure that when you use:
border-radius: 50% / 30px;
the first property is always "50%" as this will ensure the arc meets in the middle. The second property (after the "/") is the height of the arc measured from the middle to the edges
The circle solution, but it's responsive!
footer {
background: #ececec;
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.arc {
position: absolute;
top: 0px;
right: calc(-80%);
width: 300%;
padding-top: 100%;
border-radius: 100%;
background: black;
}
<footer>
<div class="arc">
</div>
</footer>
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 many div, which are in position:absolute.
I try to avoid their superimposition only with CSS rule. I don't want to change the top value.
.try {
/*some magic?*/
}
#pos1 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 30px;
}
#pos2 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 90px;
left: 30px;
}
#pos3 {
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 300px;
left: 30px;
}
#pos4 {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 400px;
left: 30px;
}
#current {
position: absolute;
top: 5px;
left: 50px;
}
#expected {
position: absolute;
top: 200px;
left: 50px;
}
<h1 id="current">Current</h1>
<div id="pos1" class="try"></div>
<div id="pos2" class="try"></div>
<h1 id="expected">Expected</h1>
<div id="pos3"></div>
<div id="pos4"></div>
Here is also a jsfiddle :
ps: I supose this behavior it's stupid because I ask for position absolute.
Absolutely positioned elements are removed from the normal flow of the document. That means surrounding content ignore them and occupy their place:
9.6 Absolute positioning
In the absolute positioning model, a box [...] is removed from the
normal flow entirely (it has no impact on later siblings). [...] The
contents of an absolutely positioned element [...] may obscure the
contents of another box (or be obscured themselves), depending on the
stack levels of the overlapping boxes.
So either don't use absolutely positioning, or move your elements (e.g. with margins).
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!