 Is this all box shadows? This can't be all box shadows. Holy moly. For a while back, I asked people to show me the no-div stuff they created, because apparently you can make amazing things without even having to have one single div. And I got a whole bunch of submissions. I'm hoping to be completely blown away. Let's see if they're as amazing as I think they might be. All right, so let's start by scrolling down and checking out. First, we have these by Tamani Afif of CSS. Challenges who shared a whole bunch of them. So let's just quickly open those up and we'll take a look. And I think knowing Tamani and the stuff they create, I think this would give us a nice little taster of the types of things it'll be into. No divs going on. So here's the video, but let's go and actually see. There it is, view an editor. Come on, you gotta prove it, right? And there it is, no HTML. I do see an app property here, which to me means that this would only work in Chromium because this is a way of doing, it's like the next level of custom properties basically. And because it's a length here and there's other values you can give it that let it know basically it's a number, it allows animations on things that might not traditionally be able to be animated and doing some crazy stuff here. We just have the HTML and some pseudo elements on the HTML and that's it. There's nothing else in here when we get this really fun little animation going on. Nice. Yeah, I'm not gonna dive too much into the code in any of these, but we'll get some sort of behind the scenes looks a little bit and maybe dive into a couple of them, but same idea, a different animation. I'm assuming they got the other one. So obviously here, once again, same idea using app property to be able to play around with these. You know what, I just realized, let's heart this and come and heart this, make sure these get some love We've seen that. Here's another one. Oh, okay. Yeah, there we go. That's kind of trippy to watch. Very cool. Same idea, nothing going on there and a blob effect too. Ooh, this one's really different. So this one's all done on the body by the looks of it and a pseudo element with some masks. Cause I think most of the ones where I actually see a linear gradient here too, I think we're gonna see lots of linear gradient stuff going on. But yeah, look at that. Ooh, that's fun. I don't know what the animation even would be on. It's just on a mask. That's so, what? To be able to do that with CSS only is really cool. Like that, the wobble. The wobble stuff is super cool. That's definitely worth investigating a little bit more, but I just have no idea right now. So we're gonna move on. Onto this one. It goes a bit more into the feeling of some of those other ones that we saw. This one's a little bit more complex though, because the lines or the boxes are moving and they're doing not even a square, down, across, down, across. Okay, it's always down, across. I thought there was a bit more of a complex animation. But even then, I don't get it exactly how you do something like that. Background positions are being moved around. So yeah, I'm not sure. Really, really cool, regardless. I have no idea. It's a little mesmerizing, but yeah, really nice stuff to Manny. Thank you for sharing so many of them and awesome on having created all those. Really, really cool. I'm impressed. Hopefully I didn't miss one of the links, but we get sort of a nice introduction to what we can do without divs that just, I don't know how you can do it. Adir codes, let's go check. This looks like it's the other end of the spectrum. So instead of being, yeah, so instead of like some patterny stuff going on, more like the CSS RT realm, but with an animation too. And there's like little layers on this too of like the text message popping off. That's so cool. And then like, how do you make, so we have our root, the HTML and the body and the body before and after. And that's it. And you still can get this like 3D look. There must be pseudo, but we don't know, that must be shadows actually. Shadows coming off of that with, yeah, cool. And again, this is the type of thing, like why would you want to do that? But like, you have to get pretty creative to be able to make this without any divs. And you're sort of limited to your body and your HTML element. And because of that, you probably learned some tricks that you might like imagine creating this type of effect all with divs that you might be your first instinct. But then if you realize you can just do it with some box shadows or a single box shadow that has lots of shadows in it. I wouldn't know where to start if I wanted to do that with divs. So I have no idea how I would plan to do it without any, especially with like the stuff on the screen and there's like the text is there and here by the looks of it. I don't know, but whatever, however they did that really, really awesome. So a nice job Adir, really impressive. Next up we have Ben and if Ben Evans is doing something, it's probably going to be incredible. So let's take a look and there's so much happening here and I don't know how they do it. This one I think I'm going to look at in a little bit more detail because I just can't even wrap my mind around how you would do that. We can slow it down or speed it up. Let's just say five seconds and it should reload but slower. Okay, that you can see sort of let's break down that animation. I can change the body color of the border color and the time. There's the body, content, animation on the back time steps. Okay, after, da, da, da. Unfortunately my box shadows exceed the code pin size limit. So I have to link it to, link to it externally. Is this all box shadows? This can't be all box shadows. Holy moly. This is key frame back zero. This is one shadow or lots of, this is the first key frame. Still the first key frame. Still the first key frame. We're still on the first key frame, right? Oh man. That's for up to 2% of the animation. This is like font size 10 and I'm scrolling and scrolling and scrolling. Ben, how, how is this possible to create this and then animate it? It doesn't mean box shadows and box shadows and it just goes on and on and on. How do you do this? And keep track, there must be some sort of way of creating this and keeping track of it or something. Cause like how do you know which one you're on when you're doing it? It's like every pixel there is a separate shadow, maybe. I don't even understand that. And then having to animate it. I have no idea how that's possible. I'm gonna be in touch Ben cause I need to understand how this works. I just don't know how you, do you have a program that does it? Like helps you with that? I don't know. If you have to just figure that out, I don't understand. But this is one of those things that it's impressive when you're looking at it and you don't know how it works. But then once you get a little peek behind the curtain it's actually more impressive. I just can't understand how this was done. Let's keep on going. Cause if not I'll just be stuck here staring at the whole time. Next up we have some from Alvaro Montoro here who if they're going to be good cause Alvaro is up to good CSS stuff. Firefox only. So we'll come to that one after right here we have women's drawing. It looks funky on safari and a snowman animation. So we'll get that and Homer. This is no div. So I've done previous videos where I look at people's amazing things and you get this quality of stuff but there's like they're using pug and there's seven million dibs. So to be able to do this with zero HTML doesn't make sense to me. Some custom properties set up here. So let's just heart that before I forget. We get the different things. We actually change the colors and stuff if we wanted to play around with it, which is cool. I don't even see earrings, earrings. They behind the hair on comment. Oh, we have an alternative version. Thank you, Alvaro. That makes it easier. That's on comment that and see. And there we go. Version two, awesome. And there's another one too. Cool. Let's see the next one. That's so cool. Thank you for making that possible. And that looks like, oh, they have sunglasses on now. So fun. So cool that custom properties and like variables and stuff. Like this is CSS only though. It's not even with SAS or a preprocessor. And then just like a million different gradients, earrings, I have to find the earrings on here or something's not working for my earrings but everything else back hair, the neck. It's cool that he broke down what everything is too. The shoulders, the hair. So if you want to like break down how this is possible, this might be the best one to go check out actually, just because it might be a little bit easier to find the different pieces you want. The eyes are done on a pseudo element, the cheeks. So there's like a layer done with, I guess, on the HTML element. And then you have the before and the after that are being done with the sort of like layer things on top of each other, I guess, is how that works. That would be my guess. Really cool. Yeah, that's awesome. And I like that there's some comments and stuff that help us understand what's actually happening there. Zero div CSS snowman. So this one's kind of funny just because I made a CSS arts one time. I did a video on it. It'd be linked that I made a snowman and mine looked worse than this one. I'm pretty sure it took me a long time to do and was just full of HTML. So to be able to do a better job, I didn't have an animation or anything to be able to do a better job than I did without any divs is a little depressing, but very impressive. Once again, lots of gradients, background sizes to position stuff. Oh, some box shadows here like Ben Evans was doing. So box shadows and gradients seem to be the way to go if you want to get into this world. So if you want to be a master of those things, learn how to make CSS stuff without HTML. And here we have our Homer, which is really looking good. Yeah, the round shapes like this in CSS, like this type of thing is always, anytime you need something, especially if it connects and has to go back the other way or something. And that's basically what this entire drawing is, is usually impossible or not impossible. It's always really hard. So, well, this one looks a lot simpler than some of the other ones we were looking at. I'm just like, I know how, well, I know for me, it's really hard. Maybe for people like Alvaro, it's a little easier because they know the tricks on getting it done. But yeah, that's really cool. And now I'm really curious about this driving game. So let's copy that link address and get Firefox up and running. And we've just upgraded Firefox, skip this, come on. Oh my goodness. Can I just close this? Start browsing, there we go. Thank you, let's actually jump in. And, okay, race car game. Oh, there's my car. We have to go on the road, don't we? And then game over, move the mouse outside of the window to start again. And then we want to drive. So I've seen CSS games before, it's about the mouse position and if you hit something, you're game over. Now, I didn't really pay attention to the code on them, but I'm guessing there was some HTML going on in them. So to be able to make a game like this without any is kind of cool. Oh, we can, speed, timing and animation. What if I make this, let's go really fast. That's really slow, what? Speed, the lower the number, the faster. You should read the instructions, Kevin. Let's go, let's go fast. That's... Ha ha ha. One second, no, okay, a little too fast. Let's try like 10. Five, maybe five I could do. Yeah. Oh, that's, there we go. Five is probably like as high as I'd want to go. Yeah, I could, I could probably, okay, now I feel like I need to try and, there we go, there we go. I got the, once you get into the groove, you're okay. Really cool. Awesome, Alvaro, thank you very much for sharing those. That was, that last one was a lot of fun, thank you. Oh, and if you want to know how he made the snowman, he has put a video, so I will link that down below as well, and you can see how it was created. And next up, we have Michelle, Michelle Barker, awesome. Thank you for sharing, Michelle. And if Michelle's also up to amazing CSS stuff, and I'll also link to her website, CSS IRL, in the description, because she is up to great stuff over there. And here we get this really fun rainbow animation. Look at that, super cool, with no divs. Which, now, this must be how the first person, Tamani was doing it too. And I didn't click then, but I just thought of something. So here we have AppProperty, Chromium only, we have the AppProperty going, so good thing I did this in Chrome. So we have a few going on, but where's the background size? Background, some var size. This just clicked, like what if I make this 100%? I should have one rainbow, right? Or zero rainbows, I broke it. Oh, I did start, Kevin. I want this one, we have a clamp, 100%, two rainbows. Okay, but that's, because it's a background, and then it repeats, you only need one. And then part of it, if you have that sort of patterny thing going on, is just about making it work on it. That makes it a little, that makes more sense now. It doesn't make it less impressive, it just means like, okay, I can sort of understand. You're focused on one of them, making that one work, and then you can go from there. But even here, like this type of animation, remember I was saying curved angles? I'm guessing this is linear, or radial, or conic gradients in this case. Yes, conic gradients are really cool, and I don't talk about them enough, because they're kind of weird to use, but if you understand what they are and how you can use them, you can do really cool stuff. And here is an example of a really fun animation, imagine doing charts with conic gradients. It could work super well. You can animate stuff with them, pie charts, do weirds. I don't know, but this is how you can just do a fun little rainbow at the same time. So thank you for sharing that one, Michelle, really nice. We all need a little bit more color and stuff like that, so thank you for sharing that. Next up we have Miguel here, World's Best CSS. So let's go and check that out. And World's Best CSS, we do have some HTML here. This is done with Hamel, but I'm assuming, there we go, the text just disappears. So that does, in my opinion, classify as a no-div. And basically I'm guessing it's all based on suit elements and something going on here. Some box shadows, I mean, this shadow, just looking at like, again, this is CSS art, where normally you get tons of stuff here, and then styling it here. This actually looks like very minimal amount of stuff going on, to be honest, to be able to get something like that. I'm guessing there's some scrolling some longer stuff somewhere here. There we go, on some of the shadows or something else. I don't know, but it looks really nice. And just like the lip here with the shadow that's changing inside the lip. And then here we have the nice shadow, the soft shadow there. For a white on white on white thing, just to get like these little details, I'm super, super impressed. Looks really good, Miguel. Really nice job, cool. And again, I just have no idea, so awesome. And Adam is the last one that got something in, so we'll check out what he said to the couple. I think it's one and two. So first we have, let's just heart that up, we're here, it looks cool. Recursive number nine, look at that go. Very cool. I'm guessing it's background position, animating background size on it, and then using gradients by the looks of it to actually get things to be there. Again, if you wanna get into this world or just do sort of creative stuff, gradients are the way to go, and apparently box shadows as well. Yeah, this is like a really fun, like sort of simple-ish in a way, but really just fun to look at and cool idea. So very, very awesome. And when I say simple-ish, I mean just like, it's minimalist, not that it's easy to do. Because again, I wouldn't even know where to start. I think I could do this circle here, that and maybe make it grow. I think I could maybe do that. So let's go and check out his zero element elephant now, which has a little animation, Adam. Is this the note we're finishing things off on? What's this elephant doing, Adam? Lots of gradients, there we go. I can't stop watching it, even though I sort of wanna stop watching it. I hope you enjoyed looking at these as much as I had fun checking them out. And if you'd like this video and you haven't seen my other ones where I look at amazing CSS stuff, there is a short playlist for you right here. And with that, a very big thank you to my enablers of awesome Jan, Johnny, Mr. Dave, Patrick, Simon, that's Steven and Tim, as well as all my other patrons for their continued support. And of course, until next time, don't forget to make your call on the internet just a little bit more awesome.