CSS Gradients and repeating gradients
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- A quick look at CSS gradients. While the basics of them are really simple, a lot of people don't know about repeating gradients, which are really easy to use and which let you do some pretty cool stuff.
#fiveminutefriday
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
OMG ... finally i know how to use gradient in css !!! thank you man ...
Glad I could help!
Thank you so so much, I spent nearly an hour to understand how it works I was changing numbers until everything become clear for me, BTW your videos are giving the motivation :).
Regards,
Thank you master of CSS!!!. You made me a believer in thinking the impossible with using CSS gradients and it not being possible with making your background being set at an angle and having a line cutting off the different colors, but leave it to no surprise it is definitely possible thanks to this amazing content, so thank you so much for making this video Kevin your the BEST!!. :D
Thank you teacher. I am a Brazilian programmer and I follow you to learn more. very good your tips.
These 5 minutes videos are a lifesaver.
great video - right in spot. I like the idea of 5-minute video with nothing but pure content.
#fiveminutefriday thank you!!! You are a genius... lomg enough to cover simple subjects and a day to relax and see something new... wait for more next friday
I love this series!
Awesome video, thanks Kevin
This is so helpful, thank you Kevin!!
Cool narrative style, full of info. Great vid dude. 👌 ♥
Loving the way that format is one your screen mate! super easy to follow cheers.
This is brilliant. Thank you so much!
Thank you Kevin! Awesome!
Made it seem so easy
Thanks a lot
Holy crap that red and blue broke me haha. Keep it up Kevin, I like dropping by and seeing you do simple fun things like this.
Hurt me too, lol. I probably should've redone it with some softer colors. Next time!
Awesome!!! thanks a lot Kevin!!
a very detailed and simple explained video sir keep going!!!!!
nice job Kevin 👏
It worked, thank you.
i really like how you explain things and your videos are easy to understands
Thank you for the kind words, glad that you like my style :D
I just love u man. Finally I found something like this on YT.
Thanks for the kind words, and glad you're enjoying my content :)
Thank you so much for doing this great work you mean so much to me
Super easy, thanks!
Cool as always.. many thanks
DUDE! THANK YOU!!!
super-fast. essentials only. awesome job, sir! thank you!
9 dislikes are probably flat earthers which mistaken CSS for ISS...
Can't be a YT video without a few dislikes :)
Aww.... thank you man this really made my day🔥🤩🙌
I was actually really confused about the linear-gradient's values/parameters, but it's crystal clear now. Thanks a lot :)
No problem!
Yes me too i saw it tedious
this was very helpful
Thank you teacher🌸🌸
I love how fast this was.
Great Tutorial
Interesting stuff... I am following you and learning from all tutorials
Glad that you're enjoying my content Sanjay!
It's really really really interesting!!!
Thank you sir 😊
Amazing 5min toturial
Thank you, nice video!
amazing video...thank you sir 😄
This fiveminute thing you're doing is really fun and useful.
Expecting more....😀
Glad that you're enjoying them!
@@KevinPowell Well I used some of them in my competitions.
😁 So I love these short tricks that help me save a lot of time.
What a lesson! OMG!
Thanks Sir!
The king of CSS on TH-cam. Here is the 👑 crown from my side.
Thank you very much
Very interesting!!!! Thanks a lot!! :)
Thank you so much sir
Thank you so much
Thank you!
Thank you
I like it! This is easy. :D
Hey, thanks Nice vidéo !
Well done
Thank you sir
Awesome channel. I'm starting to really like front-end development
So glad to hear that, and glad that you're enjoying my channel!
very helpful video ; thanks ; dude;
Finally, a TH-camr who knows why youtube was made
Nice. Thanks. Coming from the post then learned 😅
Nice Tut
really helpful thx YYDS for code
thanks, great.
good work
thank you
Amazing!!
WoW....Thanks...!!
Used this gradient feature on the Instagram icon my web, it's white and black but when you hover over it it changes into a beautiful gradient colour like on instas icon
Thanks to you 👍👍
Smart way to use it. :)
Now the solid lines I did not know!
One of those little hidden gems that I love discovering in CSS
Thank you
Thanks
Thank you ! I'm a third year college student - and my major subject for this 2nd semester is Web designing, we haven't tackled this yet but I got so interested with the subject that I went on ahead and learn by myself 😂
edit: I took graphics design
got a portfolio?
i hate those which get randomly interested in a subject, stupid geeks
Cool video..
Like to learn more about gradients..!!
Got a few more videos on them planned for the coming weeks :)
Perfect
Awesome!!!
Thanks.
It is very interesing CSS :)
Ive seen a lot of css drawings where only one div is used. Radial gradients are also used a lot. Can you do a video explaining this process? Thanks a lot Joe.
So Thanks
thankyou
Amazing
Glad you enjoyeed it :)
very helpfull
Kev, css gradient borders when? ❤️
i got hypnotized
great tutorials sir. But still, I need an in-depth one.
Ur great .. just keeping doing :)
great sir g
Hi, mine looks weird. does this only work in a box like div? i want to make my whole webpage background in gradient. so i got
body {background: linear-gradient (45deg, pink, teal);}
I thought it would fill up the whole webpage, but it in lines, like gradient lines pattern. it's like the whole page is fill with gradient boxes. what did i miss?
THanks
omg same did you find out why?
You are a god
شكرا Thanks
which one better for html,css
Good tutorial, but not well explained when it comes to the values between parenthesis and their extension across the background. But I'm glad that I found out with a bit of practicing. Thank you a lot for posting this, though, you're always my first source.
What if you want to a custom multiple radial gradients that touch into each other like 5 different hex codes?
Hi Kevin! I'm shopping around for a nice looking spreadsheet. I would like the spreadsheet to look good because if reflects on my software application. I don't see REACT spreadsheets components use gradients coloring for row background. Gradients can give the rows an illusion of 3D, like each row how a half of round pipe. That's the sort of effect I'm looking for.
Is that possible?
How can I create a linear or radial gradient as a background and also change the opacity without affecting the text that should go in-front of it? I can use Opacity: value; within the css class, but that affects the text, and I just want to dim the gradient. Would I have to to use rgba with the a value set to something like .1 for every rgba value? Thanks. Also, nice quick tutorial.
can you please help giving a tool-tip over the linear gradient with 2 colors, red and blue like if we hover on red show a tooltip and similar way for blue as well. how can we achieve this? pl help
thankyou kevin ,
it will be very helpful if you make a video with gradients over background images and then some text over it . i really need to learn this please comment if you have time
Maybe this is what you are looking for? th-cam.com/video/-c94pr41jaI/w-d-xo.html
Great
can we use it as a background website?
Which browser are you using to run the code? Because the linear gradient is not working in crome, edge, firfox browser in my pc.
linear-gradients are supported in pretty much all browsers these days, check your syntax, there might be a problem causing them not to render.
how do I fix gradient banding in css
which editor did you use?
i mean online editor