Started but here I have created this folder called gradient text and I just open it with vs code let's create the necessary files so let's create a new file called.
Index.html let's create another file called style.css and let's start with the index.html file now in vs code you can just type exclamation and press Tab and.
You'll have this basic HTML file code and here let's link our CSS file so let's tap link and press Tab and here in the SF let's tab style. CSS now here in the body I'll just create a simple.
S1 and uh let's give it a class and let's give a class of gradient text and here let's add some text I'll just have animated text now that's.
Let's open this in our browser and let's see how it looks so I have this extension called live server installed in vs code so once you have this installed you can just right click over.
Here in the HTML file and click on open with live server and here we can see that the content is displayed in the browser let's go ahead and start styling this so let's go to.
The styler CSS file and first of all let's bring this content to the center so I'll just have body and let's set the height to 100 vport height and let's set the margin to zero and let's set the.
Display to grid and place items to the center now we can see that the content is in the center let's also set the font family to Roboto and sensor and now let's style the gradient text so.
Let's type do gradient text and first of all let's set the font size to 70 pixels and uh let's St font weight of bold and I think it's already bold so we.
Posts Related:
- Utilize process mining in process advisor
- #Excel Dynamic Tables Fleet Management Transportation & Logistics #Dashboard Tutorial 2
- DAX for Power BI Part 4.5 - Quick Measures Office
Can just remove this right now we need
To add a background color and we need to set it to linear gradient and here we can add the colors that we want so first of all let's set.To 90° and let's add some colors over here I have selected some colors so I'll just add them over here first one is ff80 and then we have ff8 c0 0 then we.
Have 40 e0 d0 and then we have 8 A2 B E2 and then lastly we have ff80 so this is basically the list of our colors now if you go back here we can see that the colors are added to the.
Background and we need to add these colors to the text so for that we need to set the color of the text to transparent and now we need to set background clip and we need to set it to.
Text now we can see that the colors are added to the text now for other browsers you can also type webkit background clip and set it to text so with that we have added this gradient color to our text.
Now we need to animate it so let's create an animation and uh we'll just name the animation gradient animation and we'll play it for 6 seconds for the easing function I'll.
Just Ty ease and we need to play it for infinite amount of time so let's St infinite right now let's create this animation so let's tap at Key frames and let's give the name as.
Gradient animation and uh here let's add some key frames so first of all let's add 0% and the for 0% let's set the background position and let's set it to 0% and.
50% and uh then let's add 50% for the key frame now this is halfway through the animation so here let's tap background position and let's set it to 100% And 50% and then lastly let's go.
Ahead and type 100% which is the last
Frame and here I stab background position and let's set it to 0% 50% and now if you go back the animation is not playing because uh the size of the.Background is the same as this text so we don't have any space to move for this background position property to work so for that we need to set background size and uh let's set it to 500% and 500% and.
Now if you go back here we can see that the animation is working and everything is working all right so that's basically how you can create this gradient animator text using.
HTML and CSS all right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe.
To this channel to get the latest video updates thanks a lot for watching have a nice day [Music] w.
