 Some of the things that people can do with CSS only are just absolutely mind-blowing, the time, the effort, and everything they put into them. I don't even know how I would get started in doing something like this. So instead of trying to figure that out, I'm just going to marvel at these amazing creations. So here we are once again looking at some amazing CSS art in previous videos. I've looked at code pens, and sometimes it was hard for me to find like really good ones, you know, you can search on code pen, but it's hard to find very specific ones. So this time I found a site called cssart.com that organizes by person. So we have a nice little curated list going by most popular. We have a ton of stuff that we could look at. And so I definitely would recommend checking this site out and just being amazed by what's on here. And we're going to start with maybe the top 10 and look at one or two pieces from each person here and just be blown away with what people are able to do. And we're going to start here with Diana Smith, which a couple of these look familiar based on these little thumbnails. So I'm going to click on a couple here that I don't recognize. So here's a pure CSS Francine. Oh my goodness. Look at the the details that are going into this that are just absolutely mind blowing. And actually looking at it now I do think I've seen this one before, but I don't remember if I have or maybe it was another one similar, I'm not sure. But I guess for me what blows me away the most with this is just like the level of detail. I don't know are we able to zoom sometimes things like this or we might also break my browser if I zoom in too much. Just yeah, but I mean looking at the hairs that are going on here at the feathers, I don't even wouldn't even know where to start the little doilies there. The folds everything on this is just so incredibly impressive. Maybe we should have gone 10 to 1 because I don't know how we're going to match this. I'm going to look really fast. We're not going to be looking at how exactly it's been done. But I'm just really curious on this hair like look you have each strand is in here somewhere. So like we have 50 strands just covering one section of hair and then again and again and again. The amount of work in time that must have gone into creating this is we have the two sides of the feathers. We have a whole bunch of stuff all the different pieces of the feathers. It's just absolutely incredible. Yeah, mind blowing and amazing what you can do with CSS. This one's called a pink which would make sense based on the glow and this one's very different because it doesn't have the same level of detail that we saw on the last one. But the gradients that are coming on here to create this lighting is extremely impressive and just really really very, very nice. And every time I look at any of these, I'm just like where do you start? Honestly, I wouldn't know where to start. I wouldn't know how far to get. I just don't know. And actually, I was saying there's a little less detail in here. There was like little curves in the hair in the last one. Here we have like curly hair with the glow coming on it. Blend modes of some sort with gradients, I'm guessing for that and overall probably are just going to transparent. But the curly hair is a lot more difficult than you'd think. So curious how they manage that. I see some like repeating patterns a little bit with how it was done. But yeah, that's a good start. It's a really good start. Now this next one is the Mona Lisa by Jay Salvat, which is actually a generated one. I've looked at it in a previous video. So we're going to skip over that. It's using something, you know, you give it an image and it creates it using CSS for you. And it's not handcrafted. So we're going to skip on over to Cassandra here and take a look at a couple of these that look interesting. And so we're going to go with the Xbox controller. I think I might have looked at her Game Boy before. If I didn't, it was a different one. So we're going to skip over to this watch because I know I haven't seen that one. And here's the Xbox controller. So here it's a little bit simpler obviously than what we saw in the previous one with the hair and all the details and the glowing and stuff. But we still, I'm always amazed by these ones just in like the level of detail that's more subtle sometimes. Just I'm getting like the right sort of lighting effects on the buttons over here. You have like the shadows being done on the outside. So it's like really, really nice the lighting that's on the buttons and everything that just takes things from being flat and giving them a little bit of depth. It's so much harder than it actually looks. So really nice controller there by Cassandra. And here a nice watch, which nice animated one at that. So that's cool. Now with it slowing down and then speeding back up, it's obviously just the timing function. So we can play with that and actually just, you know, make the timing function linear on it instead of, I guess, like ease in and out. And then it would just keep rotating around nonstop, which might look a little weird when the other hands are never changing. But yeah, really nice. Again, lots of like little details coming into that. And of course, making the thing actually rotate and the layering of different stuff. And there's little shadows to create that 3d depth that is going on there. So really nice stuff there by Cassandra. Next up, we have Rachel Bull, who I don't know if I've seen any of her stuff. And it looks like she did some Halloween stuff. But let's go and look at this South Park right here. And my kids have been really into SpongeBob. So we're gonna look at that one as well. So CSS only South Park says it's made with only CSS shapes. Of course, we could look at the code a little bit. But this is one of the ones that I feel like, okay, maybe I could do something like this, it would just take me a really, really long time to do. And I don't have the patience for it. But again, we have a little bit of depth coming on these and just all the work to draw this out. And I always get questions about this, like wouldn't SVG be better? Yes, SVG would be better to create something like this. But that isn't the point of doing something like this. And the things you can learn in creating CSS art that can actually sort of come through into a more real usable situation further down the road can actually be really impressive. Like here, if you need a curved line that ends, how do you do that? You have this, the edge here, how do you do the border that looks like that on him? How can you do an easily repeating pattern with the gap in the middle? Or, you know, all these different things are things that can actually come and be useful. But like these, this is so much harder than it looks having like a shape that then doesn't complete at the other end, like, you know, getting an oval that looks good and then rotating it and then covering the part that you need to. And all of these different things are the nose and these things with the teeth and all of these different pieces, they're not easy to do. And they're not practical in the sense of creating something like this, when you could use an SVG or PNG, depending on what you need, probably an SVG, though. But that, again, is, is regardless of the point and not why people are building stuff like this. And it's these little things along the way that you learn that then actually help you out in the long run. And of course, this is coming from someone who doesn't do a lot of SVG art. And I'm terrible at it because I'm sure I could get better if I practiced and I would learn a lot along the way. So maybe that should be a challenge that I set for myself in 2023. Maybe that could be a fun thing and see how far along I can get with creating some CSS art stuff. So that's by Rachel Bullen. They look really good. And actually, I'm going to open another one by Rachel here because it looks like it's a little Oh, see, it looks three, the little thumbnail and even looking at it here makes it look much more 3d, but it's not. It's just sort of a fo 3d effect with CSS. So another cool thing you can obviously do just using a good use of gradients and shadows and all of that. So really, really cool. And a lot of detail again, they go into these, that's always what amazes me the most with these. So next up, we have Ricardo Oliva Alonso. And let's jump in. I don't think I've seen any of these. This one looks cute. So we have a little ninja. We have this guy and just because it's like isometric, I might open that third one there too. Oh, he's talking to us. Look at that. So this was designed based on a dribble shot. So that's always a fun thing is finding things in dribble and then seeing if you can recreate them with CSS. You might think something like JavaScript would be required here, but it's clearly just looping through an animation. So we just take time to do all of this. And just to show, I was just curious. And if you go on your, you see the monster mouth, which is right there, which is animating away, and it just has an animation on there. It's just a div that's been styled up and then has other pieces inside of it that I probably also, there you go has another animation on it. Yeah. And it shows, you know, something like this again, an SVG animation would probably work really well, but you learn a lot about animations and creating something with this. And that's just really fun. I love it. It's so cute and quirky. And again, finding something, oh, that's cool on dribble. And then let's recreate it really, really cool. This guy's just super cute. Oh, wasn't expecting it to keep going. I just thought he'd be sleeping. Let's just watch this for a second. And he goes back to sleep. Nice. Oh, the little nose thing in the animation there too. That's so like the little change in the nose when he perks up and then it settles back down. These little, little details and stuff like that are really, really cute. That's super cool. I love it so much. That's really cute. And let's just go look quickly at the piano. I have to say, Ricardo, the animations that are going into these really, really cool. And this isometric 3D thing. That's another thing for me that I just, I don't know enough about, even though I have had Amit help me out. And if you're curious about that, I'll put a card to a video or a link in the description for a video that looks at creating a 3D animation with the ball bouncing and stuff that's kind of might give you some insight on how this one is done, though just a little bit and just like, you know, these extra details again, the speakers look really good, the little playing thing here, the lights changing. Very cool. Very nice. I love it very, very much. We're going to jump down now to Sarah. And Sarah, I've definitely seen a couple of these before. And if I remember, we're going to see another keyboard because I haven't seen that one. And let's also, this one looks like there's a lot of details. So we're going to jump into that one. So yeah, I definitely recognize Sarah's work from another one. And again, for her, the stuff that impresses me the most with Sarah's work is the level of detail that goes into it with little, little details to really give it like a realistic look to it. It's not like a stylized look so much as like, let's see if I can make this look like a 3D rendering basically, but only using CSS and keeping it flat and just using gradients in really, really nice ways and different things to create stuff like this, where you have like the different layers with the speaker underneath, the knobs, the level, like the level of detail going into some of this stuff is just incredible. The little shadows on the keys and everything, the lighting that's on the black keys, it's all really, really good. And I mean, look at that. It really looks like a 3D rendering, like a really good 3D rendering. It's like too perfect to be a picture. But just like the depth that's coming into this is, is insane. I don't know how people do this. It's really, really incredible. So yeah, really, really nice stuff. Sarah, I've definitely seen some of your things before and I'm not disappointed by these ones. Really cool. It's just amazing the level of detail and stuff. And again, making something like this, you can, you know, once you've made one of these keys, you've made all the keys, right? I don't think there's any shifts in the lighting on them and stuff. So the level of detail on it takes a lot of work, but like, there's only so many things in here. So maybe it's not as bad as it could be to create something like this. I'm saying that and I know that it would take me a ridiculous amount of time. Next up is Lynn Fisher, who recently won, I think, a Jamstack award for her personal website, which is really cool. I'll link to that in the description as well. Just make sure you scroll when you get to it. This one's cool because there's just so much to look at and enjoy, right? You have the Rubik's Cube, a lightsaber, you have the Snow Globe, the melted guy. I love that. But like each one of these things could stand on its own and be its own sort of piece. And instead of having a whole bunch of stuff, we have, or instead of having all these individual pieces, we have everything here, which is a really cool way to sort of collect, you know, her collection of her CSS art. I love that. It's such a cool idea. So, you know, you make one of these, you have it, then you can just add it to yourself. Super, super cool. I love it. This one's obviously completely different. The repeating background that's going on it, which is cute, the little eyes, it's a little like joy part to it there. But the nice thing with this, like, you know, there's the simplicity in how the background's created using, I'm trying to think of the right word for how you can do that with the colors, you have like a div coming over, like the filter effects probably, I'm guessing. Maybe there's two layers of stuff and you're showing the one with the color. I'm not 100% sure. But again, you can learn stuff to create something like this that could be super useful. And it's I like it when you're not just doing like, okay, I'm going to learn this, but you're adding a little bit of joy and like a little bit of fun to it with like the little eyes and stuff that show up. So, yeah, really cool. But this one, you know, diving into all these pieces, really, really impressive. Next up is Louise Flanagan. We have a Mario, let's look at Link, and she looks like we have a lot in Nintendo characters. I see another Mario here by Ben Evans. So maybe I'm going to do Luigi this time. And let's just, I think I've seen this one before, the girl with the, I have seen that one before. So we'll start with Link here, even though I've seen the girl with the pearl earring before, we're going to, we're going to skip it for, we're going to watch it again, I should say. Really nice. It shows you the different things we can do, even though we're just using CSS with the different styles of art that are coming through all of these, right? We had photo realistic, and now we have something like this, which is very cartoon. And you still get, you know, it's just a different approach. You're just using the gradients in much softer ways, making it more bubbly and getting a really cute link there with a lot of like, everything looks awesome. That's super cool. Yeah, I love it. And it's one of those things, I think something like this is a little bit simpler in a sense, but it's done in a really good way that like the lighting on it and everything looks super good and would take forever to set up and do to get it to really come through, because a lot of the time when you make something simpler in terms of like the different pieces involved compared to like the photo realistic things we were looking at, when you get something that has less pieces in it and you're just using lighting to try and do all the different parts, that can be a lot of work to actually get it right to make it really high quality. So really good by Louise here. Here is our Luigi, really, that's awesome. Just the different, all the different pieces in there, the shadow coming from the hat, and that's one of those things that is super easy not to have. But by adding, you know, the lighting source is clearly coming from the top. So then getting that shadow coming from there makes sense. You have the shadow coming down at this side too. So yeah, you know, really cool. I like it a lot. And it's those things that you sometimes don't have. So really, really, I like it. And here's the girl with the pearl earring. No SVGs. This is just with CSS. And what's really amazing with this one, and I have seen it before, but what's really amazing with this one is you're not seeing the different pieces. Like if we go over to here, you can see like there's one piece of hair, two pieces of hair, three pieces of hair. We have the head, we have each eye. You come here and you look at her face, like I don't know where one div starts and when the next one ends or however she did create this. The earring, I guess, is the easiest part maybe. But like the materials up here with the shape going on, but the way they blend into each other and that and again, the softness on the face and all the different pieces blending into each other. That's hard. Yeah, I don't know how you do it. And even like getting, yeah, just getting all the right angles to get things to get the shape you need and then blending them together really seamlessly, even on the scarf up here at the top is probably a lot harder than it looks because of how well it was done. So hats off on that one because it's really, really impressive. Really, really nice. Now one of these reaction videos would not be complete without something from Ben Evans. And I think I've looked at most of these already in videos that I've done, but I haven't looked at this Mario, I don't think. So let's go check out that Mario and there is the Mario. See, every time I'm like, Oh, cool, it's a 3D Mario. No, it's not just a 3D Mario, it's a 3D Mario that follows my mouse that is animated if I'm not moving my mouse. Does he move different ways? Okay, so he's blinking. So he had that going like, if you notice here, when it's in the middle, he has a different sort of animation set going on. Whereas then if he's looking here, he sort of has this blink in his, his little mustache thing that was going on. So that's really, really cool. Obviously to make it like this, he has like certain points that he's looking at, and it's a little bit less smooth than if you had a 3D rendering of Mario that you used and had like some, oh, oh, I don't know how I did that. That was cool. And even getting like, how did I do that? I don't even know how I did that. Can I, oh, there we go. So what I don't know is how you do that at all. The following something, I wouldn't be able to make this Mario in the 3D and get it to work this way. That's, I already, but I know how it works. I just wouldn't be able to do it myself very well, or it would just take me a ridiculous amount of time. But that, if I can get it to go again, I'm not sure what triggers it. That's one of those little delightful things that I honestly have no idea how you can do without JavaScript. So yeah, I love this. I could just, it's so much fun and really, really cool. And to think it's, there's only CSS involved in that. As usual, Ben sort of takes the cake with some of the stuff he makes. It's really, really awesome. So yeah, good job, Ben. I love it. I love it a lot. So let's, next up, number 10, we said we're going to stop there. So let's go look at this Nintendo Switch, and I can't see what this is. We're going to look at what that one is as well. And, oh, an animated Nintendo Switch coming in. Can I refresh that and see if we get, there we go. It's clicking into place. And a nice little thing there. Again, a bit more of a flat design, but it works super well. Nice detailing and everything coming on that. And it's a hoverboard. Ah, cool. I love ones like this. And again, it's sort of like a little bit of a simpler one, but with the animation, it can really make it come together. And I really like this little dusty coming off the end. And that's, again, one of those things that you might not know how to do. And then you realize, oh, I can blur stuff. And you look at how to do a blurry thing to make it look softer. And then you get that to work. And then you end up having a project where you need to have something blurred a little bit for some sort of effect. And you know how to do that now. And even here, just making sure all the pieces are properly connected, the little like sort of the flat design shading and stuff that's on there. It looks really good. I love it. And obviously, like the extra motion. And actually, there's the other cool thing is the lines going by have a motion blur on them, right? I'm guessing if I paused it, they would just be blurred a little bit. But the ones going faster appear to be more blurred. And the other ones look like they're less blurred. I could be wrong. Maybe it's because they're moving and it just is showing up like that for me on my screen. But usually if you have something animating by that you don't have like a little motion blur type of effect on it, it just doesn't look as convincing as it moves by, because you just get this block that sort of flies by on your screen. So yeah, really, really cool. And I just saw Alvaro here. So we're going to do one bonus one here at the end, just friend of the channel Alvaro Montoro here. We have a nice really cool sort of vectory messy going on right there. Looking really good. I guess we know who he's supporting for the World Cup that's happening right now. Or while I record this, I'm assuming it is still beyond when this video comes out. Yeah, it's looking awesome. Once again, one of those cool looks to something here, once again, based on a dribble. And using only clip paths for this one. So this is a different take that Alvaro took, which is really interesting. And a fun going, okay, you know, so I guess we turned off the clip path, we just have like a whole bunch of solid colors all overlaid. It's a bit of a different approach than what I've seen before. So I'm happy I clicked on this one, just because it shows that there's different ways to do this type of stuff. And create these types of things here using clip paths rather than like creating all the different shapes that you need. And then obviously you can combine these different things. But I've never seen a clip path one done before. So I like finding this one and it it's a very specific look, but it looks pretty cool. And if you, you know, again, I just use an SVG in general rather than creating it. But you'd really learn a lot about using clip paths and setting things up and the different ideas that could come from that that you could use in a real project. I just really want to hammer that home because people always ask me what the point of the CSS art is. First of all, it's fun, it's cool to look at, but the people when they're creating it are learning a ton about techniques and different stuff you can do in pushing the limits of CSS that does pay off a little bit in the long run. So really cool there. Hope you enjoyed this video. If you didn't, you have not seen my previous reactive videos. I've looked at other amazing things here, including one video that was looking at one div only CSS art, which just is mind blowing. So you can check those out right there. And with that, I'd like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick Simon and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your recording the internet just a little bit more awesome.