Front-end dev reacts to mind-blowing Codepens

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 in big and in all its glory it's spinning the ball is 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 codepen 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 codepen all right so here we are on codepen 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'll probably want my glasses on for this so let's let's go with that um 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 all the pages coming through is already really cool but this bending is just how do you do that uh 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 uh i do see it as done with haml i think we're gonna 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 they're 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 uh but yeah i'm just i'm totally impressed really nice stuff there uh for bzio uh the other one that sort of caught my is this iphone and also by fabrizio so he's knocking out of the park here uh hopefully this isn't just a fabrizio lovin but you never know maybe he has a whole bunch that we'll find it does look like he has a few others uh but i think we'll find some other ones from other people and oh look i could do that i could make these move but on a flat i don't know getting them on the 3d the 3d axis might be a little bit more difficult for me and there's notifications too that just popped up huh that's so cool it's 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 um 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 it's so orangey 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 um 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 um this is insanely awesome and like even just how nice and clean the gradient is um on on this to create that 3d look to it as cool as that page flipping one was um i think if you figure out how to do the bendiness you could probably do that it would take 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 this is absolutely incredible i'm blown away by this fabrizio 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 if you want to 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 um see 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 and 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 um so you can see here is the slide and yeah the so this is the same way that um jade 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 slider you'd have an absolutely positioned uh 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 wanted pagination you could 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 uh 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 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 uh or maybe not the one downside but one of the bigger downsides um 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 um so let's let's do it this way uh oh let's keep going back let's keep going back we're in the search there we go that looks kind of interesting 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 divs right um just because again svg i think it'd be a little bit more smooth in some spots um why use js when you can take 20 times longer to make it with css only click the horse for slo-mo ah oh come on that's so nice who steve gardner steve thank you very much for this because not i like the slow-mo is 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 uh thing going on here that he's using so like it's there's a is there a label so the whole thing is wrapped in a label so there's a checkbox that can go off that's going to toggle the animation uh so that's how he's doing that without any javascript um and then the rest of this is just really hard work and like getting all of these divs just making this horse if it wasn't moving is impressive enough like all these different pieces to draw all that 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 to like and like where's the the axis for the transform you know the transformer region and moving all those around for each one of them uh and having them all in the right spot to get each one of these things to work really that's so cool uh 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 hamlet 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 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 i'm but hats off steve you knocked out of the park super cool all right next up which one css only directional awareness maybe hover around the boxes below okay oh it was cool wait a second how do you do that okay wait so this is less flashy you're right much less flashy how do you do that i need some coffee to think about this one for a second one sec 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 want to see the uh not format i want compiled html so i can understand what i'm looking at do that oh no i just load it that's so weird that form one second or is it just because my layout was different so no that's weird okay on compiled plug undo what okay let's just refresh this we broke it there by by trying to look at it okay we got it back so anyway the html i think is relatively straightforward i want to know how this is possible so visibility delay gives previously hovered elements time to slide out before disappearing remove the visibility transition to slide in current element with sliding over the previous element is that like the text you can 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 like they're not 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 okay oh he's okay i think i get it next row slides are above their columns giving downward motion on hover oh because yes 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 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 um let's 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 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 guyana gianna uh yeah just hats off this is it's not flashy like those other things we're looking at but this is one of those things that i 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 can so cool so what what's impressing me a lot here is the and like just making the laptop is obviously really really cool um and i don't even like you have the outside the inside you have the sides like a lot of 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 you know the book cover when it was flipping it was almost like a two-dimensional book cover like here the cover the the sides the ipad have thickness to them right so that's already really well done but these animations are just super nice they have like the the way like it slows down comes back here then this flip it does right now like there it looks like you know if you did that that that's what would happen so like the animations that are happening on this are super super nice um and even like the shadow and everything like how do you how do you do that where the shadow's in the right place and moving around uh and all of that i don't know i have no idea how you do this stuff guys super super cool uh we want to zoom out a little now right zoom out but yeah really really cool stuff there barack amazing spending less time on that one because the other one i figured i could actually figure out so i want to look at the code there a little um whereas on on one of those fancy ones like i just i'm amazed and then i can't we can't do much else um a 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 um 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 projector i'm guessing it's that i can't say the word but i saw 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 ah i keep forgetting to look at who made them this is by jamie coulter colte i don't know where you're from if you're in this jamie jamie's not very french cool coulter colte jamie hat's 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 um oh cool i like that the but when i was a kid adapts were the coolest right i love love love them um i remember the first time i saw episode five and i was like wow uh really nice i mean i love this style like the vectory style going on here but just like this is css only right so it's not an svg coming in um 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 in to 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 um 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 is crazy cool really really awesome i like that a lot and just the overall style of this is is really good and this is by ramsay's i'm guessing ramsay's 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 what reset i can't go down yeah okay okay i was able to like lose my mind if this had any other interactivity and i could like switch months and stuff i would 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 um 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 um 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 um yeah super awesome and you can do it backwards too and it works it's cool that you can do it backwards right because you know that's one of those things that happens sometimes people don't really you're you're putting it together and then you forget that people might click the wrong way around um so it's kind of cool that it can work either way ah love it that's by david kushid khorshad david corsin original shot oh is this from um 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 iron 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 what that is so cool this is the type of stuff that like people say like uh it's a little bit like emmett's 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 like there's 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 um 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 a css people say like i know what i'm doing with css i know how to make layouts with css uh and do typography with css and do that stuff like this is 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 that would 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 kyle it was a lot of fun we timed ourselves a bit of a competition i think you'd really like it if you like 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 corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 902,613

Rating: 4.941009 out of 5

Keywords: HTML, CSS, codepen, css only, css-only, front-end dev reacts, mind-blowing Codepens, impressive front-end, how do they do that, reaction video, reaction

Id: 2B5rbsOoIUE

Length: 21min 25sec (1285 seconds)

Published: Fri Apr 02 2021