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 :)
@renatoneves6216 Жыл бұрын
Do you have a video about backdrop filters? i find them very useful but they are kinda clunky
@propavangameryt405 Жыл бұрын
@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
@NotKyleChicago Жыл бұрын
@@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.
@kylevandeusen Жыл бұрын
Please do the animated ones - this was great!
@cedrictheveneau9141 Жыл бұрын
Epileptic people will love it haha, joke aside, for subtle effects it could be great
@LePhenixGD Жыл бұрын
You can play with the background position to animate linear-gradients and radial-gradients Careful as it doesn't work with repeating-linear-gradients
@rickardelimaa Жыл бұрын
Using `circle` to mask a background is brilliant.
@stephenbrown2979 Жыл бұрын
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!
@abdo-san2324 Жыл бұрын
that's very interesting, using the css gradients sometimes saves a lot of work, huge thanks for Kevin 💜✨
@VasilyPavlik Жыл бұрын
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!
@ritikdrona Жыл бұрын
Hi Kevin. Loved this video! Can you please also create a video for animating these patterns?
@Palisis Жыл бұрын
😬😬😬
@FlorianRumpel Жыл бұрын
I didn't know you can do this with gradients😲
@InspiredScience Жыл бұрын
You're an amazing teacher and excellent pacing that is highly respectful of the viewer's time. Thank you so much, *subscribed.*
@JosephCodette Жыл бұрын
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 !
@madhusmita2207 Жыл бұрын
Thank you so much for this video. I really wanted to learn this and was thinking about the same since a week ❤🎉
@PreKGraduate Жыл бұрын
12:41 The Edward So collab we never knew we needed 😋
@caiomarcellusmartinezcabra3061 Жыл бұрын
4:15 BLEW MY MIND
@naveenramkumar6123 Жыл бұрын
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.
@Palisis Жыл бұрын
@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.
@markwerle Жыл бұрын
Would love to see how you would animate some of these awesome gradients.
@NiceChange Жыл бұрын
Kevin!!!!! Soooo much fun! You make me fall in love with CSS. Thank you.
@abetipraise8617 Жыл бұрын
This channel helps alot.. I love your work Mr Kevin 😍
@freemancharles2491 Жыл бұрын
Still watching the video. Always cool stuffs ❤
@david_d-_-b_in Жыл бұрын
Thanks Kevin. Awesome video, as usual 😎
@ggsingla Жыл бұрын
I was searching for this exact thing. Thanks a lot Kevin
@danielamaria1527 Жыл бұрын
Thank you Kevin!!! CSS 💘
@tobiasfedder1390 Жыл бұрын
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: 😭
@GabralkChoj Жыл бұрын
Great job for the intro!
@RedVelocityTV Жыл бұрын
Didn't understand any of it but was fun to watch
@webdev4u Жыл бұрын
Nice research
@rodrigocalix6494 Жыл бұрын
I would love to see some cool animations with those patterns changing!
@meditationheathandwellness781 Жыл бұрын
Love your stuff. Excellent man
@nekoill Жыл бұрын
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
@travholt Жыл бұрын
I had to stop in the middle of this video to shorten a couple of my CSSBattle attempts another few bytes!
@Stoney_Eagle Жыл бұрын
These videos do make me hate css less and less, it's definitely working hehe 😊
@Chris2phaBrown Жыл бұрын
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.
@calle90 Жыл бұрын
I'm going to buy a hoodie from you this month. ❤
@mounakarym7193 Жыл бұрын
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
@TundeEszlari Жыл бұрын
King video.
@MrBrady95 Жыл бұрын
Awesome, love this!
@vuki Жыл бұрын
So cool! Thanks for this video, you always come up with cool stuff
@victor25021983 Жыл бұрын
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
@AHMEDTHAER2 Жыл бұрын
That was so helpful. Thank you man, can you make a video about animated patterns pls
@alexsegura7183 Жыл бұрын
Animated those patterns please! I saw the waves and started animating it to give some psychedelic properties... You have to try it! amazing video
@Way_Of_The_Light Жыл бұрын
So cool!! 😮
@trebeaudoin9555 Жыл бұрын
Cool vid. It would be also cool if you could create a victorian wall paper effect perhaps maybe using svg icons.
@stevensavoie856 Жыл бұрын
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.
@paul.prestidge Жыл бұрын
So cool!
@okundm3 ай бұрын
Top!!!!! Thank you!
@swaggisun Жыл бұрын
Holy Shit! Insane what can be done with this :D
@precisionchoker Жыл бұрын
I Love your videos 💚💚
@surajdhungana407 Жыл бұрын
Thank you for video .please can you make video on making block having hexagon diagram using css
@mrselcet Жыл бұрын
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?
@KevinPowell Жыл бұрын
You could use the gradient as an image-mask actually! That would give the element that shape
@lawrencedoliveiro9104 Жыл бұрын
SVG does all this, and more. Why not use that?
@madhan8745 Жыл бұрын
Would it be cool to add hover effect
@GR_BackingTracks Жыл бұрын
I'm gonna put the first 0:00 - 0:34 seconds of this on loop at 0.5x speed...
@miltonafonso6686 Жыл бұрын
Can you please make a video using this different in actual websites to us ideas of how to use this in practice?
@nivekdreamman3834 Жыл бұрын
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?
@surajbhardwaj007 Жыл бұрын
Hi Kevin... Please make a video with Kyle on css battle again... We want one more match....🎉
@acubley Жыл бұрын
6:03 You're really Charlie Brown, aren't you 'Kevin'???
@ayrthhhn Жыл бұрын
cool
@suraj351 Жыл бұрын
*Please make next tutorial on Blurry and Glassy effects....😢*
@KevinPowell Жыл бұрын
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
@jocksalo20 Жыл бұрын
Great
@ChrisZomboid Жыл бұрын
Can you take these images and build on top of this with image filters?
@KevinPowell Жыл бұрын
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.
@anmolsharma4049 Жыл бұрын
Please do animated one
@enigma2303 Жыл бұрын
Hello, I'm stuck at Read & Agree to server rules. I cant find the agree button. :(
Жыл бұрын
This video a.k.a. Optical illusion overflow
@Alex_Eicher Жыл бұрын
Designing the next rug pattern with css…
@shiekhpalace2401 Жыл бұрын
How to do you learn anything if something new comes out make a video on it also
@KevinPowell Жыл бұрын
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.
@shiekhpalace2401 Жыл бұрын
@@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
@deatho0ne587 Жыл бұрын
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.
@KevinPowell Жыл бұрын
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
@PicSta Жыл бұрын
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.
@KevinPowell Жыл бұрын
Subpixel rendering of any of these can sometimes be a little off. It can also depend on the colors used, the angles, the sizes...
@PicSta Жыл бұрын
@@KevinPowell Thanks Kevin, I guessed there are some differences like that. A chromium based browser just works fine.
@realraven2000 Жыл бұрын
Interesting, but why are the gradients not gradients but hard color lines? Also you didn’t really discuss background-repeat.
@KevinPowell Жыл бұрын
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.
@realraven2000 Жыл бұрын
@@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.
@muneebraza167 Жыл бұрын
Do you have any paid course plss give the link
@KevinPowell Жыл бұрын
kevinpowell.co/courses 🙂
@LordUzumaki Жыл бұрын
Second comment ❣️
@2922400 Жыл бұрын
why is css so easy by you ?!
@KevinPowell Жыл бұрын
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.