Create amazing patterns using CSS gradients

No video

Create amazing patterns using CSS gradients

Рет қаралды 46,230

Kevin Powell

Күн бұрын

Пікірлер: 90

@KevinPowell Жыл бұрын

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!

@okundm 3 ай бұрын

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.