Front-end dev reacts to mind-blowing Codepens
Вставка
- Опубліковано 17 чер 2024
- People say I'm the king, but like... yeah this stuff is insane 😅. Make sure you check out the codepens below so you can see them all in more detail, all so amazing!
The codepen that inspired this video: codepen.io/amit_sheen/full/ab...
Make sure to check out Amit Sheen's CodePen profile, I could do an entire video like that just looking at his stuff: codepen.io/amit_sheen (he's a good follow on Twitter as well: / amit_sheen )
🔗 The codepens I looked at:
CSS 3D Bending Effect - Page flip by Fabrizio Bianchi: codepen.io/_fbrz/pen/whxbF
CSS Only iPhone 6 Fabrizio Bianch: codepen.io/_fbrz/pen/vlrnd
Attempt #1 CSS3 Clickable Slider by John Motyl Jr: codepen.io/johnmotyljr/pen/cDpEH
CSS-only directionally aware hover by Giana: codepen.io/giana/pen/YZWjQy
Clip Clop Clippity Clop [CSS Only] (the horse) by Steve Gardner: codepen.io/ste-vg/pen/oKYjKV
STAR WARS AT-AT Walker: codepen.io/r4ms3s/details/gajVBG
CSS-only Calendar App Concept by David Khourshid: codepen.io/davidkpiano/pen/wB...
CSS only 3d Macbook Air: codepen.io/neoberg/details/istyp
Solar System Explorer in CSS only by Jamie Coulter: codepen.io/jcoulterdesign/pen...
CSS-Only Cube Pack by David Khourshid: codepen.io/davidkpiano/pen/aq...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
It's the first time I try something like this, so I'd love to know what you thought of the video. Do more like this? never again? A little bit of a different twist on it? Let me know!
4
Please don't fall into the 3rd person react video title cliché. We know who you are. :)
Haha, I wouldn't do it to all the time, but once every 2-3 months if people enjoy it 😊
Oh, the 3rd person thing, just realized what you meant, lol. We do it cause these reach a bigger audience than normal videos 😊
i would love to see your take on the cube thingy by David
And here i am trying to center a div :) life is great
true
@@5upl1an what about left:0; right:0 ?
@@MaximTsyba but then your container can't have width: auto. with left: 0; right: 0 it stretches it to 100% and not the content width.
@@5upl1an yeah, I guess it will work only for divs with fixed width
@@DerickMasai justify content:center:
Align-items:center;
Came for Motivation , left with depression
😂😂 - Don't worry, I can relate! haha.
i was about to comment the same thing...
PS: Just started learning CSS and this makes me to leave
I learned a lot ( as i thought ) .. and even decided to create a UA-cam channel xD, but after watching this i think i'll sell my laptop right now :(
@@shafi123 lol even experienced developers find this amazing. I'm 1 month in my journey and think this is pretty cool.
Worse case, just copy control and paste
For people who don't code. This is probably the equivalent of using Microsoft Word to edit photos instead of using photoshop.
Thanks dude😂
Lol😂
@@ashaguin95 there is a guy who can do that
More like using Paint to make Super Mario.
@@ashaguin95 No, it's more like using Scratch to do that. Unity is built to handle games and development on a large scale. Scratch is built for kids to create Flappy Bird clones, and not much else.
It's effectively like creating your own game engine, but you're running on Windows 95, capped at 30 FPS, can't edit graphics at runtime, and don't even have functions to use.
These are the kind of people who can hack NASA with pure HTML
CSS only dude,,,
CSS only...
@@IBITZEE 😂😂
This comment is made with CSS only
still couldn’t figure out why vertical-align:middle is not working
@Shuky Badeer i know broh😂 i intended it as a joke... coz their css skills are too good.. and they've done stuff i didn't expect css could do..
thus i said hacking nasa with pure html (which is again markup language and we 100% dont expect hacking to be done using it). I didn't think I'd have to explain this joke lol
I've been writing css for 17 years. I feel like a toddler after watching these.
wow
@Hand Grabbing Fruits haha
U havent been anything impressive for 17 years then
you’re probably not that intelligent, 2 years learning css and the horse animation is a walk in the park along with a bunch of 3d renders i can do in css
@@artemisfowl9002 I won't deny that fact ;)
If CSS is a sport, this would be the olympics.
Crazy and inspiring stuff!
You meant to say the Intergalactic Olympics.
no circulartext will be the olympics
You shouldn't be inspired by this ;-) its definitely the wrong way to do any of this.
Not only css all the programming languages are amazing
Seriously 😂❤
glad im a backend dev 😂
😂😂
same, mate. give me my Django back and please don't ever, ever ask me to even centre a div
@@0v3rwh3lm3d lol
@@0v3rwh3lm3d give it a class
now we need a codepen like website but for backend. that way we backend devs can be depressed at how amazing other genius backend devs and their backed-codepens are. 🤣
Seems like the people who used to paint photorealistic pictures in MSPaint have stepped up their game again.
Or the guy who paints in excel
@@vincentschulz9355 the guy from Great Big Story!
@@vincentschulz9355 😂😂
The horse one made my already small "knowledge of css", feel so insignificant 😭😭😭.
Haha, yeah it's really impressive
Its not hard to understand, it's just har to do and have patiency for it.
That one was basically easy. You just have to be able to watch a single blade of grass grow through its entire span. Then a hundred others after that, and boom! you're done. Don't get discouraged! Also, I would never do that. Props for doing it.
The horse animation is also worth mentioning because of the horse moving anatomy-wise. There are blockbuster animations and AAA games which completely screwed animating horses in move, and here we get this one CSS boi doing it at least right :D
The animation is basically directly traced from a real motion tracked profile video of a horse. Impressive nonetheless; or at least insightful to see how the geometric pieces are put together to facilitate the movement.
animated Box With CSS
ua-cam.com/video/gBmx3RmThDE/v-deo.html
Entered thinking I was a full-stack
Exited knowing I'm just a backend dev
LMAO makes me feel that way too and I'm stronger front-end haha
Dislikes are from bootstrap users 😂
Lol
nyahahaha.. there's only about 61 of them rn
I use flex layout but im still offended lool
Nothing wrong with bootstrap.
@@colbyboucher6391 does it really matter tho?
If you’re trying to whip up a 20 page website in 2 hours, trust me, bootstrap is an absolute lifesaver
It's made using css so advanced that it looks like sorcery.
boom! ZSJL reference ....
CSSS. Cascading Stylesheet Sorcery
I think they also used SCSS for refinery
animated Box With CSS
ua-cam.com/video/gBmx3RmThDE/v-deo.html
There are plenty of fish in the sea and I realized I am not even the average one after watching this.
This is like the top 0.01%, don't feel bad, lol
When you feel you are really suck at design and then you come across these designs that totally confirm your feeling. The level of creativity and effort is over 9000
that horse was the craziest CSS thing I have seen in my life. If you understand a bit of css you know that this is almost impossible to get done. To time the animations and all of those divs...totally sick
It's relaxing to watch too.
I get stuck at "how to center a div" and this just left me at awww
Even with JS all of these are super impressive
yeah actually. Doing this stuff with JS can't be easy at all. Easier doesn't mean easy.
Incredible creations! Not just next-level^2 techniques, but exceptionally polished quality.
Thank you Kevin!
The one about the Solar System blew my mind! Fantastic video!
Glad you liked it!
Thanks, Kevin, for your homage. These brilliant demos illustrate mind-bending patience and creativity wrapped in infinite layers of ability. They speak to the sublime potential for humanity.
"We have lots of other talented candidate that we think are more eligible for this job, thanks for applying"
Now I understand that there are too much talent out there and that's why people like me are still jobless.
The work showcased in this video is just insane. I run a digital solutions company and I've never seen anything like this.
It's funny how they all talk about these talented folks on interviews, and then you finally get a job with some of these companies and find that majority of peoeple you work with are just useless bastards. Some of them got job titles just to get rise as they know a guy who is menager or director and they used to work together in lower grade.
Don't be fooled, most people are just as clueless as you, they just fake it better. Happy hunting :)
I can relate 😂
Man i remember you having 20k subs, I was watching brewery website tutorials. Now I have dev job from 2 years, also thank to you and your tuts (was having portfolio done from one of your vids). Keep doing it, great job and nice to see how the channel grew up!
Meanwhile I can't even get a carousel working with bootstrap.
Very interesting video and I love how you show respect for their works. The horse is my favourite, its absolutely beautiful! Thinking of the countless combinations the author must have gone through...
That directional hover effect just blow my mind, it’s so clever.
Another Great Content as always, thanks for sharing it with us Kevin!
I've been so focused on C#, the past year, I've forgot how amazing an interesting CSS and front-end design and development is! Great video!
Someone can actually render the whole Avengers trilogy with just pure CSS
i really cant think how any thing like that is possible with just css. really mind blowing!
Thank you for being encouraging of creativity with CSS. Its really inspiring!
I am impressed!! I loved this vid... Keep on doing more like this. I really kind of like when you humbly say that the are smart...
Them: Gods of CSS
Me: Has a wildcard selector for the height at 100%.
Me: Doesn't know what this even means...
Okay, now I need to meet a Psychiatrist 🤯
Lol 😂 yes
Thank you for covering codepen. I use it a lot.
I enjoyed all your videos.
The best to you.🤠
I absolutely love watching you go through these.
You should definitely heart those you where amazed by. Just like I'm giving this video a thumbs up, it let's the creator know how many like their work 😁😉
5:52 One way to do the slider without having the problem with the history is to use radio buttons and then show a certain slide based on which radio button is selected.
Got that very idea just last week :D Radio inputs indeed make it very simple and elegant.
If you have selectors for each page (e.g. small placeholders under the carousel) then that makes sense. But with arrows - how would you do that? It's the same element and when you click it it would have to select a different radio button, so it won't be a simple label.
How can somebody have this level of patience! Absolutely stunning.
I came here for just a quick look after seeing the thumbnail and definitely thought there is no way I'm going to see a 21 minute long video. I can't believe I watched the whole thing. Your presentation was really good in addition to the codepens which is why I guess users stay watching the whole thing.
So glad that you enjoyed it!
Heartwarming to see that even seasoned developers may say :"How do you do that ?!?" 😃
animated Box With CSS
ua-cam.com/video/gBmx3RmThDE/v-deo.html
I didn’t think you could do much more than create rectangles in CSS…
Man, I thought round bordered rectangles where pinnacle of CSS shapes.....
these people were amazing with CSS stuff
I love how genuine you are.
The idea is great! Would like to see more like this one
Thank you for this video, it kinda makes me feel more normal, like I'm normal, for the most part, I am fairly confident with my CSS knowledge, and still I see some gurus, experts and such get amazed by someone else work just like I do. I also feel there is nothing wrong in not knowing everything even in your specific field.
Excellent! Bring us more! :)
They are all great and mindblowing.
Would live to create a portfolio that looks like the planet demo 😊
I've been obsessed with 3D CSS graphics ever since that old FPP shooter demo by Keith Clark from a few years back. It was insanely brilliant for the time. Now, with blend modes and filters, it could be expanded even further. Also, you're not limited to rectangles/cubes either. You can create triangles/trapeziuses with either CSS (add a thick border to narrow enough div, and make all but one side solid transparent; use different border widths for each side to manipulate angles) or SVG - and from there expand into pyramids, tetrahedrons, after relearning some of the trigonometry that you happily erased from your mind after highschool, spheres and toruses. There is a point, though, where you run into limitations of processing power. Basically, you won't be able to achiever anything more complex than mid-90's pre-3Dfx graphics. But there's still plenty of fun to be had if you stick to low poly.
The 3d page flip is done by taking dividing the graphic up into strips (or polygons) and repositioning the image in the background accordingly. The animation itself is fairly simple.
This is awesome. I've always loved working with CSS. :)
Thank you Kevin Powell for making this video. I am creating and experimenting similar kind of stuff in CSS Only. After watching this video, I am confident of my work. Thanks for your time. And Excellent work done by those CSS Developers that you mentioned in the video. It takes a whole lot of time and effort to create such creative work.
This is depressing. But still motivating.
Put aside the (CSS) knowledge, where do people find the time and patience to code such things?
Yeah, some of these are pretty big commitments for sure!
Many developers come home from work and spend hours deep into the night coding something cool. Even the most talented ones. ;)
This is my first time watching one of your vids, you remind me of Eric Rosen (chess youtuber) in your voice / demeanor, you're very calm, analytical, thoughtful, and casual.
Hey Kevin! I'm an italian subscriber who loves your video, so thank you for all you do and you did, that's really useful and you're really good in teaching and explaining
P.s. stupid thing, "Fabrizio Bianchi" is an italian name, and "chi" in the word "Bianchi" has the same pronunciation of "key" in english
we now need the cursed image of a bending effect on the iphone 6
This is crazy! Are there any great courses out there on how to learn this pure CSS 3D animation?
If there are, I don't know about them.
I'm actually planning to do a collab in the future with Amit, so I'll have an intro to this witchcraft on my channel in a few weeks 😊
@@KevinPowell YES!!! PLEASE DO!!! ❤️❤️❤️
@@KevinPowell I saw ur collab with Amit sheen... He is an amazing guy... he explained 3d perspective, lightings in css and other stuff so easily and in very simple terms... Same like you... You both are amazing Guru's.
Great video, would love to see more videos like this.
@Kevin Powell Not falling for your fake account 🤪
dude you have some great vides. Im subscribed to you channel. Thanks for teaching the world
I just wanna know "How Long" did it take for those guys to create the Cube or the Horse Animation
Horse would have been a good example for SVG animations actually. I mean it looks impressive, but it's basically a vector key frame animation, which used to be done in Flash.
code pen is a crazy place to see amazing artist mind blowing talents
I love seeing the possibilities that I never even contemplated!
I would like to invite my 2012 self to see this and just tell him it is going to be good for CSS 😆:😂
Haha, 2012-self would definitely think you were lying :P
And here I am.. finding some crash course to sail my CSS boat, while there are Sharks who are just playing in an ocean!!
Excellent video! I love watching you process how these stellar pages were built. The technical breakdown is cool, but I mostly appreciate how awestruck you are by these projects. It's inspiring to see the teachers you look up to--the people you assume to be "experts"--are okay saying they don't know how something works. I sympathize with folks in the comments who feel deflated seeing these expert designers' amazing creations, but it's videos like this that make me feel like I'm doing fine where I am. If the premier CSS UA-camr Kevin Powell is humbled by these projects, then I don't feel so bad when I don't totally understand them either.
I like this content. There are some coding concepts that are tricky to dedicate an entire video to, or that only come up in specific circumstances. Watching you break down content "in the wild" exposes me to some of the more esoteric CSS out there.
Hear hear :)
David Khourshid is amazing. He's doing an incredible job on the xstate library !
Not sure what css is or why this was in my recommended but good luck to the bois who are trying to improve
I'm curious how these CSS animations perform against an embedded blender animation. Naturally, I'm inclined to think CSS-only has to be much smaller but possibly a tiny bit harder on the GPU in order to render.
The only reaction video that I liked on the entire internet
Everyone of these looks so fun
I am gonna definitely try them someday.
And here I struggle to make website responsive 😂
Thank you
Doing this without javascript reminds me of back 10 years ago when people would level up a character to 60 in World of Warcraft without using a weapon.... just to see if they could do it...
Didn't know these amazing things could be done in js let alone css my mind is BLOWN AWAY
For the directional hover effect, try adding full-width div at the top and bottom of the image area with hover effect same as that in the CSS. Just a thought to make it possible to add directional effect in the top and bottom row as well. The additional divs are to be transparent for it to seem seamless.
Its sad to realise how most (non-webdesign related) people wouldnt think anything fancy about these animations if they would be used... These things are absolutely stunning
css-only is the biggest flex
Oh man, at Warner Bros Discovery, i used css only carousels a lot. I didn't even see examples back when i did it, but yeah, i built it exactly like this, with different radio labels for each slide. When doing ads where you know exactly how many slides you'll have, and with sass loops to the rescue, it's super easy to do.
6:39 Looks like it is paying homage to the first recognized gif which was as a grainy, black/white video loop of a horse seemingly running on place.
Probably the best reason why I don't have a look at others' work on Codepen (totally destroys my ego - Impostor syndrome)
Makes me feel better that even Kevin is blown away and has no idea how most of these are done.
Thank you for doing this, man. I'm just learning CSS and this BLEW my entire mind.
I love the cube soft shadow part. It's just amazing.
@Kevin Powell are you telling about online trading ?
that's not me, someone's trying to scam and impersonating me :\
@@KevinPowell oh that's so bad Kevin. Hope u keep your account safe. Scamming people might block your UA-cam account.
These things look phenomenal. I wonder why when someone make such a miraculous thing would share the source code with others?! People could steal your craft without even mentioning the creators name.
To all the people, who say html css is childs play, even a kid can do it, see this and try to design anything like this
How do these people do it. Effing Genius, totally speechless. I struggle with even basic CSS. These people are fucking legends.
Today we saw books, iphones horses all brought to life with css. And still the directional awareness was the ne to get the most attention it was so cool, simple elegant yet amazing. Cool stuff
I feel reassured that even the king of CSS doesn't know how some of these animations are made
WOW who ever built that ball bouncing off of those tiles is extremely skilled with CSS. I'm only 14.
I’m gonna use some of this for my digital design 1 high school html/css class (thank you sm)
Those are astounding. Give people tools and they will make amazing things.
And I was proud of myself when I figured out how "display:flex" works... XD
no, But seriously, How does display:flex really work?
Amazing, I wanna achieve this level of creativity
My word the solar system one was epic! I’m guessing the dev did use images for the planet textures as coding out all that just in css would take a lifetime but even so, it was incredible 👏👏👏👏👏
When css king said"how this is possible?"
Me.....l
Kevin please tell us your secret for happiness... it's radiating!
and great vid!
Haha, thanks. I just don't pay attention to the haters and the negative energy out there. So many people get hung up on that stuff. Focus on the positive and the stuff that you enjoy :)
I would love to see a deep dive video on a couple of these!
Mind blown! Kevin...new UA-cam genre ... CSS work reactions
When a pro has no idea how to do something i feel a little bit better