I can produce moving gradient colors for text like so:
a {
&:hover {
background: linear-gradient(-45deg, green, yellow, red, blue);
background-size: 200% 200%;
animation: gradient 2s ease infinite;
color: transparent;
-webkit-background-clip: text;
}
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Now I have a moving gradient color effect (whose movement unfortunately can't be seen in a screenshot):
Font-Awesome icon color can be changed with the color property, which affects text but -webkit-background-clip: text seems to have no effect on icons.
Example of an icon:
<fa class="icon" :icon="[ 'fa', 'envelope' ]" size="1x"></fa>
Is there any way to do this?
.icn{
font-size: 100px;
}
.color-icon:hover {
background: linear-gradient(-45deg, green, yellow, red, blue);
background-size: 200% 200%;
animation: gradient 2s ease infinite;
color: transparent;
-webkit-background-clip: text;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<i class="fas fa-envelope icn color-icon"></i>
Related
trying to change background gradient smoothly from gold-orange - to orange-gold and vice versa
problem - colors are changed suddenly, jumping from one to another
pls help
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange);
animation: back infinite;
animation-duration: 7s;
}
#keyframes back {
0% {
background: linear-gradient(to right, gold, orange);
}
50% {
background: linear-gradient(to left, gold, orange);
}
100% {
background: linear-gradient(to right, gold, orange);
}
}
<div class='box'></div>
You can increase background-size and use background-position for the animation
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange, gold);
animation: back ease infinite;
animation-duration: 7s;
background-size: 200% 200%;
}
#keyframes back {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
<div class='box'></div>
I have some text that I want to animate. The text should change color from white to green from top to bottom. I want the new color to basically drop from the top.
body{
background-color: lightblue;
}
#test {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 5s;
font-size: 40px;
color:white;
}
#keyframes changeColor {
0% {
color: linear-gradient(to bottom, white, #2E7D32 50%) bottom;
}
100% {
color: green;
}
}
<div id="test">The</div>
An Example
Source for the below snippet. The following animation occurs on hover, however this is just an example to demonstrate what I wish to achieve. Some changes I require are that the font colour should change from top to bottom and it should use keyframes(animation).
#import url("https://fonts.googleapis.com/css?family=Barlow:800&display=swap");
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Barlow", sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 275ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
Link Hover
background + background-clip might be what you look for:
because of a demo (below) it could not be just a comment :) .
reset the gradient to your needs if you need a sharp color transition
body{
background:lightblue;
}
#test {
animation: changeColor infinite linear 5s forwards;
font-size: 40px;
color:transparent;
background:linear-gradient(to bottom, #2E7D32 , white, #2E7D32 ) bottom left/ 100% 600% ;
background-clip:text;
}
#keyframes changeColor {
to { background-position: top left;
}
}
<div id="test">The</div>
I figured out how to accomplish, so I'm answering my own question.
let titleIDThe = document.getElementById("titleIDThe");
titleIDThe.classList.add("animateColor");
.animateColor {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 10s;
background-image: linear-gradient(to bottom, red 50%, #2E7D32 50%);
background-position: 0% 0%;
background-size: 100% 200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
width: 50vw;
height: 50vh;
font-size: 30px;
}
#keyframes changeColor {
0% {
background-position: 0% 0%;
}
20% {
background-position: 0% -100%;
}
30% {
background-position: 0% -100%;
}
50% {
background-position: 0% 0%;
}
100% {
background-position: 0% 0%;
}
}
<span id="titleIDThe">The</span>
I want to create a square white box with png image in it. I want png to follow background while the colour of box doesn't affect it.
Here is the sample of the output that I want:
As for now, the white background color couldn't work after I added background colour on div for image. I want the transparent space of png follow body background color.
jsfiddle
I've attached snippet too. Can someone help me to look into it? Thanks in advance!
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
background-color:white;
}
.title {
margin-top: auto;
width: auto;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
-webkit-text-fill-color: transparent;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
You need to consider mask here:
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
min-height:100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
}
.title {
margin-top: auto;
-webkit-mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
background: #fff;
}
.title img {
visibility:hidden;
}
<div class="wrapper">
<div class="title">
<img src="https://i.ibb.co/Zcvccd9/print-v1.png" >
</div>
</div>
Here is the solution:
Step 1: Set position: absolute
Step 2: Set the width of the .title
Step 3: add a transparent color in between other colors in the linear background.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
background-color:white;
}
.title {
margin-top: auto;
position: absolute;
width: 97vw;
border: 1px solid black;
background: linear-gradient(-45deg, #ee7752, #ffffff, #3456ab00, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
I have created a div which has a gradient background, and I want to change this gradient. I applied a keyframes animation which changed background color instantly. How can I make this change smooth?
div {
width: 100px;
height: 100px;
background:linear-gradient(red, yellow);
animation-name: colorchange;
animation-duration: 5s;
-webkit-animation-name: colorchange;
animation-iteration-count: 5;
-webkit-animation-duration: 5s;
text-align: center;
}
#keyframes colorchange {
0% {background:linear-gradient(red, yellow) }
35% {background:linear-gradient(yellow, green) }
70% {background:linear-gradient(green, red) }
100%{background:linear-gradient(red, yellow)}
}
<div>
Gradient Background
</div>
Try this
div {
text-align: center;
width: 100px;
height: 90px;
color: #fff;
background: linear-gradient(0deg, red, yellow, green);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
<div> Text </div>
I might be wrong, but gradients don't support transitions.
There's a workaround I found in other related question:
https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
As far as I'm concerned, the smooth transition doesn't work with gradient backgrounds, only with straight colors.
You can create a large gradient background with many colors though, and use the transition to move it. This creates the illusion of the colors changing.
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<h1>Hello World!</h1>
I am looking for a way to overwrite the background color from the top to bottom. More specifically, I would like it to be filled from top to bottom. Currently I have managed to produce a "faded" animation.
This is what I have now:
.page-dark {
background: #003850;
background-color: #003850;
color: white;
-o-animation: fadeIt 3s linear;
animation: fadeIt 3s linear;
}
#-o-keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
#keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
You can create a background with two colors using linear-gradient(). Set the background height to 200% using background-size, and hide one of the colors using background-position. Now animate the background position to show the other color:
.page-dark {
height: 90vh;
background: linear-gradient(to bottom, #003850 50%, #ff711b 50%);
background-size: 100% 200%;
background-position: 0 100%;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-position: 0 0 }
}
<div class="page-dark"></div>
Another option is to set the color you want to hide as the background, animation background-position to show the 2nd background (which we create using linear-gradient()):
.page-dark {
height: 90vh;
background: #ff711b linear-gradient(to bottom, #003850 0, #003850 100%) no-repeat;
background-size: 100% 0;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-size: 100% 100%; }
}
<div class="page-dark"></div>