I'm trying to hide an element as I'm scrolling up in the page. I'm using clip-path and position:fixed to try achieve this. This is what I have so far. The text is hidden as I'm scrolling as intended. Wondering if it would be possible to start clipping it from the top as I'm scrolling vs the bottom as it is working right now.
I want the element to be clipped from the top as I'm scrolling down.
One idea I had was to rotate the text 180 degrees, and then rotate the clipped element back 180 degrees but I'm not too sure if that would work/how to implement it. Since transform creates a containing block I don't know how to get the scrolling to work.
#main-container {
position: relative;
height: 100px;
width: 100vw;
}
#clip-container {
position: absolute;
height: 80px;
width: 100vw;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;
background-color: rgba(255, 165, 0, 0.5);
margin-top: 10px;
}
.filler-div {
background-color: blue;
width: 100vw;
height: 100px;
}
#text {
position: fixed;
}
<div class="filler-div"></div>
<div id="main-container">
<div id="clip-container">
<div id="text">
<h1>TEXT GOES HERE</h1>
</div>
</div>
</div>
<div class="filler-div"></div>
Learn any of the javascript libraries below
scrollrevealjs.org
scrollmagic.io
Related
i'm trying to apply a gradient to a skewed div but the gradient starts where the skew starts and it doesn't apply the gradient i'm looking for no matter what angle i use.
This is the gradient i'm trying to replicate
but I get a very different result...the colors are off and it's too green on the right side of mine. You can notice that on the image above, the gradient starts at the little wedge at the bottom but mine starts on the entire bottom part.
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
transform: skewY(-12deg);
transform-origin: 0;
}
<div class="main">
<div class="skew-div">
</div>
</div>
is this possible without just placing the image as a background?
Use clip-path
.main {
height: 80vh;
background-color: white;
position:relative;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
You can use clip-path property
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
Instead of using transform: skewY() you may use clip-path property. transform sometimes creates some sudden confusing problems. That's why you should sometimes escape using that property. Else use it using proper Browser Vendor Prefixes.
If you feel any difficulty configuring clip-path property then you may use this 3rd party website for clip-path value generation =>
https://bennettfeely.com/clippy/
Lets say i have a code:
#container {
position: fixed;
top: 50%;
left: 50%;
width: 0;
height: 0;
text-align: center;
font-size: 300px;
}
<div id = "container">
text
</div>
I need the text to be centered. I need the text to be centered, even if the text is bigger than the window. It is necessary, that the text is position fixed, because the whole text sometimes goes BELOW the screen. I don't want it generating any scrollbars. It is very necessary in my situation. I need the container to be as small as possible, because huge scrolling divs generating lag, and i am doing parallax, with about 40 of them.
How do you center that text?
You could try with flexbox (display: flex)
#container {
display: flex;
position: fixed;
font-size: 300px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div id="container">
text
</div>
If you use position:fixed, it should not generate scrollbars on html. No need to set size to 0, but transform translate can help:
possible example (out of your context, may be weird if you use transform3D around your page)
#container {
position: fixed;
top: 50%;
left: 50%;
font-size: 600px;/* even bigger for demo purpose*/
transform: translate(-50%, -50%);
}
/* show center */
html {
min-height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
}
<div id="container">
text
</div>
I'm trying to have a trapezoid shape In my website, everything is Ok I got the shape but I got a weird behaviour with it which is this horizontal scrolling bar:
I know where it come from it's when I set the height of the div that will be the trapezoid
this is my code:
.trapezoid {
clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 70%);
background-color: #33cccc;
width: 100%;
height: 50vh;
position: relative;
max-width: 95vw;
}
<div class="trapezoid">
<div class="circle">
</div>
</div>
Add this to the div that is making the horizontal scroll, or to the body:
overflow-x: hidden;
See more here
I'm terrible at HTML/CSS, and I'm utterly stumped by this.
Image requirements:
Positioned in the bottom right corner
Slight spacing to right (right: 2%;, or similar)
Bottom of image flush to bottom of window
Max-height of 95% of window
Max-width of 50% of window
In other words, the image MUST NOT exceed half the width of any window or over 95% of the height of the window. Extra space above or to the sides are fine.
Gradient requirements:
Transparent from top to blue bottom (background: linear-gradient( to bottom, transparent 0, blue 100%);)
Placed over the image (z-index: 1;)
Width of 100% of window at all times
Height MATCHES the image to cover it by height exactly (i.e. The gradient must cover
In other words, the gradient must color the image the same shade at each height evenly across ALL screen proportions and sizes
EDIT: Another requirement, for clarification:
No overflowing or scrolling. Image, divs, and gradient must be completely showing on the screen. The image is never partially hidden, and no scroll bars should appear.
Examples (but...):
I don't know why jsfiddle and codepen aren't positioning correctly below. At least the positioning works fine in my local code:
This is the best I could do for now:
https://jsfiddle.net/stevenmchoi/vkgfy1ts/17/
https://codepen.io/stevenmchoi/pen/qJENmj
Try this
.parent{
background: linear-gradient( to bottom, transparent 0, blue 100%);
height: 100vh;
}
.parent .img-container{
width: 50vw;
height: 95vh;
}
.parent .img-container img {
position: fixed;
right:2%;
bottom:0px;
z-index: -1;
}
<div class="parent">
<div class="img-container">
<img src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="">
</div>
</div>
Are you looking for something like the following?
.parent-div {
position: relative;
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(white, red);
overflow: hidden;
}
.monokuma-img {
position: absolute;
max-width: 50%;
max-height: 95%;
right: 2%;
bottom: 0px;
}
.despair-gradient {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
background: linear-gradient( to bottom, transparent 75%, #1543E9 100%);
}
<div class="parent-div">
<div class="despair-div">
<img class="monokuma-img" src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="" />
</div>
<div class="despair-gradient"></div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to create a diagonal background image as seen in the attached image. I can create a diagonal line using linear-gradient however as I have two different angles this didn't work.
Using Linear Gradients:
This can be done using multiple background images and positioning them accordingly. In the snippet below I've used 3 different layers - one for the top angle (a triangle which is transparent for 50% and is colored for the rest), one for the middle which is essentially nothing but a solid colored rectangle, this is created using linear gradients as it is easier to control the dimensions of an image and finally one for the bottom angle (same approach as the top one but this has a different height and so different angle.)
The output is also responsive as you can see by hovering the element in the below snippet. In the 2nd div, I've set different colors for each image so that you can see how it is formed.
div {
height: 300px;
width: 100%;
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightblue, lightblue), linear-gradient(to top right, transparent 50%, lightblue 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
transition: all 1s ease; /* just for demo */
}
/* just for demo */
div {
margin-bottom: 10px;
}
div:hover {
height: 400px;
}
div:nth-of-type(2) {
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightpink, lightpink), linear-gradient(to top right, transparent 50%, lightgreen 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
}
<div></div>
<div></div>
Using SVG: recommended
This is the approach that I generally recommend and is the best. It involves creating the shape using SVG and then placing it absolutely behind the div element.
div {
position: relative;
height: 300px;
width: 100%;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
polygon {
fill: lightblue;
}
<div>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<polygon points='0,10 300,0 300,100 0,75z' />
</svg>
</div>
Using Clip-path:
Another approach that can be used is to position a pseudo-element behind the main div and then set a clip-path in the required shape to this pseudo-element.
Note: This snippet will currently work only in WebKit powered browsers. Firefox would need the clip-path to be created via SVG element whereas IE doesn't support it all.
div {
position: relative;
height: 300px;
width: 100%;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: lightblue;
-webkit-clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
}
<div></div>
CSS Perspective
You can use a CSS Perspective Transform to create the shape you want.
div {
margin-top: 25px;
width: 500px;
height: 150px;
transform: perspective( 800px ) rotateY( -25deg );
background: blue;
}
<div></div>
CSS Tricks Docs
Perspective - CSS | MDN
You can apply perspective to the parent container of the rotated div to give it 3-dimensional depth from the front of the viewport.
N.B. For the difference between transform: perspective(value) and perspective: value, see the CSS Tricks Almanac entry on perspective:
Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children
elements. This is the main difference between the transform: perspective() function and the perspective property. The first
gives element depth while the latter creates a 3D-space shared by all
its transformed children.
After applying a 3-dimensional depth to the parent container using perspective, you can then apply rotateY to the div you want to rotate.
Working Example:
section {
position: relative;
width: 600px;
perspective: 800px;
transform: translateX(-60px);
}
div:nth-of-type(1) {
position: absolute;
top:30px;
left: 0;
width: 100%;
height: 100px;
background-color: rgb(235,250,255);
transform: rotateY(320deg);
}
div:nth-of-type(2) {
position: absolute;
top: 0;
left: 220px;
width: 120px;
height: 140px;
background-color: rgb(103,201,236);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
div:nth-of-type(3) {
position: absolute;
top: 24px;
left: 340px;
width: 120px;
height: 140px;
background-color: rgb(255,255,255);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
<section>
<div></div>
<div></div>
<div></div>
</section>