Is trying to find a way to create CSS rainbow stripe animation loop... something similar to this:
Currently only able to create an image of the rainbow stripe but now sure how to create an animation that is continuous just like in the gif with CSS.
background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
The image:
Thanks for reading.
You can try like below:
html {
min-height:100%;
background:
linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
0 0/100% 200%;
animation: a 2s linear infinite;
}
#keyframes a {
to {background-position:0 -200%}
}
Related
I'm currently trying to recreate the following background design:
I have tried many variations from using linear-gradient to conic-gradients. I wasn't able to make this using CSS only.
Is it possible to create this background using CSS only? If yes, could someone point me to the right direction?
I would like to avoid using a background image here
You could use CSS background as several radial-gradients:
* { margin: 0; box-sizing: border-box; }
body {
font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
min-height: 100vh;
background-image:
radial-gradient(circle at 20% 20%, hsla(100, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 40% 30%, hsla(150, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 60% 40%, hsla(250, 60%, 30%, 0.2) 0%, transparent 30%),
radial-gradient(circle at 80% 50%, hsla(340, 60%, 30%, 0.2) 0%, transparent 30%);
}
so I'm having a slight issue. I need some way to get my background color of RGB(151,151,151) to be set as a base for the preceding code. I'll copy it down below
body {
background-image: url(sd_back2.jpg);
background: -webkit-radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151,151,151,0.5) 50% );
background: -webkit-radial-gradient (circle closest-corner at 80% 40% , #ffffff 15%, rgba(0,0,0,0) 30% );
background: -webkit-radial-gradient ( closest-side at 10% 20% , #ffffff 20%, rgba(0,0,0,0) 45% );
background: -webkit-radial-gradient (farthest-side at 90% 10% , #ffffff 15%, rgba(0,0,0,0) 40% );
background-color
If you see any other issues please let me know thanks.
In order to achieve the effects you would need to group the background image and radial gradients together into a background
try this:
body {
background: url(sd_back2.jpg),
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
radial-gradient(closest-corner at 80% 40%, white 15%, rgba(0, 0, 0, 0) 30%),
radial-gradient(closest-side at 10% 20%, white 20%, rgba(0, 0, 0, 0) 45%),
radial-gradient(5% 5% at 90% 10%, white 15%, rgba(0, 0, 0, 0) 40%);
background-color: rgb(151,151,151);
}
this will combine all the effects instead of them overwriting each other.
What do you mean by"set as a base"? If you want your color to display if the gradient doesn't work, just do exactly as you have done...
body {
background-image: url(sd_back2.jpg);
background: -webkit-radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151,151,151,0.5) 50% );
background: -webkit-radial-gradient (circle closest-corner at 80% 40% , #ffffff 15%, rgba(0,0,0,0) 30% );
background: -webkit-radial-gradient ( closest-side at 10% 20% , #ffffff 20%, rgba(0,0,0,0) 45% );
background: -webkit-radial-gradient (farthest-side at 90% 10% , #ffffff 15%, rgba(0,0,0,0) 40% );
background-color: rgb(151,151,151);
}
Can someone explain the following radial gradient syntax and perhaps provide its equivalent in CSS3 standard format that works across modern browsers?
-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)
-webkit-radial-gradient(50% 50%,
200% 50%,
hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)
The radial-gradient provided above can be explained as follows:
The gradient is a radial gradient which means the colors change in circular/elliptical path along a defined radius.
The first parameter 50% 50% defines the position of the gradient image's center point. Here it is nothing but the center of the container element on which it is applied.
The second parameter 200% 50% defines the radius of the gradient in X-axis and Y-axis. Here the radius is 200% of the container's width in X-axis and 50% of the container's height in Y-axis.
The above setting along with the container's dimensions determine the shape of the gradient. If the container is 250px tall and 250px wide then the radius in X-axis would be 500px whereas the radius in Y-axis would be 125px and so the gradient would be elliptical. On the other hand if the container is 400px tall and 100px wide then the radius in X-axis would be 200px and the radius in Y-axis would also be 200px. So, the gradient's shape would be a circle.
The next set of parameters define the colors and where they should end/stop. The gradient would have hsla(0, 0%, 90%, 1) as color till 5%, from 5% to 30% the color would gradually move from hsla(0, 0%, 90%, 1) to hsla(0, 0%, 85%, 1) and then from 30% to 100% it would move from hsla(0, 0%, 85%, 1) to hsla(0, 0%, 60%, 1).
The equivalent standard syntax for this radial-gradient would be the following:
background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
The below snippet has the output of both of them for comparison.
div {
float: left;
height: 250px;
width: 250px;
border: 1px solid black;
margin-right: 4px;
}
.radial-grad {
background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}
.radial-grad-standard {
background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}
<div class='radial-grad'></div>
<div class='radial-grad-standard'></div>
I'm trying to achieve the following using CSS: (focus on the middle part of the photo)
My first attempt was something like:
<div style="background:blue;height:200px"></div>
<div style="background: linear-gradient(blue 50%, #ffffff 50%);>
<img...><img...><img...>
</div>
But then I have no way to create the colored line in the middle.
(Correct me if I'm wrong?)
I assume a better way would be to create a 50% height div, and then creating a floating div for the photos.
I use bootstrap which is not great for vertical align, so I tried using this FlexBox.
Any help would be very appreciated, thanks.
You can specify more than one background image (including gradients) for one element, e.g.
html, body {
height: 100%;
min-height: 350px;
margin: 0;
}
body {
background-color: #006;
background-image:
linear-gradient(to right, #f00, #ff0 25%, #0f0 50%, #0ff 75%, #00f),
linear-gradient(to top, #fff, #fff),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%),
radial-gradient(circle closest-side at center,
rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%,
rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,
rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%,
rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%,
rgba(255,255,255,.0) 100%);
background-size: 100% 4px, 100% 50%, 62.5% auto, 62.5% auto;
background-repeat: no-repeat;
background-position: 50% 50%, 50% 100%, 0 50%, 100% 50%;
}
I want my website background to have the top 55% be one color and the bottom 45% to be another color. Based on the tutorial here (I am using green, 80% and 20% to make the size difference easier to spot)
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background-color: green;
But it's a bit hard to follow and I am unable to get the functionality I want. Right now, it repeats the gradient all the way down the screen but I do not know why. Removing the second rgba() entries breaks it entirely and that was the only trail I thought to follow.
If you apply this background to the body, make sure to add this css :
html {height: 100%;}
Otherwise, the body won't take the entire page height.
See this Fiddle