I appreciate that you include some design sensibilities in your videos. This shifting gradient background is a good fit for some bits of my current site rebuild. Much fun.
I love your videos! I am a 40-something year-old student who once did web design in the early years of the Browser Wars. I'm taking classes to get back into it now, and watching your videos helps me a ton. It's usually the little things, like reminding us that we should put a cursor: pointer; on a text link styled as a button that make me pause the video and go update my current project :) I also love your CSS Battles and I've started doing them for practice.
Ha! yeah, I remember back in that day I wrote a script that would take an element and a couple colors, wrap each letter in a span and with timers animate a gradient. It totally PEGGED the browser. This technique here is so easy and smooth and easy to implement :)
It occurred to me the day after I watched this video that this gradient trick can be used to create a loading placeholder. Gonna try it! Thanks for great content!
When I started to learn programming I started with JS, then decided on the web dev path. I though HTML and CSS were a bit boring, until I came to your videos....yesterday! It shows how prejudiced one can be towards something one doesn't know very well. Look forward to learning new stuff and styling my projects ! Tank you so much
Nice video once again! I have used gradients on buttons combined with a ::before or::after for a smooth transition between states. Did not know about background-clip. That is a cool trick. Keep up the good videos
I'm not a web developer but the first thing in mind for me was a kind of color wheel that would rotate forever 360 degrees. But a smart idea for just moving the picture left to right :)
The animated gradients are consuming a lot of CPU resources. I've read somewhere that we can force the GPU to take over these CSS animations by simply including "transform: translateZ(0);" to the element that is being animated. Have you tried this before on the css animated background gradients? Does this work?
maybe you could use the :active pseudo class to get that button animation to make sense on mobile? you could set :hover to have some more innocent effect, like transitioning to slightly bigger button size, or underlining the text or something, and then the animation is reserved for the :focus and :active states.
It's not working for me and I'm not sure why, but instead of a gradient background I had a image. But if I use -webkit-bacground-clip: it's working. I'm confused. Help please.
This is really amazing!! thanks a lot, I wanted to change my button in one of my projects whenever a user hovers but I didn't really know how this will help me a ton 😁 cheers
Hey Kevin, i was playing with that background gradient color and i wanted to ask a question: Do you think is it possible to do that while having an actual image on the background? When we change the background size to 400% for example i lose the feature of background size: cover to photo
Yeah, it's great, but I don't know why, on Mac (Safari, Chrome, Firefox), there is a very high CPU usage (over 100%) when using a full animated gradient background, that makes this technique a bit risky to use on a professional website. On my PC desktop, it's working completely fine.
Great video Kevin. I've found that the background-clip:text does not work on chrome, so I've used the @supports at rule to give browsers that don't support this feature yet another styling.
Can you put gradient background coloring on your favourite(s) data-grid components to give a bit of 3D effect? The point of my quesiton is to find out is the component was structured to allow that.
hey Kevin, can you do a sample where the background changes based on the time of the day? the idea is to change the background to have sunny colors when it is day and dark blue tones when at night. :)
I'm honestly not sure if any browsers still need the -webkit- prefix for linear-gradient. From what I see on caniuse.com, with the prefix support is less than 1% behind.
@@KevinPowell background-clip: text; non support by IE + Support partiel for many other browsers : developer.mozilla.org/fr/docs/Web/CSS/background-clip can iuse is good but MDN is a better source according me and official ! . Thanks for your Cool videos ! ;-)
Love your videos Kevin. You are the best CSS teacher out there. But I would love to know... Kev, were you drinking before this video? lol. I think you were. lol. Glad you are having fun. Thank you for all the great videos!
I have a serious issue pls help... The issue is that the background-clip:text; property is not working.... When I inspected and went on to check the styles other styles were applied (except those who inherited style from parent). But for the background-clip there was a warning symbol in front of it. What's the deal?
Kevin! Can you please do a video of how to color external svgs? I've scrapped the web and there's nothing. The only thing I've manage to do is to change SOME solid shapes but not all because they're super confusing and change on each save like an organic worm. So say you have a simple stick figure, a head, a torso, arms and legs. You want to be able to change the color to each of these elements separately (gradient would be ideal). Are you capable of it?
I appreciate that you include some design sensibilities in your videos. This shifting gradient background is a good fit for some bits of my current site rebuild. Much fun.
Glad that you like the designy stuff I do too, and glad that I could help with something that you can use on your site :D
“Design sensibilities.”
Extracted the word from my mouth👍
Background clip is reaaaaaally interesting, thanks a lot
Doesnt work for me :0
@@Pspisripoff You need to add the "-webkit-" prefix.
-webkit-background-clip: text;
@@nicogorr thank you - I was having the same problem!
@@nicogorr Thank you so much.
But he didn't use this in the video but his one worked....how?
I love your videos! I am a 40-something year-old student who once did web design in the early years of the Browser Wars. I'm taking classes to get back into it now, and watching your videos helps me a ton. It's usually the little things, like reminding us that we should put a cursor: pointer; on a text link styled as a button that make me pause the video and go update my current project :) I also love your CSS Battles and I've started doing them for practice.
Ha! yeah, I remember back in that day I wrote a script that would take an element and a couple colors, wrap each letter in a span and with timers animate a gradient. It totally PEGGED the browser. This technique here is so easy and smooth and easy to implement :)
This video is a whole package about gradients. Covered every usecases nicely.
I’m so glad I found your channel. Your CSS stuff is great.
As someone who has vary little knowledge in CSS, you helped me a lot creating a cool page! Thank you!
Recently I wanted to make a subtle light-reflection run over a button at :hover... :))) that’s it! Thanks!
Dude, I get super blazed and watch your videos and I learn so much while being entertained. This is some really good stuff, man.
Watching your videos is like sitting on couch and having comfort food, soooo satisfying! Thank you so much ! You are my life saver!
It occurred to me the day after I watched this video that this gradient trick can be used to create a loading placeholder. Gonna try it! Thanks for great content!
When I started to learn programming I started with JS, then decided on the web dev path. I though HTML and CSS were a bit boring, until I came to your videos....yesterday! It shows how prejudiced one can be towards something one doesn't know very well. Look forward to learning new stuff and styling my projects ! Tank you so much
So glad that I've shown you that HTML & CSS can be fun! You just made my day :D
You did an amazing video using a simple CSS property. This surely will give a lot of ideas to implement in building an eye-catching website.
One of best part to learn css in beginners
I'm subscribing just because of 9:27.
Clipping background image to the text, very cool.
dude you really are a fricking genius
That is unbelievably clever ! .... hats off
I love this CSS gradients, thank you!!
Your Scrimba courses are a god-send! Thank you for doing them.
Nice video once again! I have used gradients on buttons combined with a ::before or::after for a smooth transition between states. Did not know about background-clip. That is a cool trick. Keep up the good videos
@d3kra X why do you think that?
personally, I'm not a fan of instagram-style gradients, but it gave some other ideas...
I can click wherever on your channel and still learn something. Fun is good (actually great) too. Thank You.
That is a very cool way to do transition for bg-img 🙌🏼(bg-position)
"people are going to hate your website if you have too many fast transitions"
*Puts transitions cycling at 1 sec on txt, background, and borders 🤪
(*Φ皿Φ*)
Love the tutorial - so glad I jumped on your new course 👏🏻
I have used a repeating linear gradient to create a lined paper effect. It was neato-burrito.
NICE one its helping a lot
Thanks! 😃
Wow, cool work around on the transitions
this tutorial is amazing
I'm not a web developer but the first thing in mind for me was a kind of color wheel that would rotate forever 360 degrees. But a smart idea for just moving the picture left to right :)
It's like three tutorials in one, all very useful and interesting. Great job. Thank you.
Thanks man. This was very helpful.
Wow! So easy! Thanks!
you had me at 'Quacker'
Clearest you've done
Awesome video Kevin. Found some pretty cool ways to use this for a project I'm working on.
background-clip looks fun and interesting 🤔
Animated text over an animated background is awesome!
😅 - just looking at what's possible here :)
The animated gradients are consuming a lot of CPU resources. I've read somewhere that we can force the GPU to take over these CSS animations by simply including "transform: translateZ(0);" to the element that is being animated. Have you tried this before on the css animated background gradients? Does this work?
my mind blowed it out, thanks for this amazing ideal
I love your channel. Thank you for sharing this cool stuff that has lots of potential for new approaches to making websites.
That's amazing. Thanks
I'm 3 years late. But, this topic was extremely fun! Thanks a lot Kevin!
Very cool effects! And easy to accomplish.
maybe you could use the :active pseudo class to get that button animation to make sense on mobile?
you could set :hover to have some more innocent effect, like transitioning to slightly bigger button size, or underlining the text or something, and then the animation is reserved for the :focus and :active states.
It's not working for me and I'm not sure why, but instead of a gradient background I had a image. But if I use -webkit-bacground-clip: it's working. I'm confused. Help please.
This is really amazing!! thanks a lot, I wanted to change my button in one of my projects whenever a user hovers but I didn't really know how this will help me a ton 😁 cheers
Happy I could help 😁
This is amazing
i was hoping that i could learn to transition gradients but thats a heartbreak .nice video tho :DDD
AMAZING, you are awesome
Cool tricks, thx a lot!
thanks very nice tutorial!
you could also filter hue rotate animate
Why do you use background-image, instead of background-color, which can be affected by transition and transform properties?
Thanks !
Hey Kevin, i was playing with that background gradient color and i wanted to ask a question: Do you think is it possible to do that while having an actual image on the background? When we change the background size to 400% for example i lose the feature of background size: cover to photo
Very cool! Thanks!
Thank you!
Hi Kevin,
G'Day from West Australia.
Gread video. I like your style of presentation.
Way to go, Canada!
Thank you !
Yeah, it's great, but I don't know why, on Mac (Safari, Chrome, Firefox), there is a very high CPU usage (over 100%) when using a full animated gradient background, that makes this technique a bit risky to use on a professional website. On my PC desktop, it's working completely fine.
for text color the gradiant is applied but the animation is not being applied what to do (using chrome also tried for edge not working)
Any example for form inputs filled on focus border gradient with smoothly filled that input line with gredient color
Video starts at 0:50
Could you set the background image to repeat and just have the animation go in one direction infinitely instead of having it alternate it’s direction?
what do you think can i use this bg effect on bakery landing page?
cool, thanks
Can you make the white background transparent whilst still keeping the transparent txt with the gradient inside?
you could also put a selection on text with ::selection and make that a gradient
Great little trick! Love this!
I just got an idea in my mind... Are you able to go with text that shows background of body? not the white div thats inside
What a great teacher!
this amazing of amazing nice work thank you so mush
Great tut as usual,,, thanx kev
this is really nice
Great video Kevin. I've found that the background-clip:text does not work on chrome, so I've used the @supports at rule to give browsers that don't support this feature yet another styling.
Thank you! I was wondering why my text was not going transparent; I was using a chrome browser.
Can you put gradient background coloring on your favourite(s) data-grid components to give a bit of 3D effect? The point of my quesiton is to find out is the component was structured to allow that.
Thanks, teacher!
Watching this exactly after 2 years
what are you using for the title font in this video?
Love these!
hey Kevin,
can you do a sample where the background changes based on the time of the day?
the idea is to change the background to have sunny colors when it is day and dark blue tones when at night. :)
that is some good idea, probably you can do it with javascript. i think im gonna try it.
@@gabrieldai88 have you done it yet?
@@chonky_fox4067not yet
Cool ! but dont forget to prefix ! ;-) -webkit-gradient and -webkit-background-clip:
...and you Can put image in place of gradients and animate them for doing kind of Vidéo effect ( ultralight) it's cool too 😊
I'm honestly not sure if any browsers still need the -webkit- prefix for linear-gradient. From what I see on caniuse.com, with the prefix support is less than 1% behind.
@@KevinPowell background-clip: text; non support by IE + Support partiel for many other browsers :
developer.mozilla.org/fr/docs/Web/CSS/background-clip
can iuse is good but MDN is a better source according me and official ! .
Thanks for your Cool videos ! ;-)
I meant for linear-gradient, I know it's still useful for other things :)
Love your videos Kevin. You are the best CSS teacher out there. But I would love to know... Kev, were you drinking before this video? lol. I think you were. lol. Glad you are having fun. Thank you for all the great videos!
I have a serious issue pls help... The issue is that the background-clip:text; property is not working....
When I inspected and went on to check the styles other styles were applied (except those who inherited style from parent). But for the background-clip there was a warning symbol in front of it. What's the deal?
That is sooooo coooool!
Amazing!!
2021 and it seems like this is now the current trend.
No one is talking about the thumbnail of the video. Pretty funny my man itself being a part of linear gradient
Thank you so much nice video!
thank you give me inspirations👍👍👍, good videos
What if gradient have 180deg? How to add transition to this?
Really helpful video thanks man
It is not working on Chrome based browsers. Chrome does not supported background-clip: text
I love you because i love web design stuff's
That was really creative, Thanks.
backgorund-clip: text don't work now. I used -webkit-background-clip to solve it. Is it fine or there's another way?
Amazing content, thank you.
Kevin! Can you please do a video of how to color external svgs? I've scrapped the web and there's nothing. The only thing I've manage to do is to change SOME solid shapes but not all because they're super confusing and change on each save like an organic worm.
So say you have a simple stick figure, a head, a torso, arms and legs. You want to be able to change the color to each of these elements separately (gradient would be ideal).
Are you capable of it?
Of an external SVG, I don't believe so
doesn't work cross browser.
how is it 2021 and we still have to cater to browser differences?
You are always GREAT Kev. 👌
Keep doing these amazing videos. ✌