Create amazing patterns using CSS gradients
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- While CSS gradients are great at creating gradients-as their name would imply-they can also be used to make incredibly complex background patterns as well!
🔗 Links
✅ The code from this video: codepen.io/kevinpowell/pen/Rw...
✅ Complex patterns using CSS gradients: blog.logrocket.com/complex-pa...
✅ Background Patterns, Simplified by Conic Gradients: css-tricks.com/background-pat...
✅ How to create background pattern using CSS & conic-gradient: verpex.com/blog/website-tips/...
✅ CSS3 Patterns Gallery: projects.verou.me/css3patterns/
✅ CSS Patterns: css-pattern.com/
⌚ Timestamps
00:00 - Plaid pattern
00:33 - Introduction
01:18 - Creating a zig-zag pattern
06:48 - Plus pattern
13:00 - Wavvy pattern
19:54 - Interlocking triangles
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![[LIVE] : ONE ลุมพินี 69 | คู่เอก "กุหลาบดำ vs นาบิล"](http://i.ytimg.com/vi/PNM6U8e_HMo/mqdefault.jpg)
On that first one, I'm not setting a different size for both, I'm just setting adding a second value, which works on the vertical axis, so it's 4rem width and 4rem height for both gradients, which gives us that pattern :)
Do you have a video about backdrop filters? i find them very useful but they are kinda clunky
@Kevin Powell i need your help in solving a small problem i have, like i have a vertical navbar and an indicator positioned absolutely to the list in the navbar and what i want was whenever i click a link in the nav list the indicator has to move to that nav item, i have tried transform translate but the problem was with responsiveness of that navbar when the screen size changes the indicator is going off from its position
@@propavangameryt405 Have you tried using ::before or ::after and having position:relative; on the item?
Relative position nav item
Absolute position ::before element
I think this should keep the indicator inside the nav item space.
Please do the animated ones - this was great!
Epileptic people will love it haha, joke aside, for subtle effects it could be great
You can play with the background position to animate linear-gradients and radial-gradients
Careful as it doesn't work with repeating-linear-gradients
Using `circle` to mask a background is brilliant.
You're an amazing teacher and excellent pacing that is highly respectful of the viewer's time. Thank you so much, *subscribed.*
I didn't expect that watching this 25 minute video would have led me to spend several hours experimenting with CSS backgrounds, including animated ones. It also led me to revisit a few CSS Battle challenges, which I rewrote using this technique (#31, #55, #60, and #140). Such a great video!
that's very interesting, using the css gradients sometimes saves a lot of work, huge thanks for Kevin 💜✨
great explanation! I played around with Anna Tudor’s patterns the other day :)) it’s like the crochet of CSS 🥰 looking forward to more videos about this !
Kevin!!!!! Soooo much fun! You make me fall in love with CSS. Thank you.
@kevin man, what a great video. I've messed around with patterns and figuring this stuff out by plug and play, but you explained it so well.
I was searching for this exact thing. Thanks a lot Kevin
This channel helps alot.. I love your work Mr Kevin 😍
Thank you so much for this video. I really wanted to learn this and was thinking about the same since a week ❤🎉
Thanks Kevin. Awesome video, as usual 😎
Very Cool. This is extremely interesting to dive into. I'd love to see if anybody in the comments have anything cool they've done similar to this that's cool to watch too.
Love your stuff. Excellent man
So cool! Thanks for this video, you always come up with cool stuff
Would love to see how you would animate some of these awesome gradients.
Awesome, love this!
Hi Kevin. Loved this video! Can you please also create a video for animating these patterns?
😬😬😬
Thank you Kevin!!! CSS 💘
My list of enthusiastic english words is over. I can't come up with new epithets how to describe everything I learns from your videos. Thanks a lot!
I would love to see some cool animations with those patterns changing!
Still watching the video. Always cool stuffs ❤
I didn't know you can do this with gradients😲
Great job for the intro!
4:15 BLEW MY MIND
Nice research
i really enjoy u teaching us css making it fun and enjoyable we'd appreciate it if u consider to help us with JavaScript as well html and css was easy but js is so challenging for a beginner like me i feel so overwhelmed by it
That was so helpful. Thank you man, can you make a video about animated patterns pls
Top!!!!! Thank you!
Cool vid. It would be also cool if you could create a victorian wall paper effect perhaps maybe using svg icons.
So cool!! 😮
Didn't understand any of it but was fun to watch
These videos do make me hate css less and less, it's definitely working hehe 😊
King video.
So cool!
I recently used this on a police website that needed a skewed checker pattern. all done via css with an '::before', gradient backgound and tranform skew.
Yes, I did. I've used the same kind of thing to create a dot grid as a background element for a hollywood action movie style UI. ^_^
Never seen the circle feature though, that was a nice tip.
I Love your videos 💚💚
I'm going to buy a hoodie from you this month. ❤
Animated those patterns please! I saw the waves and started animating it to give some psychedelic properties... You have to try it! amazing video
much easier to do it photoshop. or illustrator for even better. and illustrator can save it as css or svg depend how what we need. but see this video really bring us new insight or idea how to design better
Thank you for video .please can you make video on making block having hexagon diagram using css
which one is better between svg and doing it wiwth gradients? like if the same thing can be done with both, which one would be the best in term of file size or performance?
Thank you for video. Amazing patterns.
Essentially I liked zigzag one.
@KevinPowell maybe you can try to make waves with such pattern and border-radius option?
You could use the gradient as an image-mask actually! That would give the element that shape
Holy Shit! Insane what can be done with this :D
12:41 The Edward So collab we never knew we needed 😋
I had to stop in the middle of this video to shorten a couple of my CSSBattle attempts another few bytes!
Imagine doing all that engineering just to make some rotated checkers 😸
But jokes aside, it's actually a nice exercise in spatial intelligence and abstract thinking
Would it be cool to add hover effect
Can you please make a video using this different in actual websites to us ideas of how to use this in practice?
Great
Kevin: I wanna say that all of these could actually be animated. We have @property now…
Me: * surprised * * excited *
︙
Kevin: Now that we have @property…
Me: * hyped *
︙
Me: * checking caniuse *
Me: * looking at beloved firefox *
Me: 😭
SVG does all this, and more. Why not use that?
Can you take these images and build on top of this with image filters?
as far as CSS is consered, these are images, since it's using background-image. So, you could use an actual image as another layer in the background-image, and then use background-blend-mode, or you could have it as the background and have an image on top of it, and use a mix-blend-mode on the image.
cool
Hi Kevin...
Please make a video with Kyle on css battle again...
We want one more match....🎉
*Please make next tutorial on Blurry and Glassy effects....😢*
Anything specific? You just need to use backdrop-filter: blur(); and have a transparent or semi transparent background color on the element. Let me know if there's a specific thing you'd like to see though
Please do animated one
Hello, I'm stuck at Read & Agree to server rules. I cant find the agree button. :(
Are there known issues for Firefox? I tried that zigzag pattern and the top left and right sides been sharp but the bottom sides not.
Subpixel rendering of any of these can sometimes be a little off. It can also depend on the colors used, the angles, the sizes...
@@KevinPowell Thanks Kevin, I guessed there are some differences like that. A chromium based browser just works fine.
6:03 You're really Charlie Brown, aren't you 'Kevin'???
I'm gonna put the first 0:00 - 0:34 seconds of this on loop at 0.5x speed...
How to do you learn anything if something new comes out make a video on it also
Learn a lot of new things by making videos tbh. Gives me an excuse to dive in and learn as much about it as I can,, making a few things to test it out, reading on it, etc.
@@KevinPowell how do you get informed of any new update that comes please make a complete video on it although you told that by making videos you learn new things but explain it completely in a video by taking a topic as an example an learning it in front of us from scratch
Designing the next rug pattern with css…
This video a.k.a. Optical illusion overflow
I do not think these patterns should have animations. Patterns alone can cause issues, example these seem very close to the do you see a horse/human in this messed up image and those cause me headaches.
15:00 the rems in the radial-gradient are the radius of the circle. Meaning the full width is 2x the radius or the diameter.
Agree, you'd have to be very careful in animating them. I wouldn't animate the ones I did here I don't think, but some larger scaled ones very subtly might be an option
Interesting, but why are the gradients not gradients but hard color lines? Also you didn’t really discuss background-repeat.
having the two color stops at the same place makes them a hard line (this color goes to 50%, this color starts at 50%, so there is no inbetween). For all of these, no need to play with the background-repeat, though you could have any of these only on 1-axis if needed by having it repeat only on the x or y.
@@KevinPowell thanks for explaining! I implemented "tabbed" folders in my Thunderbird Add-on QuickFolders and gave different themes and color choices for their favorite folders, when linear-gradient was still experimental. I am a little wary of CSS animations as it can significantly slow down some clients (e.g. I am implementing pulsing shadows). I find outline is an excellent tool to attract attention where necessary.
Do you have any paid course plss give the link
kevinpowell.co/courses 🙂
why is css so easy by you ?!
I do it every day, all day? 😅
I've been teaching it for almost a decade now, and making sites for longer than that... helps have a decent idea of what's going on. Plus everything I do in this is pre-scripted, which also is a big help, lol.
Second comment ❣️
Best!