I've got this great website with a full screen gradient background. But it has this nasty line through it at the end of the cycle.. What am I doing wrong?
https://codepen.io/jonathansafa/pen/pWjvoO
.background{position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {
background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d);
background-size: 600% 100%;
animation: AwesomeBG 10s ease infinite;
overflow: hidden;
}
#keyframes AwesomeBG {
0% { background-position:0 0 }
5% { background-position:8% 0 }
13% { background-position:15% 0 }
19% { background-position:23% 0 }
25% { background-position:30% 0 }
31% { background-position:38% 0 }
38% { background-position:45% 0 }
44% { background-position:53% 0 }
50% { background-position:60% 0 }
56% { background-position:68% 0 }
63% { background-position:75% 0 }
69% { background-position:83% 0 }
75% { background-position:90% 0 }
81% { background-position:98% 0 }
88% { background-position:105% 0 }
94% { background-position:113% 0 }
100% { background-position:120% 0 }
}
It's because your gradient starts and ends with different colors (starts with #165730 and ends with #185a9d). If you want to get smooth transition without that line, you need to start and to finish your gradient with the same colors. Here is the working fiddle: https://jsfiddle.net/7dvovgr7/
And the snippet:
.background{position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {
background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d, #165730);
background-size: 600% 100%;
animation: AwesomeBG 10s ease infinite;
overflow: hidden;
}
#keyframes AwesomeBG {
0% { background-position:0 0 }
5% { background-position:8% 0 }
13% { background-position:15% 0 }
19% { background-position:23% 0 }
25% { background-position:30% 0 }
31% { background-position:38% 0 }
38% { background-position:45% 0 }
44% { background-position:53% 0 }
50% { background-position:60% 0 }
56% { background-position:68% 0 }
63% { background-position:75% 0 }
69% { background-position:83% 0 }
75% { background-position:90% 0 }
81% { background-position:98% 0 }
88% { background-position:105% 0 }
94% { background-position:113% 0 }
100% { background-position:120% 0 }
}
<body>
<div class="background awesomeBG"></div>
</body>
There is nothing wrong.
It seems you may have just found bug on codepen.
See for yourself.
.background{
display: flex;
position:absolute;top:0px;right:0px;bottom:0px;left:0px; z-index: -1;}
.awesomeBG {
background: linear-gradient(to left, #165730, #185a9d, #165730, #185a9d, #165730); /*make sure you start and end with the same color*/
background-size: 600% 100%;
animation: AwesomeBG 10s ease infinite;
overflow: hidden;
}
#keyframes AwesomeBG {
0% { background-position:0 0 }
5% { background-position:8% 0 }
13% { background-position:15% 0 }
19% { background-position:23% 0 }
25% { background-position:30% 0 }
31% { background-position:38% 0 }
38% { background-position:45% 0 }
44% { background-position:53% 0 }
50% { background-position:60% 0 }
56% { background-position:68% 0 }
63% { background-position:75% 0 }
69% { background-position:83% 0 }
75% { background-position:90% 0 }
81% { background-position:98% 0 }
88% { background-position:105% 0 }
94% { background-position:113% 0 }
100% { background-position:120% 0 }
}
<body>
<div class="background awesomeBG"></div>
</body>
Related
In trying to clone the flickr homepage I've become stuck trying to get the background images to transition just as they do on the flickr homepage.
I tried using keyframes instead of javascript and the transition-duration and animation-duration properties.
the following is a distillation of the problem in code.
html document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flickr_test</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
</body>
</html>
css document
body {
background-color: rgb(61, 61, 61);
background-image: url(./test_images/computers.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
animation: changePhoto 100s ease-in-out forwards infinite;
}
#keyframes changePhoto {
0% {
background-image: url(./test_images/engineer.jpg);
}
10% {
background-image: url(./test_images/lion.jpg);
}
20% {
background-image: url(./test_images/horse.jpg);
}
30% {
background-image: url(./test_images/mountains.jpg);
}
40% {
background-image: url(./test_images/forest.jpg);
}
50% {
background-image: url(./test_images/computers.jpg);
}
60% {
background-image: url(./test_images/northernLights.jpg);
}
70% {
background-image: url(./test_images/stars.jpg);
}
80% {
background-image: url(./test_images/fern.jpg);
}
90% {
background-image: url(./test_images/fish.jpg);
}
100% {
background-image: url(./test_images/meditation.jpg);
}
}
I suggest you to use js to make smother transitions by adding
body {
transition: all ease .4s
}
or
body {
transition: all ease 5s
}
that could works for what you want, so for experience I highly suggest you to use JS
You can do this with pure CSS - but the keyframes will change if the number of images changes so for a real situation you may want to use some JS to calculate the %s required in the keyframes
This simple snippet though just takes your layout of 10 images and says let's have the whole thing lasting for 50seconds - each image taking a percentage of their alloted 5 seconds to go from opacity 0 to opacity 1 and the same percentage to go from opacity 1 to opacity 0
We need an interlacing of the images coming and going and you can't do that on all common browsers with just one set of keyframes because some browsers don't try to animate the opacity of changing backgrounds (I found Chrome does but Firefox doesn't).
Therefore we put half the images into keyframes changing the background of the body's before pseudo element, and the other half onto the after pseudo element. And we offset the start (so it starts part way through) of one set so as to get the overlapping.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flickr_test</title>
<link rel="stylesheet" href="test.css">
<style>
#keyframes changePhoto1 {
0% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 0;
}
1%,
9% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 1;
}
10% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 0;
}
19% {
background-image: url(https://picsum.photos/id/12/400/300);
opacity: 0;
}
20%,
29% {
background-image: url(https://picsum.photos/id/12/400/300);
opacity: 1;
}
30% {
background-image: url(https://picsum.photos/id/12/400/300);
opacity: 0;
}
39% {
background-image: url(https://picsum.photos/id/14/400/300);
opacity: 0;
}
40%,
49% {
background-image: url(https://picsum.photos/id/14/400/300);
opacity: 1;
}
50% {
background-image: url(https://picsum.photos/id/14/400/300);
opacity: 0;
}
59% {
background-image: url(https://picsum.photos/id/16/400/300);
opacity: 0;
}
60%,
69% {
background-image: url(https://picsum.photos/id/16/400/300);
opacity: 1;
}
70% {
background-image: url(https://picsum.photos/id/16/400/300);
opacity: 0;
}
79% {
background-image: url(https://picsum.photos/id/18/400/300);
opacity: 0;
}
80%,
89% {
background-image: url(https://picsum.photos/id/18/400/300);
opacity: 1;
}
90% {
background-image: url(https://picsum.photos/id/18/400/300);
opacity: 0;
}
100% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 0;
}
}
#keyframes changePhoto2 {
0% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 0;
}
1%,
9% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 1;
}
10% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 0;
}
19% {
background-image: url(https://picsum.photos/id/13/400/300);
opacity: 0;
}
20%,
29% {
background-image: url(https://picsum.photos/id/13/400/300);
opacity: 1;
}
30% {
background-image: url(https://picsum.photos/id/13/400/300);
opacity: 0;
}
39% {
background-image: url(https://picsum.photos/id/15/400/300);
opacity: 0;
}
40%,
49% {
background-image: url(https://picsum.photos/id/15/400/300);
opacity: 1;
}
50% {
background-image: url(https://picsum.photos/id/15/400/300);
opacity: 0;
}
59% {
background-image: url(https://picsum.photos/id/17/400/300);
opacity: 0;
}
60%,
69% {
background-image: url(https://picsum.photos/id/17/400/300);
opacity: 1;
}
70% {
background-image: url(https://picsum.photos/id/17/400/300);
opacity: 0;
}
79% {
background-image: url(https://picsum.photos/id/19/400/300);
opacity: 0;
}
80%,
89% {
background-image: url(https://picsum.photos/id/19/400/300);
opacity: 1;
}
90% {
background-image: url(https://picsum.photos/id/19/400/300);
opacity: 0;
}
100% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 0;
}
}
body {
width: 100vw;
height: 100vh;
background-image: url(https://picsum.photos/id/11/400/300);
background-position: center;
background-size: cover;
margin: 0;
}
body::after,
body::before {
content: '';
width: 100%;
height: 100%;
background-color: rgb(61, 61, 61);
background-repeat: no-repeat;
rbackground-attachment: fixed;
background-position: center;
background-size: cover;
animation: changePhoto1 50s linear forwards infinite;
position: fixed;
margin: 0;
}
body::after {
animation: changePhoto2 50s linear forwards infinite;
animation-delay: -5s;
}
</style>
</head>
<body>
</body>
</html>
I'm having a bit of trouble trying to center my div class= content onto the middle right under the word freedom. Any help? I also have an image provided here https://gyazo.com/8a38955c74369034a014b20ed8e5d31d
HTML
<p id="einz" style="color: rgb(255, 255, 255);">
<!--marquee direction="right" speed="1" onmouseover="this.stop();" onmouseout="this.start();"-->
[ <a id="einz" href="bla bla bla" target="blank" rel=noopener>discord</a> /
<a id="einz" href="bla bla bla" target="blank" rel=noopener>steam</a> /
<a id="einz" href="bla bla bla" target="blank" rel=noopener>youtube</a> /
<a id="einz" href="bla bla bla" target="blank" rel=noopener>github</a> ]
CSS
```#einz
{
text-align: center;
font-weight: normal;
font-family: 'Courier', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,100), 1px 1px 1px rgba(0,0,0,100);
margin: 0 auto;
z-index: 1;
font-size: 12px;
}
Following your CodePen demo, you have to put the freedom text and links in a wrapper and then center the wrapper in order to keep the respectiveness to the text and links. Further on, since you wanted the links to the bottom-right of the freedom text, the links had to be put in a wrapper as well. Since you wanted the links on two different levels, I'd recommend using blocks to force a new line rather than <br>. You should also refrain from using the style attribute when the element has a class that you can alter. You should also not use similar id attributes more than once, you should refer to using classes instead.
/* temporary code to not blind the view */
body { background: pink }
#freedom-wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -220px;
}
#freedom-links-wrapper {
float: right;
}
.freedom-links {
color: rgb(255, 255, 255);
font-weight: normal;
font-size: 12px;
font-family: 'Courier', sans-serif;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,100),
1px 1px 1px rgba(0,0,0,100);
line-height: 18px;
z-index: 1;
}
.glitch {
color: white;
font-size: 100px;
z-index: 1;
}
/* old code */
#keyframes noise-anim {
0% {
clip-path: inset(87% 0 4% 0);
}
5% {
clip-path: inset(3% 0 43% 0);
}
10% {
clip-path: inset(82% 0 4% 0);
}
15% {
clip-path: inset(41% 0 2% 0);
}
20% {
clip-path: inset(96% 0 5% 0);
}
25% {
clip-path: inset(57% 0 35% 0);
}
30% {
clip-path: inset(78% 0 4% 0);
}
35% {
clip-path: inset(100% 0 1% 0);
}
40% {
clip-path: inset(99% 0 1% 0);
}
45% {
clip-path: inset(46% 0 49% 0);
}
50% {
clip-path: inset(16% 0 8% 0);
}
55% {
clip-path: inset(16% 0 72% 0);
}
60% {
clip-path: inset(19% 0 80% 0);
}
65% {
clip-path: inset(8% 0 9% 0);
}
70% {
clip-path: inset(88% 0 6% 0);
}
75% {
clip-path: inset(32% 0 30% 0);
}
80% {
clip-path: inset(46% 0 47% 0);
}
85% {
clip-path: inset(78% 0 21% 0);
}
90% {
clip-path: inset(60% 0 9% 0);
}
95% {
clip-path: inset(48% 0 49% 0);
}
100% {
clip-path: inset(23% 0 64% 0);
}
}
.glitch::after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
overflow: hidden;
animation: noise-anim 2s infinite linear alternate-reverse;
}
#keyframes noise-anim-2 {
0% {
clip-path: inset(19% 0 72% 0);
}
5% {
clip-path: inset(6% 0 35% 0);
}
10% {
clip-path: inset(32% 0 35% 0);
}
15% {
clip-path: inset(97% 0 3% 0);
}
20% {
clip-path: inset(19% 0 57% 0);
}
25% {
clip-path: inset(85% 0 16% 0);
}
30% {
clip-path: inset(46% 0 46% 0);
}
35% {
clip-path: inset(83% 0 15% 0);
}
40% {
clip-path: inset(66% 0 18% 0);
}
45% {
clip-path: inset(90% 0 8% 0);
}
50% {
clip-path: inset(58% 0 34% 0);
}
55% {
clip-path: inset(38% 0 61% 0);
}
60% {
clip-path: inset(93% 0 6% 0);
}
65% {
clip-path: inset(4% 0 83% 0);
}
70% {
clip-path: inset(57% 0 38% 0);
}
75% {
clip-path: inset(97% 0 4% 0);
}
80% {
clip-path: inset(9% 0 57% 0);
}
85% {
clip-path: inset(7% 0 82% 0);
}
90% {
clip-path: inset(14% 0 54% 0);
}
95% {
clip-path: inset(94% 0 6% 0);
}
100% {
clip-path: inset(9% 0 49% 0);
}
}
.glitch::before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: palevioletred;
overflow: hidden;
animation: noise-anim-2 15s infinite linear alternate-reverse;
}
<div id="freedom-wrapper">
<div class="glitch" data-text="freedom">freedom</div>
<div id="freedom-links-wrapper">
<div class="freedom-links">
[
discord
/
steam
/
youtube
/
github
]
</div>
<div class="freedom-links">
[ <a class="toggle">ᴄʟɪᴄᴋ ᴍᴇ</a> ]
</div>
</div>
</div>
target="blank" is also invalid and should be target="_blank". As another note, you can refer to using :after pseudo elements on <a> elements to add a slash when the element is not the last in its child (:not(:last-child):after).
As a final note, refer to not using plain-text "fonts" and use actual fonts instead. Talking about the click me text. You should also not trust your predefined pixel offsets for the freedom margin.
id is unique.
Don’t use id to control the style, use class instead, id is generally used to process data.
<p class="center">
[
title 1
title 2
]
</p>
.center { text-align: center; }
I wrote animation of changing background and it work every browser besides firefox. On FF background is changing but without animation effect. I tried out #-webkit-keyframes but it didn't helped.
Thats the code:
https://jsfiddle.net/tkw5pfm8/
background-image fade animation in FF is really disables. You will have to use separate divs with background-image for that
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100%;
position: absolute;
}
.background>div {
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
background-position: center;
}
.slide1 {
background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg);
animation: fade 8s infinite;
}
.slide2 {
background-image: url(https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-thumb.jpg);
animation: fade2 8s infinite;
}
.slide3 {
background-image: url(https://wallpaperplay.com/walls/full/c/5/3/34778.jpg);
animation: fade3 8s infinite;
}
#keyframes fade {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
<div class='background'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
Or better, use some simple JS slider, like Swiper
https://swiperjs.com/demos/#fade_effect
I have problem to get this border animation working on other browsers (IE).
http://babarogic.disclosed.site check for live preview or snippet down.
Did alot of search on this problem and none of it worked for me. Maybe i am making mistake somewhere.
Thank you
body {
background-color: black;
}
.border-main {
position: fixed;
right: 0%;
left: 0%;
top: 0%;
bottom: 0%;
width: 75%;
/* 90% of viewport vidth */
height: 60%;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 70vh;
max-width: 140vh;
/* 16/9 * 90 = 160 */
margin: auto;
overflow: hidden;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 9;
pointer-events: none;
-webkit-animation: clipMe 8s linear infinite;
animation: clipMe 8s linear infinite;
-webkit-border-image:
-webkit-gradient(linear, 0 100%, 0 0, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(bottom, white, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(bottom, white, rgba(0, 0, 0, 0)) 1 100%;
border-image:
-webkit-gradient(linear, left bottom, left top, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
border-image:
linear-gradient(to top, white, rgba(0, 0, 0, 0)) 1 100%;
}
#-webkit-keyframes clipMe {
0% { height: 0%; }
100% { height: 60%; }
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes clipMe {
0% { height: 0%; }
100% { height: 60%; }
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
<div class="border-main"></div>
It works on IE11 here if you put some order in the animation frames:
#keyframes clipMe {
0% { height: 0%; opacity: 0; }
50% { opacity: 1; }
100% { height: 60%; opacity: 0; }
}
Check the result here.
According to MDN, IE11 is doing the right thing: discard repeated keyframes taking only the latest.
If a keyframe is defined multiple times but not all affected
properties are in each keyframe, only the values specified in the
latest keyframe are considered.
JsFiddle
Code:
.iconsbg_container {
width: 100%;
-webkit-animation: iconsbg_container 10s linear infinite;
-moz-animation: iconsbg_container 10s linear infinite;
-ms-animation: iconsbg_container 10s linear infinite;
animation: iconsbg_container 10s linear infinite;
}
.EG_icons_a,
.EG_icons_b,
.EG_icons_c,
.iconsbg_container {
overflow: hidden;
}
.icons_container {
padding: 50px 0;
width: 50%;
max-width: 900px;
position: relative;
margin: 0 auto;
}
.EG_icons_a,
.EG_icons_b,
.EG_icons_c {
background-image: url('http://davidwillprice.com/wp-content/uploads/2018/03/Icons-sprite-sheet2.png');
background-size: auto 100%;
width: 100%;
}
.EG_icons_b,
.EG_icons_c {
height: 100%;
position: absolute;
}
.EG_icons_a {
position: relative;
margin: 0 auto;
padding-bottom: 75%;
}
.EG_icons_b {
-webkit-animation: EG_icons_b 10s linear infinite;
-moz-animation: EG_icons_b 10s linear infinite;
-ms-animation: EG_icons_b 10s linear infinite;
animation: EG_icons_b 10s linear infinite;
background-position: 50% 50%;
}
.EG_icons_c {
-webkit-animation: EG_icons_c 10s linear infinite;
-moz-animation: EG_icons_c 10s linear infinite;
-ms-animation: EG_icons_c 10s linear infinite;
animation: EG_icons_c 10s linear infinite;
background-position: 100% 100%;
}
/*20 13 20 13 20 13 */
/*20 33 53 66 86 100 */
#-webkit-keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
#-moz-keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
#-ms-keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
#keyframes EG_icons_b {
0%,
20% {
opacity: 0;
}
33%,
53% {
opacity: 1;
}
66%,
100% {
opacity: 0;
}
}
#-webkit-keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes EG_icons_c {
0%,
53% {
opacity: 0;
}
66%,
86% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
#-moz-keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
#-ms-keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
#keyframes iconsbg_container {
0%,
53% {
background-color: #ffffff;
}
66%,
86% {
background-color: #48616e;
}
100% {
background-color: #ffffff;
}
}
<div class="iconsbg_container">
<div class="icons_container">
<div class="EG_icons_a">
<div class="EG_icons_b"></div>
<div class="EG_icons_c"></div>
</div>
</div>
</div>
I've made a basic CSS slideshow, but I am getting a white pixel line on the right of the images when using Chrome at some resolutions.
I don't get the line at all on IE or Firefox.
Currently I am using Chrome 64.0.3282.186 on my desktop, but I am also seeing it on mobile.
I feel like I am missing some obvious; any help appreciated.
This white 1px line is a part of your background-image which is inserted second time, because there is some small mistake in browser about calculate background-image width. To avoid that you must add one line to your css. For .EG_icons_a, .EG_icons_b, .EG_icons_c add background-repeat: no-repeat; - it will help.