I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
Related
Using CSS alone, I am trying to perform a panning behavior on a div that's positioned absolute inside a parent div.
I ultimately want to change the width and height dynamically (zoom in and out behavior). I want to be able to pan (using scrolling) across the whole child div when the size is bigger than the parent.
The child div has bigger width and I expect to scroll to see all 4 edges of it. But, the scroll only happens to the right side and the bottom side. If I have some content in that div – which would be rendered in the top left corner of the div – I can't scroll to it.
.container {
height: 300px;
background: red;
position: relative;
overflow: scroll;
}
.child {
font: 400 14px/17px 'Roboto';
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200%;
width: 200%;
background: black;
opacity: .5;
}
<div class="container">
<div class="child">
Demo Text To Be Shown
</div>
</div>
In this example, the child div has 200% in width and height. I can't scroll to see the left and top edges.
It's just not possible for an element to scroll further up than the top. Here's what you can do instead: give the container some padding so the child isn't off-screen.
.container {
height: 300px;
padding-top: 150px;
padding-left: 50%;
background: red;
position: relative;
overflow: scroll;
}
.child {
position: absolute;
top: 0;
left: 0;
height: 200%;
width: 200%;
background: black;
opacity: .5;
color: grey;
}
<div class="container">
<div class="child">
Demo Text To Be Shown
</div>
</div>
I'm not sure What you want to achieve. I presume you want to see the text:
I amend a bit your CSS:
.container {
height: 300px;
background: red;
position: relative;
overflow: scroll;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -25%);
height: 200%;
width: 200%;
background: black;
opacity: .5;
color:red;
}
I change transform from -50 to -25 and add color:red. Text appears in the left top corner.
I have created the following markup (an example to demonstrate) with a CSS skew transform:
.wrapper {
height: 100px;
width: 200px;
position: relative;
background-color: orange;
}
.inner {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
transform: skew(30deg);
background-color: blue;
opacity: .7;
}
<div class="wrapper">
<div class="inner"></div>
</div>
The problem is that the inner div .inner is being position outside of the container .wrapper even though I set right to 0 because the inner div is skewed 30 degrees. How can I position the inner div with the right most part being at the same position? I could hard code the value of right, but it would appear differently with different screen sizes. If I set the overflow of the outer div to hidden, the right side would still be misaligned. I've seen this post which suggests using transform-origin and -webkit-transform-origin, which I set to right, but none of the solutions worked. What can I do?
You need transform-origin: bottom
.wrapper {
height: 100px;
width: 200px;
position: relative;
background-color: orange;
}
.inner {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
transform: skew(30deg);
transform-origin: bottom;
background-color: blue;
opacity: .7;
}
<div class="wrapper">
<div class="inner"></div>
</div>
I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?
Please see the attached image. The white part is the background image and the blue part is my div over the background.
You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:
.image-with-block-wrapper {
position: relative;
}
.image {
height: 200px;
border: 1px solid #111;
background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}
.div-over-bg {
border: 1px solid #111;
position: absolute;
height: 50px;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
background: green;
width: 100px;
margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
<div class='image'></div>
<div class='div-over-bg'></div>
</div>
</body>
</html>
Edit:
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
So I've created a container with a background image and placed a div inside.
I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px
.container {
background-image: url('https://via.placeholder.com/150');
width: 100%;
background-position: cover;
height: 300px;
position: relative;
}
.container .block {
height: 300px;
background-color: blue;
width: 500px;
position: relative;
margin: auto;
top: 100px;
}
<div class="container">
<div class="block">
</div>
</div>
Extra info by #I_Can_Help
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
I have 2 images (both 3000px x 3000px) and I have one as background and one in front of it (frontal one will rotate).
Problem now is that I always start at top/left corner (0px x 0px)...I want to start at 1500px from left and 1500px from top (=center of the image), so without overflow:hidden, you can see the x/y scrollbars centered (vertical/horizontal).
Is there some way to achieve this effect?
html,
body {
position: relative;
background: url(stripes.jpg) no-repeat;
background-position: center;
margin: 0;
padding: 0;
width: 3000px;
height: 3000px;
overflow: hidden;
}
.stars{
position: absolute;
width: 3000px;
height: 3000px;
border: 2px solid red;
z-index: 99;
background: url(squares.jpg) no-repeat center;
}
these (bad) images will give you some understanding of the wanted effect
Try this:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
I'm trying to achieve the following - an element with a background image, a pattern over the top of the background image, and a box on top of both that "knocks-out" the pattern but still shows the background image.
Here's an image showing the desired effect:
As you can see the pattern does not show under the top box, but you can still see the background image.
Here's the markup:
<div class="bck">
<div class="bck2"></div>
</div>
<div class="box">
<p>Text goes here</p>
</div>
And the CSS:
.bck {
position: relative;
height: 800px;
width: 100%;
background:url(http://upload.wikimedia.org/wikipedia/commons/7/79/Preller_Norwegian_landscape.jpg)
}
.bck2 {
position: absolute;
height: 800px;
width: 100%;
top: 0;
left:0;
background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);
}
.box {
border: 10px solid white;
padding: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px;
}
I've tried a few things with clip-path, z-index and webkit-background-clip, but can't seem to get the combo right.
Any pointers would be very appreciated. Thanks.
Oh and here's the pen: http://codepen.io/juxprose/pen/yyKEqQ
I think the idea here is that the image must be large enough to cover the webpage or at least the parent div..
Then you can apply the image to the background of both the container and the 'inner'div.
The overlay can be achieved by way of a pseudo-element rather than a separate div.
Revised structure -
.bck {
position: relative;
height: 800px;
width: 100%;
background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.bck::before {
content:'';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left:0;
background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);
}
.box {
border: 10px solid white;
padding: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 30px;
background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
background-position: center center;
}
<div class="bck">
<div class="box">
<p>Text goes here</p>
</div>
</div>