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
Related
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
I need to find a solution to keep the cropped image but have content sit inside with an opacity filter on the div. The problem I'm facing is that it wont match the angles and i cant use an overlap hidden, need to find a solution.... can anyone help with this shame you cant use an ::after on image to add filter div to darken a section :(
.promo {
position: relative;
}
.promo img {
-webkit-clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
}
.promo__content {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
height: 100% color: #fff;
background: black;
}
<div class="promo">
<img src="https://i.picsum.photos/id/100/600/600.jpg" >
<div class="promo__content">
Content Here
</div>
</div>
Example of what I'm trying to do black box in the angled image the black box will be see through
Apply the clip-path to the whole container and not only the image to get what you want:
.container {
margin:50px 0;
clip-path:polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
display:flex;
}
.box {
width:30%;
padding:80px;
box-sizing:border-box;
background:#000;
color:#fff;
}
.img {
width:70%;
background:url(https://i.picsum.photos/id/1074/1000/1000.jpg) center/cover;
}
<div class="container">
<div class="box">
some text here<br>
some text here<br>
some text here<br>
some text here<br>
some text here<br>
</div>
<div class="img"></div>
</div>
I am trying to position an SVG image over a clipped background that parallaxes over another background. I want the SVG to be half over the background and half over the foreground, but it gets clipped along with the background using clip path. Is there another method i could be using for the effect that would work without clipping SVG, or are there ways to disable the inherited effect? Bear in mind, I would like to keep it positioned relative to this background.
CSS in question
.content
{
height: 300vh;
min-height: 150vh;
background: #25282A;
clip-path: polygon(-400% 100%, 100% 100%, 100% 10%);
position: relative;
z-index: 1;
}
.content img{
position: relative;
top: 20vh;
left: 2vw;
z-index: 3;
}
HTML
<section class="content">
<img src="/Asssets/RWR food image.jpg">
<img src="/Assets/Title.svg" />
</section>
You need to consider another alternative as clip-path will clip the element and all its content.
Since it's about background, you can rely on gradient like below to create a similar effect.
.content {
height: 300vh;
min-height: 150vh;
background:
/*a triangle shape offested by 50px from the top taking 25% of the height*/
linear-gradient(to bottom right,transparent 49.8%,#25282A 50%) 0 50px/100% 25%,
/*fill the remaining (75% - 50px) with solid color*/
linear-gradient(#25282A,#25282A) bottom/100% calc(75% - 49px);
background-repeat:no-repeat;
}
<div class="content">
</div>
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>
I have a larger div contained within a smaller one; I'm enabling scrolling over the width and height of the internal div using overflow: auto on the outer div. However, in Chrome the scrollbars that appear never scroll all the way to the right/bottom edges, instead, they only ever fully touch the top/left edges. Is there a way to adjust their position to make them more centered and reach all the way to the bottom/right, or to have them not extend as far to the top/left?
Thanks.
HTML:
<body>
<div class="grid">
<div class="grid-background">
</div>
</div>
</body>
CSS:
.grid {
width: 700px;
height: 500px;
overflow: auto;
border-radius: 5%;
position: relative;
}
.grid-background {
width: 1000px;
height: 1000px;
background: linear-gradient(red, yellow);
}
https://jsfiddle.net/Aurus7/cdwfe3yd/6/
I've made an workaround by creating an scrollbar for a different element that overlays (scrollbar-part of) the grid using a fixed position. The idea came from here. Here is my applied version:
JSFiddle
Code:
JS:
function Scroll(element) {
var scrollbar = document.getElementById('scrollWrapper');
var child = scrollbar.appendChild(document.createElement('div')); //create content
child.style.width= '1000px';
child.appendChild(document.createTextNode('\xA0'));
scrollbar.onscroll= function() {
element.scrollLeft= scrollbar.scrollLeft;
};
element.onscroll= function() {
scrollbar.scrollLeft= element.scrollLeft;
};
}
Scroll(document.getElementById('container'));
HTML:
<div id="container">
<div class="grid">
<div class="grid-background">
</div>
</div>
</div>
<div id="scrollWrapper">
</div>
CSS:
#container {
overflow-y: scroll !important;
overflow:hidden;
height: 520px;
width: 721px;
}
#scrollWrapper{
position:fixed;
margin-top: -39px;
width: 700px;
overflow: hidden;
overflow-x:auto !important;
}
.grid {
width: 700px;
overflow-x:hidden
position: relative;
border-radius: 5%;
}
.grid-background {
width: 1000px;
height: 1000px;
//background: linear-gradient(left, red, yellow);
/* TEST GRADIENT (HORIZONTAL) */
background: #d0e4f7;
background: -moz-linear-gradient(left, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
background: -webkit-linear-gradient(left, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: linear-gradient(to right, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 );
}
Hope I helped! :)