Front-end dev reacts to amazing CSS-only Codepens

Key Takeaways

hello my friends and friends and welcome back to the channel if you're new here my name is kevin and normally i'm here to help you fall in love with css and if not fall in love with it at least be a little bit less frustrated by it but today it's going to be a little bit different because we're just going to be trying to be amazed by css as much as possible and even though i write css all day long every day i i'm still amazed at some of the incredible and creative things that other people can do with it that i have never even dreamed of doing and i want to go see what some of these amazing and incredible things are and i want you to join in that ride with me so let's go and dive into codepen and see what we can find all right so here we are in codepen and let's come up here and write css only just like we did last time and see what magic we can find uh i think the early part here we might see some repetition because we're on popularity so yeah we've seen some of these so let me just scroll through this a little bit all right yeah there's the last one we saw which was incredible so we should start seeing some new stuff now that's super cute nice little eevee there by david um 3d effect on hover css only i'm curious we'll open that up and check it out um hover me how do you do that with only css i'm not going to look at this code i don't know that's pretty cool and it looks like that's pretty cool um we're not going to dive too oh so they're using hamlet here to loop through so i think there's just like one second we're gonna see really fast uh and there should be like a loop somewhere in here i'm guessing yes there's like a million cells or something let's just do a star outline uh one pixel solid red ah okay so there we go so there's all these different cells and then based on which one you're hovering on it changes that's cool so then it's depending on which cell you're so that's why like anywhere within here it doesn't move it's only so there's like i guess you could have more cells and make that a bit that's really cool though i really like that that's super clever uh to do something like that and it looks really good is there even like a lighting change on there if it isn't subtle maybe i'm imagining it but whatever i think that's awesome that's by vincent durant wow that's really cool really really clever i love these these clever solutions i'm happy i clicked on that one all right let's go see what else we can find free radicals that looks pretty wild let's go check that one out this is by noah blonde nice that's beautiful that's so nice how that css no javascript that's cool i mean i guess it's just looped through animations different speeds for the different sizes and there's again some hammel and some um sass here just so you don't have to write it all out you can do some loops and do some fun stuff to to get things you know a write a lot less code to pull it off but wow um i'm not even going to try and figure out the math they did on this one but super pretty that's so cool you just look at that for a long time really really nice and definitely the colors i mean are beautiful the shading on everything is really beautiful and also just like the the speed everything about it i don't know i'm just really really cool i love that a lot that's really really nice um i didn't if i didn't mention it before just so you know that i will keep the um the links to all these will be down below if you want to check them out on your own oh i see two here that i definitely want to check out so let's open both those up um so this first one's by alberto hearts heartset i'm sorry if i'm butching your name awesome 3d goodness going on here uh yeah that's just cool um you can see there's nothing in the javascript really really cool um the shadow even on the ground is just the cherry on the cake for that one so nice and as we saw so i have a bit of an idea of how this is done which is exciting um yeah just because of that when i had amit sheen on with me and we built a 3d cube with a bouncing ball and stuff it was really really cool so it sort of gives me an idea of how this is being done but it doesn't make it any less impressive the animations are really nice too the way it sort of has that like and all the different there's so many different animations happening here it's really cool nice job alberto really really nice and next up was this other one that look cool which is this oh look at the lighting on that is that on hover does it does it change oh that's slick the lighting on there the shadow on the ground and now that i do know how it's sort of done like that shadow is not something that's easy to be done um at all because you're just sort of animating that separate from the card so that's really nice that the lighting on there that's shifting around as it happens i'm impressed that's by ben evans really nice really nice i love it there's a little like glitch there at the beginning of the hover so i'm not sure why but it doesn't matter because it's just too awesome really really cool the fact that this is css only two is wild right they have all the 3js and all these other things that obviously they add another element to it maybe we could check out some 3.js things in another video like this one day but just this css only stuff like some of this things people can do is just incredible anytime there's 3d in the name i just feel like clicking on it uh change view let's go to the editor view so this is so steps click to toggle the details view oh oh that's so and like even like the card's not flat like we have like a 3d on everything here that that's so satisfying all right so i didn't realize when i was first having fun with this but this does have a little bit of javascript going on here um but it just seems to be toggling classes basically right um so they're adding and removing the class when you click on the body or when you yeah when you click um that's how it's it's enabling it um yeah so it's a little bit of javascript here just to give us like a button type of thing i guess they could i wonder if they could have done that instead of doing it with that to go like pure css only if they could have used like them the checkbox hack or something but you know it is a hack uh so i get why they didn't bother with it but i wonder if that could have been a solution here just to say there's no javascript involved because this is just it's so nice and the fact that all of that the little tilting animation that everything coming through um it's just it's awesome so yeah still really good there steve um that's why steve gardner yeah it's still really really cool um yeah i'm impressed even though there's a little touch of javascript in there i'm leaving it in this video because i think it's awesome and it seems to be i've run out of css only searches here uh there's probably other keywords i could be using but i don't know what else to use so we're gonna we're gonna keep looking but i'm gonna see if i can find some things that um so this one looks cool but i have a feeling that's not only with css so we're gonna oh we got some still life i have to click when oh i saw another one there too this this is the art with css to me is is like i mean i guess they had a glass too they could be looking at because like this is definitely you know the way that light refracts around and stuff i don't know um this is by ben evans and just didn't have another one by ben evans whether we did or not this is incredible i have nothing else to say i could just sit there and marvel at that mona we're gonna get into some of this art stuff with css aren't we that's all with box shadows wow i'm just gonna scroll here for a second like i'm scrolling fast how many lines of box shadow is this this whole thing is box shadows holy moly it's just here i'm i it's not going to end it's never going to end that's like over 7000 lines of for a box shadow that's nuts jay salvat you have way more patience than i could ever have to do something like this but it's very very impressive that you're able to do it wow and just getting the colors and everything really really cool no i mean yeah it's amazing what you can do with box shadows they're so cool the stuff you can pull off with them we got some 3d text and you want to see how they did that oh look at the little animation oh that's so nice how do you do that is that with shadows and then but how do you do the 3d part of it that's the background i'm not going to dive in there's 3d like the animation name nice wow that's so wild wow that's just it looks so nice the font choices they're really nice too that just it's so nice i didn't know you could do that type of thing is it oh that's they have like a ton of elements that are okay let's just for fun make this one so now yeah it's basically flat at that point and then let's make it like this might take a while to render but let's try that with a thousand layers just for fun and i'm guessing that's gonna make it super thick huh that's interesting so they just sort of like piled a whole bunch of elements on top of each other to get that like 3d-ishness effect that's really interesting it doesn't look as good when it's too thick but yeah that's that's really nice that's one of the it's it's a bit simple well simple it's really cool but like the end result is simple um and it's just beautiful it just looks really really good that's by noah blonde we had another one by noah didn't no one knows what he's doing with css really really nice really really cool love that one you know we're gonna we're gonna finish this off by coming here and looking at this one by amit sheen because emmett's the one who inspired this entire series um i remember he shared this one with me a while ago and that's even though i've seen this one before unlike other ones i don't understand how you can do this with css [Laughter] this is just incredible this is with css only there's no javascript involved and it's just wild to me that you can create something like this um so yeah i think this is a nice one to take a look at and just marvel in the beauty of things that you can do with css only and if you if you want to know a little bit of how this was built emma did come on to my channel and we looked at how to do a really cool bouncing ball on a box that was rotating a little bit like this with a squishy ball so bouncing on it really cool it sort of can help you understand a little bit of how this stuff is made so if you want to check that out the video for it is right here for your viewing pleasure and with that a really big thank you to my supporters of awesome over on patreon zach and randy as well as all my other patrons for their monthly support and of course until next time don't forget to make your report on the internet just a little bit more awesome and and just look at you know if not just watch one of these loop around for a while because it's just super cool