I applied a drop-shadow filter on my clip-path, while the shadow works well on white background, it does not work at all on a darker one (example below) -
It just looks like some weird lines instead of a blurred shadow, The shadow is a bit darker then the background, making the shadow completly black makes it work at the start of the shadow but to the end it has these lines once again.
The code:
body {
margin: 0;
overflow-x: hidden;
height: 2000px;
}
body .headerText {
position: absolute;
top: 50vh;
left: 40vw;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 8vh;
z-index: 10;
color: white;
mix-blend-mode: exclusion;
}
body .headerWrap {
position: fixed;
filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
-webkit-filter: drop-shadow(-30px -30px 60px #363636) drop-shadow(-30px -30px 90px #414141);
}
body .headerWrap header {
position: fixed;
width: 100vw;
height: 100vh;
background-color: #2e2e2e;
-webkit-clip-path: polygon(0% 0%, 40% 0%, 28% 100%, 0% 100%);
clip-path: polygon(0% 0%, 40% 0%, 28% 100%, 0% 100%);
-webkit-animation: rotate 1s 1;
animation: rotate 1s 1;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: calc(var(--scroll) * -3s);
animation-delay: calc(var(--scroll) * -3s);
}
#-webkit-keyframes rotate {
to {
-webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
}
}
#keyframes rotate {
to {
-webkit-clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
clip-path: polygon(0% 0%, 20% 0%, 14% 100%, 0% 100%);
}
}
body .landing {
width: 100vw;
height: 100vh;
background-color: white;
}
body .content {
width: 100vw;
height: 200vh;
background-color: #424242;
}
<html lang="en">
<head>
</head>
<body>
<div class="headerText"><h1>Hello bruddas</h1></div>
<div class="headerWrap">
<header></header>
</div>
<script>
window.addEventListener('scroll', () => {
document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);
</script>
<div class="landing"></div>
<div class="content"></div>
</body>
Answer
The shadow works fine on both colors.
You can barely (or not...) see it, but it's there.
The lines are in fact the shadow.
The problem here, is the low amount of colors rendered by the screen due to the low contrast between the darkest and lightest colors (for the dark one).
Screens have a limited amount of colors. It also depends on the screen type and settings, sometimes you can easily see it (and it's ugly), sometimes you can barely notice that behavior (you just see a smooth gradient).
Example
Here is an example:
Notice I used the same shadow for both sides.
You should be able to see the lines on darker tones (the top of the left side, and all the right side). Maybe you cannot see the lines at all, again, it depends on the output device and settings.
Related
This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
I have recently been learning about the magical properties of clip-path in CSS, but I ran into a problem when trying to create a custom image link. I have been unable to get the actual shape to be a clickable link.
When I try and place an <a> within the clipped div, the shape itself will not be clickable - even if I set it to the same dimensions as it's parent div. This is my reference site for the linkable clip-path ( https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/ ).
I am wondering if it's not able to be a link since it has an animation upon mouse hover? Here is my code snippet.
/* Styles the link */
#inner-link {
width: 200px;
height: 200px;
}
/* Styles the parent container */
#button-container {
width: 200px;
height: 200px;
margin: 10%;
background-color: #ed991c;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
}
#button-container:hover {
animation: arrow 0.5s forwards;
}
/* animation from triangle to arrow */
#keyframes arrow {
0% {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
background-color: #ed991c;
}
100% {
clip-path: polygon(30% 0%, 100% 50%, 30% 100%, 30% 75%, 0% 75%, 0% 25%, 30% 25%);
background-color: #edd11c;
}
}
<div id="button-container">
<a id="inner-link" href="https://www.target.com/"><a>
</div>
a tag is an inline element, and inline elements don't have heights or widths.
A quick fix would be to add display: block or display: inline-block to your #inner-link.
#inner-link {
width: 200px;
height: 200px;
display: block;
}
#inner-link {
width: 200px;
height: 200px;
display: block;
}
/* Styles the parent container */
#button-container {
width: 200px;
height: 200px;
margin: 10%;
background-color: #ed991c;
clip-path: polygon( 50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
}
#button-container:hover {
animation: arrow 0.5s forwards;
}
/* animation from triangle to arrow */
#keyframes arrow {
0% {
clip-path: polygon( 50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
background-color: #ed991c;
}
100% {
clip-path: polygon( 30% 0%, 100% 50%, 30% 100%, 30% 75%, 0% 75%, 0% 25%, 30% 25%);
background-color: #edd11c;
}
}
<div id="button-container">
<a id="inner-link" href="https://www.target.com/"></a>
</div>
I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
Following code produces sliding gradient animation without any line of javascript code:
html {
height: 100%
}
body {
height: 100%;
margin: 0
}
#keyframes loading {
from {
background-position: -5000% 0, 0 0
}
to {
background-position: 5000% 0, 0 0
}
}
.skeleton {
height: 100%;
animation-name: loading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
background-color: #fff;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(#e5e5e5 100%, transparent 0);
background-size: 99% 100%;
}
<div class="skeleton"></div>
I experimented with some properties and still do not understand how it works. Especially, when background-size: 99% 100%; is changed to background-size: 100% 100%; animation slides in opposite direction!
Could you explain it?
I don't know what's your browser and its version. But on my computer, if background-size: 100% 100% then the animation will be stop. (Actually, the background-position will be ignored)
The idea of this trick is moving background-image (linear-gradient) by background-position. (Check the comment in code below for detail)
About your second question, you should refer this answer CSS background-position ignored when using background-size. A quick summary, you can't use percent for background-position if background-size reaches to 100%. This happens because the image in background has no space to move.
If you insist to use background-size with 100%. I afraid you have to use absolute values.
BTW, I've upgraded the code. Now it looks better.
html {
height: 100%
}
body {
height: 100%;
margin: 0
}
#keyframes loading {/* original code */
from {/* This is the position of image of the first frame */
background-position: -5000% 0, 0 0
}
to {/* This is the pos of img of the last frame */
background-position: 5000% 0, 0 0
}
}
#keyframes betterLoading {
0% {/* This is the position of image of the first frame */
background-position: -5000% 0, 0 0
}
50% {
/* This is the pos of img of a frame in the middle happening animation */
/* If duration is 1s then the pos below will be at 0.5s */
background-position: 5000% 0, 0 0
}
100% {/* This is the pos of img of the last frame */
background-position: -5000% 0, 0 0
}
}
.skeleton {
height: 100%;
animation-name: betterLoading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
background-color: #fff;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(green 100%, transparent 0);
background-size: 99% 100%, cover;
}
<div class="skeleton"></div>
I want to use hover effects such as the ones in this tutorial, but to my dismay the effect does not work responsively. There are also problems at different zoom levels and in Firefox as you will see in these screenshots. (Here is a codepen that illustrates the problem).
100% Zoom in Chrome:
90% in Chrome:
And in Firefox the effect does not work at all.
On hover in Chrome (rotating dotted line):
On hover in Firefox (no dotted line):
How can I get the effect to work responsively? Both across browsers and at different zoom levels.
Here are some code snippets that illustrate the method:
<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">
<div class="icon-text">Product</div>
</div>
CSS:
.hi-icon-effect-4b .hi-icon:hover {
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.hi-icon-effect-4b .hi-icon:hover:after {
-webkit-animation: spinAround 9s linear infinite;
-moz-animation: spinAround 9s linear infinite;
animation: spinAround 9s linear infinite;
}
#-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spinAround {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}
Play with the codepen here. Thanks for your ideas!
Here is an attemp to solve it.
I avoid using borders, and handle everything with backgrounds: some for the stripes, another one to hide-reveal the effect, and another one to mask the inner circle.
Now it is responsive (the size of the border is the padding, that can be set as a percentage), and works ok in FF.
The backgrounds have different colors so that it is easy to see which is each one, and the rotation is delayed also to make it easier to see what is happening
But now it is failing in IE ....
Hopefully somebody can solve this
.hi-icon {
width: 100px;
height: 100px;
position: relative;
font-size: 50px;
padding: 50px;
border-radius: 50%;
}
.hi-icon:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding: 3%;
border-radius: 50%;
background-image: linear-gradient(lightgray, lightgray),
linear-gradient(transparent 30%, red 70%),
linear-gradient(45deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%),
linear-gradient(-45deg, green 0%, green 25%, transparent 25%, transparent 50%, green 50%, green 75%, transparent 75%, transparent 100%),
linear-gradient(225deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%),
linear-gradient(135deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%);
background-position: center center,bottom center,top left,bottom left,bottom right,top right;
background-size: 100% 100%,100% 1000%,50% 50%,50% 50%,50% 50%,50% 50%;
background-clip: content-box,border-box,border-box,border-box,border-box,border-box;
background-repeat:no-repeat;
transition: background-position 1s;
z-index: -1;
}
.hi-icon:hover:after {
background-position: center center,top center,top left,bottom left,bottom right,top right;
animation: rotate 3s linear infinite 1s;
}
#keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
<div class="hi-icon">TEST</div>
This is a firefox Bug. Check out some other options here. If you want the exact same hover effect.
I would like to animate the background of my div. The background position should move from left-top, to right-bottom. For some reason, nothing happens. And I have no idea why
.test {
width: 50%;
height: 250px;
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, green 0%, blue 100%);
background-size: 100% 100%;
animation: moving-gradient 1s infinite;
}
#keyframes moving-gradient {
0% {
background-position: left top;
}
100% {
background-position: right bottom;
}
}
JSFiddle:
http://jsfiddle.net/uLedmk5k/
You have to use fixed values for your background animation to work :
#keyframes moving-gradient {
0% {
background-position: 0,0;
}
100% {
background-position: 200px 250px, 200px 250px;
}
}
So you will have to set a fixed width to your element too :
.test {
width: 200px;
Fiddle
Edit from comments
if you set your width to viewport units it will work too :
.test {
width: 50vw;
height: 250px;
and in animation
100% {
background-position: 50vw 250px, 50vw 250px;
}
Fiddle
I'm not sure why but looking to computed tab in Firebug shows that viewport units are actually interpreted as fixed px values
Instead of moving the background image, have you tried moving the element?
translate is a very efficient and smooth (because of its anti-aliasing) way to move elements on screen, plus you can use percentages with ease.
An example Fiddle might help explain?
Although I may have completely misunderstood what you're trying to achieve.
A stupid way but works
http://jsfiddle.net/uLedmk5k/9/
Use 4 div and translate
HTML
<div class="test">
<div class="bg"></div><div class="bg"></div>
</div>
CSS
.test {
width: 50%;
height: 250px;
overflow: hidden;
}
.bg {
white-space: nowrap;
width: 100%;
height: 100%;
animation: moving-gradient 1s infinite;
-webkit-animation: moving-gradient 1s infinite;
}
.bg::after, .bg::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, green 0%, blue 100%);
background-size: 100% 100%;
}
#keyframes moving-gradient {
0% {
transform: translate(-100%, -100%);
}
100% {
transform: translate(0, 0);
}
}
#-webkit-keyframes moving-gradient {
0% {
transform: translate(-100%, -100%);
}
100% {
transform: translate(0, 0);
}
}