Background clip is reaaaaaally interesting, thanks a lot
@Pspisripoff4 жыл бұрын
Doesnt work for me :0
@nicogorr84404 жыл бұрын
@@Pspisripoff You need to add the "-webkit-" prefix. -webkit-background-clip: text;
@SoberStones3 жыл бұрын
@@nicogorr8440 thank you - I was having the same problem!
@creativityexpeditions4582 Жыл бұрын
@@nicogorr8440 Thank you so much. But he didn't use this in the video but his one worked....how?
@joeldcanfield_spinhead5 жыл бұрын
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.
@KevinPowell5 жыл бұрын
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
@bomajoseph82402 жыл бұрын
“Design sensibilities.” Extracted the word from my mouth👍
@brentmakes2 жыл бұрын
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.
@bumbleguppy Жыл бұрын
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 :)
@brainztain4 жыл бұрын
"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 🤪
@MAGNETO-i1i3 жыл бұрын
(*Φ皿Φ*)
@aidenefaz9865Ай бұрын
This video is a whole package about gradients. Covered every usecases nicely.
@thegrantkennedy5 жыл бұрын
I’m so glad I found your channel. Your CSS stuff is great.
@georgeliss40155 жыл бұрын
personally, I'm not a fan of instagram-style gradients, but it gave some other ideas...
@Mophet5 жыл бұрын
Recently I wanted to make a subtle light-reflection run over a button at :hover... :))) that’s it! Thanks!
@odytimesthree4 жыл бұрын
Dude, I get super blazed and watch your videos and I learn so much while being entertained. This is some really good stuff, man.
@fonncatalina64644 жыл бұрын
Watching your videos is like sitting on couch and having comfort food, soooo satisfying! Thank you so much ! You are my life saver!
@ruteshimizu340310 ай бұрын
As someone who has vary little knowledge in CSS, you helped me a lot creating a cool page! Thank you!
@JM-jk9vz Жыл бұрын
I'm subscribing just because of 9:27.
@prontocreative23743 жыл бұрын
you had me at 'Quacker'
@Aerotk3 жыл бұрын
No one is talking about the thumbnail of the video. Pretty funny my man itself being a part of linear gradient
@afsanazamannipa77115 жыл бұрын
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.
@termited02 жыл бұрын
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!
@grahampcharles3 жыл бұрын
Animated text over an animated background is awesome!
@KevinPowell3 жыл бұрын
😅 - just looking at what's possible here :)
@scorepro50595 жыл бұрын
Clipping background image to the text, very cool.
@ione72603 жыл бұрын
NICE one its helping a lot
@KevinPowell3 жыл бұрын
Thanks! 😃
@rwmedia98473 жыл бұрын
I can click wherever on your channel and still learn something. Fun is good (actually great) too. Thank You.
@MartinLangenberg5 жыл бұрын
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
@MartinLangenberg5 жыл бұрын
@d3kra X why do you think that?
@dave60123 жыл бұрын
I have used a repeating linear gradient to create a lined paper effect. It was neato-burrito.
@iamtharunraj Жыл бұрын
I'm 3 years late. But, this topic was extremely fun! Thanks a lot Kevin!
@Fiveleafclover1803 жыл бұрын
Your Scrimba courses are a god-send! Thank you for doing them.
@blonduose4 жыл бұрын
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
@KevinPowell4 жыл бұрын
So glad that I've shown you that HTML & CSS can be fun! You just made my day :D
@aliturab53702 жыл бұрын
dude you really are a fricking genius
@VivekYadav-up7uu Жыл бұрын
this tutorial is amazing
@acid3282 Жыл бұрын
didn't understood a word but learnt hell lot of things...
@tahsinkabirkhan3 жыл бұрын
Watching this exactly after 2 years
@canapz63705 жыл бұрын
One of best part to learn css in beginners
@Nadia-wu9hk3 жыл бұрын
I love this CSS gradients, thank you!!
@anatolisimeonov12702 жыл бұрын
That is a very cool way to do transition for bg-img 🙌🏼(bg-position)
@Eternal_Otter3 жыл бұрын
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 :)
@LH-gb2lh4 ай бұрын
Wow! So easy! Thanks!
@nickbrown67543 жыл бұрын
background-clip looks fun and interesting 🤔
@welling13 жыл бұрын
2021 and it seems like this is now the current trend.
@AmandaLucaseu5 жыл бұрын
Love the tutorial - so glad I jumped on your new course 👏🏻
@prontocreative23743 жыл бұрын
That is unbelievably clever ! .... hats off
@zubairspov5 жыл бұрын
Wow, cool work around on the transitions
@ales_wth_6292 ай бұрын
AMAZING, you are awesome
@jaynews94953 жыл бұрын
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.
@sougataghar11795 жыл бұрын
i was hoping that i could learn to transition gradients but thats a heartbreak .nice video tho :DDD
@bobrobertsNotUrBob3 жыл бұрын
you could also filter hue rotate animate
@roninsvideos2 жыл бұрын
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!
@shvideo14 жыл бұрын
It's like three tutorials in one, all very useful and interesting. Great job. Thank you.
@alcejaylos.42573 жыл бұрын
Everyone: Twitter gradient Me: Gameboy
@timothyogrady25604 жыл бұрын
Awesome video Kevin. Found some pretty cool ways to use this for a project I'm working on.
@gbdaeye4 жыл бұрын
I love your channel. Thank you for sharing this cool stuff that has lots of potential for new approaches to making websites.
@henr20002 жыл бұрын
thanks very nice tutorial!
@BenRogersWPG3 жыл бұрын
This is amazing
@VasudeoJha23 күн бұрын
great fun
@deniskotov3 жыл бұрын
Cool tricks, thx a lot!
@rameenana Жыл бұрын
Thanks man. This was very helpful.
@jeffreyhuen3 жыл бұрын
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?
@gcecg3 жыл бұрын
Very cool effects! And easy to accomplish.
@rohil30235 жыл бұрын
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
@KevinPowell5 жыл бұрын
Happy I could help 😁
@donghuuhieu1374 жыл бұрын
my mind blowed it out, thanks for this amazing ideal
@burnblue5 жыл бұрын
Clearest you've done
@nadicadizdarevic28352 жыл бұрын
Thanks !
@samuelfischer37643 жыл бұрын
you could also put a selection on text with ::selection and make that a gradient
@zakariyaabaouali69043 жыл бұрын
this amazing of amazing nice work thank you so mush
@jeansienkin4 жыл бұрын
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.
@bhaviksuthar53057 ай бұрын
Any example for form inputs filled on focus border gradient with smoothly filled that input line with gredient color
@icekangg3 жыл бұрын
cool, thanks
@upsylondeveloppement88375 жыл бұрын
Cool ! but dont forget to prefix ! ;-) -webkit-gradient and -webkit-background-clip:
@upsylondeveloppement88375 жыл бұрын
...and you Can put image in place of gradients and animate them for doing kind of Vidéo effect ( ultralight) it's cool too 😊
@KevinPowell5 жыл бұрын
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.
@upsylondeveloppement88375 жыл бұрын
@@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 ! ;-)
@KevinPowell5 жыл бұрын
I meant for linear-gradient, I know it's still useful for other things :)
@zbey. Жыл бұрын
7:35 he turned in to Jerry (rick and morty) for a little
@prajwalpimpalte76845 ай бұрын
Amazing!!
@ShadiMuhammad5 жыл бұрын
You are always GREAT Kev. 👌 Keep doing these amazing videos. ✌
@AndyInTheUK2 жыл бұрын
That is sooooo coooool!
@DumbSkippy3 жыл бұрын
Hi Kevin, G'Day from West Australia. Gread video. I like your style of presentation. Way to go, Canada! Thank you !
@aktharfarvees993 жыл бұрын
this is use full to me thank u so much sir but one didn't work background-clip: text;
@iamtafara5 жыл бұрын
Great tut as usual,,, thanx kev
@tobskii10403 жыл бұрын
That's amazing. Thanks
@timjobs90725 жыл бұрын
thank you give me inspirations👍👍👍, good videos
@paristar30795 жыл бұрын
Video starts at 0:50
@SamuelChinzah172 жыл бұрын
Very Cool 👍
@Shrinehi15 жыл бұрын
Very cool! Thanks!
@LanFeusT235 жыл бұрын
Great little trick! Love this!
@BikeLifePinas4 жыл бұрын
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. :)
@gabrieldai882 жыл бұрын
that is some good idea, probably you can do it with javascript. i think im gonna try it.
@chonky_fox40672 жыл бұрын
@@gabrieldai88 have you done it yet?
@gabrieldai882 жыл бұрын
@@chonky_fox4067not yet
@martinvfarago4 жыл бұрын
Thank you!
@ahmedalhallag33383 жыл бұрын
What a great teacher!
@JacoblBroughton4 жыл бұрын
Really helpful video thanks man
5 жыл бұрын
this is really nice
@Isabela-pj3bz5 жыл бұрын
One more fan here. Thanks, great video.
@GSKHappyLearning4 ай бұрын
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)
@theTalkingYuccaTree2 жыл бұрын
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?
@atouchofa.d.d.58523 жыл бұрын
Love these!
@budosfasz2 жыл бұрын
It is not working on Chrome based browsers. Chrome does not supported background-clip: text
@lasersmartrus2 жыл бұрын
Amazing!)
@lucasferrero1234 жыл бұрын
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.
@Fiveleafclover1803 жыл бұрын
Thank you! I was wondering why my text was not going transparent; I was using a chrome browser.
@maxmuller98714 жыл бұрын
Thank you so much nice video!
@krishnaramnavaneethakrishn94262 жыл бұрын
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.
@WORDGASM4 жыл бұрын
Thanks, teacher!
@GiancarloCarccamo2 жыл бұрын
great video
@akashrajum33194 жыл бұрын
Amazing content, thank you.
@guillermodanielmazzarigiov17682 жыл бұрын
Honest question: why wouldn't this be best practice? I know it wouldn't go with like a lawyer website, but, for example, imagine a 60`s theme store, this would look awesome
@minecraftowiec8783 жыл бұрын
I ran into a funny issue, when I try to open my web page in google chrome bg-clip:text; doesn't work, but in firefox this issue doesn't appear. If someone has same issue as I had use -webkit-background-clip: text;