Background clip is reaaaaaally interesting, thanks a lot
@Pspisripoff
4 жыл бұрын
Doesnt work for me :0
@nicogorr8440
4 жыл бұрын
@@Pspisripoff You need to add the "-webkit-" prefix. -webkit-background-clip: text;
@SoberStones
3 жыл бұрын
@@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_spinhead
5 жыл бұрын
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.
@KevinPowell
5 жыл бұрын
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
@bomajoseph8240
2 жыл бұрын
“Design sensibilities.” Extracted the word from my mouth👍
@brentmakes
2 жыл бұрын
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 :)
@aidenefaz9865
2 ай бұрын
This video is a whole package about gradients. Covered every usecases nicely.
@thegrantkennedy
5 жыл бұрын
I’m so glad I found your channel. Your CSS stuff is great.
@brainztain
4 жыл бұрын
"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-i1i
3 жыл бұрын
(*Φ皿Φ*)
@Mophet
5 жыл бұрын
Recently I wanted to make a subtle light-reflection run over a button at :hover... :))) that’s it! Thanks!
@georgeliss4015
5 жыл бұрын
personally, I'm not a fan of instagram-style gradients, but it gave some other ideas...
@ruteshimizu3403
10 ай бұрын
As someone who has vary little knowledge in CSS, you helped me a lot creating a cool page! Thank you!
@fonncatalina6464
4 жыл бұрын
Watching your videos is like sitting on couch and having comfort food, soooo satisfying! Thank you so much ! You are my life saver!
@termited0
2 жыл бұрын
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!
@odytimesthree
4 жыл бұрын
Dude, I get super blazed and watch your videos and I learn so much while being entertained. This is some really good stuff, man.
@Eternal_Otter
3 жыл бұрын
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 :)
@blonduose
4 жыл бұрын
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
@KevinPowell
4 жыл бұрын
So glad that I've shown you that HTML & CSS can be fun! You just made my day :D
@Aerotk
3 жыл бұрын
No one is talking about the thumbnail of the video. Pretty funny my man itself being a part of linear gradient
@afsanazamannipa7711
5 жыл бұрын
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.
@MartinLangenberg
5 жыл бұрын
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
@MartinLangenberg
5 жыл бұрын
@d3kra X why do you think that?
@scorepro5059
5 жыл бұрын
Clipping background image to the text, very cool.
@canapz6370
5 жыл бұрын
One of best part to learn css in beginners
@rwmedia9847
3 жыл бұрын
I can click wherever on your channel and still learn something. Fun is good (actually great) too. Thank You.
@iamtharunraj
Жыл бұрын
I'm 3 years late. But, this topic was extremely fun! Thanks a lot Kevin!
@Fiveleafclover180
3 жыл бұрын
Your Scrimba courses are a god-send! Thank you for doing them.
@aliturab5370
3 жыл бұрын
dude you really are a fricking genius
@jaynews9495
3 жыл бұрын
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.
@dave6012
3 жыл бұрын
I have used a repeating linear gradient to create a lined paper effect. It was neato-burrito.
@sougataghar1179
5 жыл бұрын
i was hoping that i could learn to transition gradients but thats a heartbreak .nice video tho :DDD
@JM-jk9vz
2 жыл бұрын
I'm subscribing just because of 9:27.
@grahampcharles
3 жыл бұрын
Animated text over an animated background is awesome!
@KevinPowell
3 жыл бұрын
😅 - just looking at what's possible here :)
@shvideo1
4 жыл бұрын
It's like three tutorials in one, all very useful and interesting. Great job. Thank you.
@prontocreative2374
3 жыл бұрын
you had me at 'Quacker'
@anatolisimeonov1270
2 жыл бұрын
That is a very cool way to do transition for bg-img 🙌🏼(bg-position)
@Nadia-wu9hk
3 жыл бұрын
I love this CSS gradients, thank you!!
@roninsvideos
2 жыл бұрын
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!
@AmandaLucaseu
5 жыл бұрын
Love the tutorial - so glad I jumped on your new course 👏🏻
@ione7260
3 жыл бұрын
NICE one its helping a lot
@KevinPowell
3 жыл бұрын
Thanks! 😃
@prontocreative2374
3 жыл бұрын
That is unbelievably clever ! .... hats off
@VivekYadav-up7uu
Жыл бұрын
this tutorial is amazing
@nickbrown6754
3 жыл бұрын
background-clip looks fun and interesting 🤔
@timothyogrady2560
4 жыл бұрын
Awesome video Kevin. Found some pretty cool ways to use this for a project I'm working on.
@rohil3023
5 жыл бұрын
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
@KevinPowell
5 жыл бұрын
Happy I could help 😁
@zubairspov
5 жыл бұрын
Wow, cool work around on the transitions
@gbdaeye
4 жыл бұрын
I love your channel. Thank you for sharing this cool stuff that has lots of potential for new approaches to making websites.
@LH-gb2lh
4 ай бұрын
Wow! So easy! Thanks!
@donghuuhieu137
4 жыл бұрын
my mind blowed it out, thanks for this amazing ideal
@brs13-59
8 ай бұрын
Any example for form inputs filled on focus border gradient with smoothly filled that input line with gredient color
@jeffreyhuen
3 жыл бұрын
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?
@burnblue
5 жыл бұрын
Clearest you've done
@bobrobertsNotUrBob
3 жыл бұрын
you could also filter hue rotate animate
@welling1
3 жыл бұрын
2021 and it seems like this is now the current trend.
@samuelfischer3764
3 жыл бұрын
you could also put a selection on text with ::selection and make that a gradient
@jeansienkin
4 жыл бұрын
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.
@acid3282
Жыл бұрын
didn't understood a word but learnt hell lot of things...
@upsylondeveloppement8837
5 жыл бұрын
Cool ! but dont forget to prefix ! ;-) -webkit-gradient and -webkit-background-clip:
@upsylondeveloppement8837
5 жыл бұрын
...and you Can put image in place of gradients and animate them for doing kind of Vidéo effect ( ultralight) it's cool too 😊
@KevinPowell
5 жыл бұрын
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.
@upsylondeveloppement8837
5 жыл бұрын
@@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 ! ;-)
@KevinPowell
5 жыл бұрын
I meant for linear-gradient, I know it's still useful for other things :)
@tahsinkabirkhan
3 жыл бұрын
Watching this exactly after 2 years
@aktharfarvees99
3 жыл бұрын
this is use full to me thank u so much sir but one didn't work background-clip: text;
@ales_wth_629
3 ай бұрын
AMAZING, you are awesome
@BikeLifePinas
4 жыл бұрын
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. :)
@gabrieldai88
2 жыл бұрын
that is some good idea, probably you can do it with javascript. i think im gonna try it.
@chonky_fox4067
2 жыл бұрын
@@gabrieldai88 have you done it yet?
@gabrieldai88
2 жыл бұрын
@@chonky_fox4067not yet
@gcecg
3 жыл бұрын
Very cool effects! And easy to accomplish.
@rameenana
Жыл бұрын
Thanks man. This was very helpful.
@BenRogersWPG
3 жыл бұрын
This is amazing
@DumbSkippy
3 жыл бұрын
Hi Kevin, G'Day from West Australia. Gread video. I like your style of presentation. Way to go, Canada! Thank you !
@GSKHappyLearning
4 ай бұрын
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)
@icekangg
3 жыл бұрын
cool, thanks
@ShadiMuhammad
5 жыл бұрын
You are always GREAT Kev. 👌 Keep doing these amazing videos. ✌
@krishnaramnavaneethakrishn9426
2 жыл бұрын
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.
@henr2000
2 жыл бұрын
thanks very nice tutorial!
@nadicadizdarevic2835
2 жыл бұрын
Thanks !
@zakariyaabaouali6904
3 жыл бұрын
this amazing of amazing nice work thank you so mush
@alcejaylos.4257
3 жыл бұрын
Everyone: Twitter gradient Me: Gameboy
@deniskotov
3 жыл бұрын
Cool tricks, thx a lot!
@lucasferrero123
4 жыл бұрын
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.
@Fiveleafclover180
3 жыл бұрын
Thank you! I was wondering why my text was not going transparent; I was using a chrome browser.
@theTalkingYuccaTree
2 жыл бұрын
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?
@minecraftowiec878
3 жыл бұрын
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;
@iamtafara
5 жыл бұрын
Great tut as usual,,, thanx kev
@tobskii1040
3 жыл бұрын
That's amazing. Thanks
@AshishKumar-rq8gb
3 жыл бұрын
backgorund-clip: text don't work now. I used -webkit-background-clip to solve it. Is it fine or there's another way?
@timjobs9072
5 жыл бұрын
thank you give me inspirations👍👍👍, good videos
@AndyInTheUK
2 жыл бұрын
That is sooooo coooool!
@ahmedalhallag3338
3 жыл бұрын
What a great teacher!
@saaika5922
Жыл бұрын
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
@LanFeusT23
5 жыл бұрын
Great little trick! Love this!
@elderdiascunha1992
2 жыл бұрын
Why do you use background-image, instead of background-color, which can be affected by transition and transform properties?
@budosfasz
2 жыл бұрын
It is not working on Chrome based browsers. Chrome does not supported background-clip: text
@WORDGASM
4 жыл бұрын
Thanks, teacher!
@Isabela-pj3bz
5 жыл бұрын
One more fan here. Thanks, great video.
@guillermodanielmazzarigiov1768
2 жыл бұрын
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
@erdemm35tr
3 жыл бұрын
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
@Shrinehi1
5 жыл бұрын
Very cool! Thanks!
@martinvfarago
4 жыл бұрын
Thank you!
@cptechno
3 жыл бұрын
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.
@sudaknot
Жыл бұрын
Can you make the white background transparent whilst still keeping the transparent txt with the gradient inside?
@zbey.
Жыл бұрын
7:35 he turned in to Jerry (rick and morty) for a little
@estonian44
2 жыл бұрын
what do you think can i use this bg effect on bakery landing page?
5 жыл бұрын
this is really nice
@prajwalpimpalte7684
5 ай бұрын
Amazing!!
@JacoblBroughton
4 жыл бұрын
Really helpful video thanks man
@SamuelChinzah17
2 жыл бұрын
Very Cool 👍
@zaye_d
5 жыл бұрын
I love you because i love web design stuff's
@paristar3079
5 жыл бұрын
Video starts at 0:50
@NullStaticVoid
3 жыл бұрын
doesn't work cross browser. how is it 2021 and we still have to cater to browser differences?
Пікірлер: 209