I am making a website and made a shape as a background with an after. Before the background i want some text. I made 2 divs, and within those divs i made two paragraphs. I set the paragraphs to display flex, and to justify space around so they are seperated in 2 blocks in one row. What happens: in Chrome and Firefox everything is oke. In Safari, the last paragraph just disappears. Trying to set z-index doesn't work, or i am doing something wrong.
Can you help me?
Thanks!
I also made a codepen for this: https://codepen.io/Dehv27/pen/OKmByy
Thanks in advance for the help!
HTML
<section class="intro">
<div class="text textblok1">
<p>Test</p>
<p>Test</p>
</div>
<div class="text textblok2">
<p>Test</p>
<p>Test</p>
</div>
</section>
CSS / SCSS:
section.intro{
width: 100%;
margin-top: 3rem;
height: 620px;
&:after{
content: '';
position:absolute;
height: 300px;
overflow: hidden;
top: 0;
right:0;
bottom:0;
left:0;
z-index: -1;
background: #3fb9bc;
transform: perspective(1366px) rotateY(-12deg) scale(1.6);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.text{
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
p{
width: 45%;
span{
text-decoration: underline;
}
}
}
.textblok1{
padding-top: 6rem;
transform: rotate(-2deg);
}
.textblok2{
padding-top: 8rem;
transform: rotate(2.2deg);
}
}
It's something wrong with rotate and scale. If I remove perspective and change rotateY to simple rotate, it will work without any issues (here is my codepen example):
section.intro{
width: 100%;
margin-top: 3rem;
height: 620px;
&:after{
content: '';
position:absolute;
height: 300px;
overflow: hidden;
top: 0;
right:0;
bottom:0;
left:0;
z-index: -1;
background: #3fb9bc;
transform: rotate(5deg) scale(1.8); //this line is changed and result is the same but no errors in Safari now!
border-top: 2px solid black;
border-bottom: 2px solid black;
}
Related
I have a div-container, a bootstrap collapse element. In it there is another round element, which changes position, when using the collapse function. Means: It should be positioned on the top-border, but behind the bottom-border.
How would you solve this task?
My first idea was to use object-fit to cut off the bottom part of the round element, but that did not look well with transition and collapse. Second idea was to use a thick border-bottom as an after-pseudo-element to cover the bottom part, which did not work so far.
Do you have any ideas or have you done something like that?
Thank you!
Use clip-path:
.box {
border: 3px solid;
height: 200px;
margin: 50px;
position: relative;
clip-path: inset(-200% 0 0); /* a big negative value on the top to clip only left/right/bottom */
transition: 1s;
}
.box:hover {
height: 50px;
}
.box:before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
border: 3px solid;
border-radius: 50%;
background: red;
}
<div class="box">
</div>
You may also use transform3D + background to hide portions of it:
div {
margin:0 1em;
padding:1px;
display:flex;
padding-bottom:2em;
background:white;
transform-style: preserve-3d;
}
div[class] {
border:solid;
border-bottom:none;
height:150px;
transition:0.25s;
}
div[class] + div {
border-top:solid;
}
div[class]:hover {
height:60px;
}
div span {
height:150px;
width:150px;
align-self:center;
background:red;
border-radius:50%;
margin-right:1em;
border:solid;
margin-left:auto;
margin-bottom:-2.2em;
transform:rotatex(-0.15deg) translatez(1px);;
}
<div>Whatever stands here</div>
<div class>
<p>hover to collapse</p>
<span></span>
</div>
<div>Whatever stands next</div>
This has been asked before but none of the answers seem to be working for me.
My issue is related to a lost z-index when a transformation is applied.
I have an overlay div with a defined z-index, it has a sibling with no z-index and this div contains a child with a z-index greater than the overlay. This child can be dragged around.
At some point I rotate this sibling and it's child loses the z-index.
How can I prevent this from happening?
I tried several solutions attemps like transform-style: flat; or transform-style: preserve-3d; but with no luck
This is the code
HTML
<div class="main">
<div class="some_container">
<div class="drag"></div>
</div>
</div>
<div class="overlay"></div>
<br><br><br>
<button>rotate!</button>
CSS
body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.main {
border: 1px dashed blue;
padding: 15px;
}
.some_container {
position: relative;
background-color: green;
}
.overlay {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 5
}
.drag {
position: relative;
width: 30px;
height: 30px;
background-color: lime;
z-index: 10;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
.rotated .drag {
background-color: yellow;
transform: rotateZ(-15deg);
position: relative;
z-index: 100;
transform-style: flat;
}
JS
$(".drag").draggable();
$("button").click(function()
{
$(".some_container").addClass("rotated");
});
fiddle: https://jsfiddle.net/2zkn9dap/
The transform that you have in your .rotated class creates a new stacking context that is changing the order that the elements are layered. A great explanation with more detail can be found here: z-index is canceled by setting transform(rotate)
The best approach to solving this is to move the .drag div to be a sibling of the .overlay and .some_container div. Then update your JS to add the rotated class to the green and yellow squares so they are both rotated. Otherwise, you'll never be able to get the yellow square on top of the red one consistently, because the z-index of the parent, in this case the .some_container div takes precedence.
$("button").click(function(){
$(".green").addClass("rotated")
$(".lime").addClass("rotated").css({backgroundColor: 'yellow'});
});
body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.container {
border: 1px dashed blue;
padding: 15px;
}
.green {
position: absolute;
background-color: green;
z-index: 2;
}
.red {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 3;
}
.lime {
position: absolute;
width: 30px;
height: 30px;
background-color: lime;
z-index: 4;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
<div class="container">
<div class="green">
</div>
<div class="lime"></div>
</div>
<div class="red"></div>
<br><br><br>
<button>rotate!</button>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
Change the position: relative to absolute of .lime.
If you don't want to rotate the '.lime' div, then remove `.addClass("rotated") on the 4th line of the script.
I'm trying to create a bar graph with HTML/CSS and I'm having trouble with CSS's scale property. Here's my code so far:
.main {
position: absolute;
top: 350px;
width: 80%;
height: 65%;
background-color: #1d1d1d;
border: 20px #3f3f3f solid;
left: 50%;
transform: translate(-50%, 0);
}
.bar {
position: relative;
display: inline-block;
width: 30px;
margin-left: 1.1%;
background-color: #38ff90;
border-top: 5px #1d6d41 solid;
border-left: 5px #1d6d41 solid;
border-right: 5px #1d6d41 solid;
transform-origin: bottom;
transform: scaleY(10);
}
.bar-height {
position: relative;
display: inline-block;
opacity: 0;
}
<div class="main">
<div style="height: 100%;" class="bar-height"></div>
<div style="height: <?php echo $height ?>px;" class="bar"> </div>
</div>
When I use scale(), this ends up scaling the border on each bar. How can I scale the bar element without scaling the border?
You've some examples here:
note that it's usually done with SCSS or JS /any JS framework.
https://codepen.io/Victa/pen/xDqbf
https://codepen.io/dxdc100xp/pen/WwMQwE
https://codepen.io/baletsa/pen/oHcfr
the code provided is only to see the logic and the procedure for reach this. SCSS is a good option and not too difficult to use it's like CSS on steroids.
I am trying to achieve this effect in my webpage..
The red box is where I will be placing a menu, I would like the bottom of the red box to be slanted. The section on the right of the slant needs to be transparent as there may be an image in the background where the grey color is.
The only thing I can come up with is to rotate the element but that would also rotate the contents of the element which I do not want.. Only the bottom bg of the red element (which will be a solid color) should be slanted.
you can do it like that, just highlighted the rotated part blue, that you see what happens ;)
you might have to play with the top: and left: values if you change the size
edit: added a small menu example (really small ^^)
jsfiddle link
here is the html part:
<div id="menucontainer">
<ul>
<li>some</li>
<li>menu</li>
<li>here</li>
</ul>
</div>
<div id="rotatedDiv">
</div>
<div id="background"></div>
and here the css part:
#menucontainer{
position: relative;
z-index: 100;
background: red;
height: 100px;
}
#menucontainer ul {
position: absolute;
bottom: 0px;
left: 30px;
}
#menucontainer li {
list-style: none;
margin-left: 10px;
background: #123;
display: inline-block;
}
#rotatedDiv {
z-index: 99;
background: blue;
position: absolute;
top: 14px;
left: -5px;
height: 90px;
width: 200%;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#background {
background: green;
}
you might want to modify it in any way you can think of, but the main part should be clear i think ;)
You can do it with a transparent border:
html
<div class="bgone">
<div class="content">This is where the menu would go.</div>
</div>
<div class="bgtwo"></div>
css
.bgone {
height: 100px;
background: black;
position: relative;
}
.bgtwo {
height: 50px;
border-top: 100px solid black;
border-right: 1000px solid transparent;
}
.content {
position: absolute;
top: 10px;
left: 10px;
color: #FFF;
}
I am having the following code from this link for making a Lightbox effect. It is working fine in Firefox and Google Chrome but having problem in Internet Explorer 8. In IE, all the images and text of the webpage coming above the black_overlay and both black and white overlay are in background. Please help in fixing the problem.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#666;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position:absolute;
top: 15%;
left: 320px;
width: 50%;
height: 40%;
padding: 16px;
border: 2px solid #d2d2d2;
background-color: white;
z-index:1002;
overflow: auto;
/*margin-top:100px;*/
}
HTML:
Login
<div id="light" class="white_content">
<p>Hello</p>
Close
</div>
<div id="fade" class="black_overlay"></div>
Remove the </div> after the line <p>Hello</p>. Also see my jsfiddle.