 The other day I was on Twitter and I saw this. So this is a code pen that Amit Sheen here put together and, you know, like here, let's see it in big in all its glory. It's spinning. The ball's bouncing. When the ball bounces, it hits and the box compresses a little bit and there's no JavaScript here. This is just CSS doing all of all the grunt work here. And honestly, I have no idea how this is done. And I know lots of people on code pen do crazy stuff like this. So I thought, why don't we go and explore a whole bunch of crazy stuff like this and just get our minds blown? And yeah, I think that could be some fun. So let's go and check out some other crazy stuff that people put up on code pen. All right. So here we are on code pen and I already see some things that look pretty interesting, but I want to try and make sure I'm only finding things that are CSS only. So I'm going to throw that in the search and I probably want my glasses on for this. So let's let's go with that. And already I see a few things here that look kind of impressive. And we're really going for the flashy stuff on this one. So let's start here. This one looked pretty CSS 3D bending effect by Fabrizio Bianchi. Let's go and check this out. And that's so fun. And they can see no JavaScript going on. So it's all done with CSS. Remember to use transform style preserve 3D. Yes, we definitely I think a lot of the things we're going to see today are going to involve that. But what I'm most impressed with this is definitely the bending effect that's going on. I've seen other ones where it's opening already, just making something like this, making it 3D both sides, like cover the inside. That's pretty cool. The bookmark here and all the pages coming through is already really cool. But this bending is just I'm how do you do that? How do you do that? I'm not I mean, I think this video would be like an hour and a half long. And we'd look at two of them if I tried even scratching the surface on how they're done. I think I do see it is done with Hamel. I think we're going to see a lot of ones that are done because there's a lot of nested divs coming in here. Yeah, here's some of the craziness that you often see with these, right? That's that's some pretty, pretty specific div there after. And I guess you could get around that with naming all the divs, but it's easier just to do something like this, I guess. I've never made something like this, so I don't know. As long as you can keep track of what's happening, it looks kind of pretty, actually, you know, this this nice little triangle or pyramid of divs. Looks kind of cool. But yeah, I'm just I'm totally impressed. Really nice stuff there for BZO. The other one that sort of caught my eye was this iPhone and also by Fabrizio, so he's knocking out of the park here. Hopefully this isn't just a Fabrizio love in, but you never know. Maybe he has a whole bunch that we'll find. It does look like he has a few others, but I think we'll find some other ones from other people. And oh, look, I could do that. I could make these move on a flat. I don't know. Getting them on the 3D, the 3D axis may be a little bit more difficult for me. And there's notifications, too, that just popped up. Huh, that's so cool. Is, you know, I'm looking at this because it's something I know how to do. So I'm trying not to get depressed by looking at all the other things here that I have no idea how he did it. Like looking at the camera, let's see if I can zoom in on that. The detail that is going into just making like it's such a subtle little thing that that camera there. But it looks exactly like the camera on an iPhone, right? Like those camera phones, it has like the different colors, the gradient like into the orange into the blue with the white little reflection on there. And even on like the buttons here and let me turn off my camera here for a second so you can see this. The details down over here, can I get that more in screen? Zoom out a little bit. But like the details on this bot, like these screws, just look at the screws are like each one of these guys, like you can see inside of it. Like this looks like a 3D render that you would have in like 3D render software. This is insanely awesome. And even just how nice and clean the gradient is on this to create that 3D look to it. As cool as that page flipping one was, I think if you figure out how to do the bendiness, you could probably do that. I'm not saying it wouldn't take work. I think it'd still take a while. But the detail on this is insane, right? Like this is absolutely incredible. I'm blown away by this. For Brizio, man, hats off to you because this is nuts. This is absolutely crazy, really, really nice. And links to all of these will be in the description if you wanna check any of them out in more detail and dive into how people did them a little bit. Attempt number one at a CSS. Is this a carousel? CSS only carousel? I've had people ask me about these. So let's go check it out. There we go. This is absolutely horrible. I have a new respect for the workings of JavaScript. So yeah, I've had people ask me about this and it was Jay who showed me he had like a whole bunch that even have the pagination stuff. And it was when I looked at that I was like, ah, yeah, that makes sense. So I'm guessing this was done in the same way that Jay did his where what it involves is, let's go find the slides. There we go. So you can see here is the slide. And yeah, so this is the same way that Jay had set it up. So even though these buttons look like it's the same buttons all the time, like you'd have, if it was a JavaScript slide or you'd have an absolutely positioned button that you just click on, it's on top of everything else. Every time I change slides here, it's a different set of buttons. So on slide number one here, you can see that it has the previous and next button on slide number two, previous and next. So like the next button here goes to the ID here and then the next button here goes to the ID here and every set has it. So if you want to pagination, you can do the same thing. It just means you're hard coding in the pagination for every single one of them. But yeah, it's fun. I think it's a nice experimentation type of thing to do. I don't know if I'd want to put it in production. I guess, I mean, it is nice that you could have a carousel if you needed one. I'm not a huge fan of carousels. But if you needed a carousel for something knowing you could have it with CSS only is always a good thing. But I think you'd learn a lot by building something like this. I didn't see who this was by. This is by John Motel, Jr. Good job, John. Looks really nice. Oh, no, I'm pushing back. This is the one downside of CSS only. Or maybe not the one downside, but one of the bigger downsides. When I push back here, you can see that it's going back through each slide because obviously we're going to a different URL every time we click through. So let's do it this way. Uh-oh, let's keep going back. Let's keep going back. We were in the search. There we go. That looks kind of interesting. Ooh, this horse. I want the horse caught my attention more than the other one when it started running there. Cool, let's go check this out. That's CSS only. And it doesn't look SVG to me. It looks like it's made with dibs, right? Just because, again, SVG, I think it'd be a little bit more smooth in some spots. Why use JS when you can take 20 times longer to make it with CSS only? Click the horse for slow-mo. Ah. Oh, come on. That's so nice. Steve Gardner, Steve, thank you very much for this, because not, I like the slow-mo's nice, but showing us how this was actually built is amazing and so, so cool. Look at all those pieces. Holy moly. I'm just sort of mesmerized looking at all the different things here. So there must be a checkbox thing going on here that he's using. So like it's, is there, yeah, a label. So the whole thing is wrapped in a label. So there's a checkbox that can go off that's gonna toggle the animation. So that's how he's doing that without any JavaScript. And then the rest of this is just really hard work and like getting all of these dibs, just making this horse, if it wasn't moving is impressive enough. Like all of these different pieces to draw all out just to make a horse that's standing still. I don't know if I have the patience for that. And then to go through and break it up, or not break it up and figure out how each one of these pieces would need to move and where's the axis for the transform origin and moving all those around for each one of them and having them all in the right spot to get each one of these things to work. Really, that's so cool. Like the animation down here in the dust and everything and getting it all timed properly. And just with regular HTML too. No, no, no, hammer or pug or anything going on here. Just, he named everything. So you can see where everything is. So top, thigh, lower leg, foot, hoof. Just, I'm so impressed. 20 times longer. I would love to know how long something like this would take to do. I wouldn't do it. I don't have that, but hats off. Steve, you knocked it out of the park. Super cool. All right, next up, which one? CSS only directional awareness, maybe? Hover around the boxes below. Okay. Oh, that was cool. Wait a second. How do you do that? Okay, wait. So this is less flashy, right? Much less flashy. How do you do that? I need some coffee to think about this one for a second. This is where like, everyone always wants a preceding sibling selector or a parent selector and that would make something like this possible. But without those, how do you do it? So here is pug. So this is where like, sometimes you look at pug and it gets confusing. There's a math floor, like... So let's go look at the... I just wanna see the, not format. I want compiled HTML so I can understand what I'm looking at. Did that, oh no, it just loaded. That's so weird that format one second. Or is it just because my layout was different? So no, that's weird. Okay, on compiled pug. On do. What? Okay, let's just refresh this. We broke it there by trying to look at it. Okay, we got it back. So anyway, the HTML I think is relatively straightforward. I wanna know how this is possible. So visibility delay gives previously hovered elements time to slide out before disappearing and remove the visibility transition to slide in current element with sliding over the previous element. Is that like the text? Can you see the text is sort of like switching there a little bit? Slides start below their columns, giving them an upward motion on hover. So that's why if we come down like that, it would have been wild. If like here you can move it up and then down, up and down. It would be kind of crazy if you came in from the top that it would slide down, but I don't think that would be possible with how this is created. So that's like the one, one, but even like if it's in the middle of an animation it still like jumps over it. Okay. Oh, okay, I think I get it. Next row slides are above their columns, giving downward motion on hover. Oh, because that's how we did the downward thing. Okay, down and up. So he's changing if we're like when the mouse is hovering here. Yeah. So when we hover on a row, so if I'm hovering on this row and row slide, no, I'm not quite getting it, but current row slides to the right, slide transform. So it's by default wants to go to the right. Current row, next slide, slide to the left. So yeah, this is where like this is saying that if we're here, when I'm hovering on this, all the other slides are already moved to the left. So then when I go that way, it transitions over to the right. So everything like all the ones the other way. And this is, no, wait, that doesn't make sense. It's the other way around, right? If I'm here, call, hover, the next column. Oh, okay. Okay. So by default, they're always to the right. So right now everything's positioned to be on the right side. But then if I'm on this one, the next one is moved over to the left. So if I'm over here, like the one I'm about to go to, it's instead of being positioned over here, it's actually switched over to that side. So if we turn this one off and we let it recompile, I think now we're gonna break the whole thing, obviously. See how it's sliding the wrong way now? Aha, okay, that's really, this is really clever. I'd have to dive in more to really like make sure I understand how I, if I'm understanding this properly, let's just get that to recompile. But yeah, I'm really impressed by how clever this is. That's really, really clever. Huh, super cool. It's kind of really, really nice. And this is by Gianna. I didn't say, I have to remember to say their names at the beginning. Before I started, I told myself I would. I did for Fabrizio and then I forgot. But Gianna, Gianna, Gianna, yeah, just hats off. It's not flashy like those other things we were looking at, but this is one of those things that if somebody asked me to do that CSS only, I'd probably just say it's impossible. So amazing, amazing. I'm super impressed by this. Solar system looks kind of interesting, but this MacBook, we already saw a phone, but this is by Breck Ken. So cool. So what's impressing me a lot here is the end. Just making the laptop is obviously really, really cool. And I don't even like, you have the outside, the inside, you have the sides. Like a lot of the time when people make stuff like this that I've seen, it's really flat. So like here we actually have, like we don't have a cover and then the other side. Like know the book cover when it was flipping? It was almost like a two-dimensional book cover. Like here, the cover, the sides of the iPad have thickness to them, right? So that's already really well done. But these animations are just super nice. You have like the way like it slows down, comes back here. And then this flip it does right now, it looks like if you did that, that that's what would happen. So like the animations that are happening on this are super, super nice. And even like the shadow and everything. How do you do that? Were the shadows in the right place and moving around? And all of that, I don't know. I have no idea how you do this stuff, guys. Super, super cool. We want to zoom out a little now, right? Zoom out. But yeah, really, really cool stuff there, Breck. Amazing. Spending less time on that one, because the other one I figured I could actually figure out. So I wanted to look at the code there a little, whereas on those fancy ones, like I just am amazed and then I can't do much else. Solar Explorer in CSS only. So we're on Mercury, Mercury's turning around. That's cool. The closest planet to the sun gives more information. What if I click here? I'm just wondering is this, oh, that's cool. What? It goes there and then look at that. Holy moly. Let's just go to Pluto. And I just want to see like, does it, come on guys, this is impressive. It's a little janky on the animations, which is a bit to be expected with everything that's going on here. If I click on the moon, no, that'd be kind of cool. And I can click here and actually go that way too. What if I scroll? No, nothing on scroll. That's all right, though. I'm just like CSS only. This is CSS only. Bring that up, we can close that. There's overlays. CSS is amazing, guys. Absolutely amazing. I just want to look here. There's a lot happening. I think there's all the colors. I'm not going to go through everything. Oh, we got some placeholders here. Cool. That's for these lines. These dotted lines, projectories. I'm guessing it's that. I can't say the word, but I saw a dash there for the border. So I'm guessing that's these guys here. Some mix-ins and everything for the moons. And then you, yeah, this would be an insane amount of work. I guess it's once you've built one of them. It's not so bad to make each one, but then this whole like hiding it up there and then you can click and it scrolls to that. I keep forgetting to look at who made them. This is by Jamie Coulter. Coulter, Coulter. I don't know where you're from. If you're in this, Jamie, Jamie's not very French. Coulter, Coulter. Jamie hats off. Really nice job here. Super cool. Ooh, Star Wars. I might click on that one just because I like Star Wars. Let's go check that out. Ah, nice. This is a little bit... Oh, cool. I like that. When I was a kid, Adats were the coolest, right? I love, love, love them. I remember the first time I saw episode five and I was like, wow. Really nice. I mean, I love this style, the vector-y style going on here, but just like, this is CSS only, right? So it's not an SVG coming in. So just, again, making this is, it's a little bit like the horse in the sense of like, there's so much that has to go into make it and then getting the animation to work properly and turning on the joints and then, and it's not like, look at the way the leg is moving here. It's, of course, it goes behind the rock, but like, see, like there's, it's not just this one simple animation. It's compressing down. It's coming back out. So you only have to do this animation once, I'm guessing, and then it's just doing different offsets for the different legs, but still like getting that to work properly is crazy cool. Really, really awesome. I like that a lot and just the overall style of this is really good. And this is by Ramses, I'm guessing. Ramses, really cool. I love it. CSS only calendar app. Okay, I have to click on that. I promise that I know JavaScript. Currently only works in Chrome. Firefox doesn't like custom inputs. Oh, what? Walk. Add new task. Go for a walk. Reset. I can't go down. Yeah, okay, okay. I was about to like lose my mind. If this had any other interactivity and I could like switch months and stuff, I was gonna be like, wait a second. Click two dates with the labels to see different effects. Works best slash only in Chrome and Safari. That's super cool. So there are some limitations obviously to how it works because then like once I'm here, I don't know if I can get out of here unless I reset it, but it's still like the fact that this is just CSS only with the animations, the dates coming down that you can choose the different inputs here or whatever is happening. And this is all just CSS. And then if you needed that extra step from here, you add a little bit of JavaScript to add the actual functionality to it. Yeah, super awesome. And you can do it backwards too when it works. It's cool that you can do it backwards, right? Cause, you know, that's one of those things that happens. Sometimes people don't really, you're putting it together and then you forget that people might click the wrong way around. So it's kind of cool that it can work either way. Ah, love it. That's by David Kurshid. Kurshid, David Kurshid. Original shot. Oh, is this from a dribble? That's dribble won't go there, but that's by somebody put it together in dribble and then they made it with CSS. Darn, darn, darn. That's so cool. Really awesome. CSS particles. I'm really tempted, but let's go to another one. CSS only cube. Ooh, the puppy's kind of cute, but this cube is intriguing me. What? That is so cool. This is the type of stuff that like, people say like, it's a little bit like Emmits, right? The one we looked at the start with like actual 3D craziness going on and like the lighting, like look at the lighting that changes on that as they spin around and everything and the reflections on them that just adds so much realism. You even get like on the bevel here where it's changing. The lighting is hitting those bevels and giving the sense that it's like on the corner and stuff. I mean, and even if you made one, then you have the animation that you've created for one. And then you can just reuse that animation with different delays on it, but then you still have to position them all in a 3D space and actually get this to work. And yeah, this is just, I have no idea. Like zero, zero idea on how to do something like that. And this is just insanely, it's David again. David, you are at CSS. People say like, I know what I'm doing with CSS. I know how to make layouts with CSS and do typography with CSS and do that stuff. Like this is another level. Oh, we have a soft shadows button. What's that do? Much better with the soft shadows. How do you do that? Where like there's a light source. What's this say? I was going to use 3JS, but I forgot. I like that. I could just like stare at this thing going for a while. I'd be like, I don't know. Knowing this is CSS is just, it's absolutely insane. And if you enjoyed this video, you might want to check out this one here too where I battled with Kyle. It was a lot of fun. We timed ourselves a bit of a competition. I think you'd really like it if you liked this type of video as well. A really big thank you to Zach, who's my enabler of awesome as well as all my other patrons for their monthly support. I can't do this stuff without you guys. So thank you all very much. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.