16:38 Thanks for covering my Rubik's cube :). You can actually also rotate every layer with the keys given in the info tab (top left) and do much more, for example t for the top layer, l for the left layer etc. and X for scrambling, U for resetting.
Fun to see you enjoying yourself hovering 3D petals. But, no blendmodes going on there. Plain manipulation of HSLA() alpha channel of the BG/FG colors and a dropbox filter for the shadows. The whole thing started out as a 2D 'text on a circle' exercise using CSS custom variables: using the font size and the number of characters it determines the minimum radius required to display the text without overlapping characters. All math is done in CSS calc(). The range sliders of V2 only manipulate the values of the CSS custom variables (so you don't have to do that manually). Extras: the checkboxes show how to enable/disable an entire block with just a one-liner JS (function FP_ToggleStyleById), field values handling JS class, Google Material FAB (floating action button) knock-off, recyclable code, extensive comments in CSS explaining why and how it's done. Thanks for the mention!
I'm so happy to see the awesome people who created these down in the comments too. Something about that feels really nice. Kudos to all of you. These are so inspiring!
Thank you for featuring my projects at 17:35 and 1:07:20 ! (even though the names got kinda mixed up) The shape at the left is actually supposed to be a tetrahedron, but for the shape on the right I don't know how its called xD And i also loved seeing the projects of everyone else in this community, especially the interesting shapes that Anna tutor made
Oh my goodness, all of them are so freaking cool!! Alvaro's gazebo, Shahriar's guitar, Adam's snacss truck, Benjamin's 3D calculator and everyone else's 3D goodies, awesome work XD I'm also glad you got some giggles outta ma face and goofy doggie @ 1:04:56 that made my day muhohohoho, thank you!
1:02:05 That pumpkin's mine - and indeed it took some blood, sweat, and a few new gray hairs :D Especially since the principal work on it was done on the two last days of the challenge, culminating in a 14-hour marathon of last-minute additions that I'd hesitated about due to time-constraints. Because, hey, it'd be cooler with a carved face. And another face on the back, right? Et cetera ;) Right now I'm actually working on a version 2.0 of it - with better optimization, less clutter, and animated imitation of lighting/shading.
Kevin, could I make a recommendation? That bar of color that ends in red across the bottom of your thumbnail for this video made me think that I had already watched this video and I nearly skipped it. Perhaps you may not wish to use red for a bar at the bottom on thumbnails in the future as it may cause a drop in initial engagement during the critical first few days.
Kevin, it's time for an intervention... I think you have a tab addiction and you need to google help. 😂🤣 Some of these are REALY cool! That slider with the rolling moon can benefit from fading to a sun and back and function as a dark mode slider 😍
I face some problem with position I tried so much to figure it out I don't know why siblings div act very different way way 1 get absolute positive and another one relative Absolute one goes down and relative goes up why?? Is there any way to make it understandable
100+ tabs of 3D CSS creations: 😊
Kevin's RAM: 😢
😂😂 I was honestly wondering if chrome was going to crash, lol
16:38 Thanks for covering my Rubik's cube :). You can actually also rotate every layer with the keys given in the info tab (top left) and do much more, for example t for the top layer, l for the left layer etc. and X for scrambling, U for resetting.
Oh, I wish I'd realized that! That's awesome
Thanks for featuring my PokeDex sir Kevin. That is the first thing I did after learning 3D css from you. 1:00 - 1:28
35:33 Its Mine!!! Freaking out! Thank you for including I am learning so it a bit low-key
Congrats
Of course! Nothing wrong with low-key, it's all about making the effort and learning more :D
Fun to see you enjoying yourself hovering 3D petals. But, no blendmodes going on there. Plain manipulation of HSLA() alpha channel of the BG/FG colors and a dropbox filter for the shadows. The whole thing started out as a 2D 'text on a circle' exercise using CSS custom variables: using the font size and the number of characters it determines the minimum radius required to display the text without overlapping characters. All math is done in CSS calc().
The range sliders of V2 only manipulate the values of the CSS custom variables (so you don't have to do that manually).
Extras: the checkboxes show how to enable/disable an entire block with just a one-liner JS (function FP_ToggleStyleById), field values handling JS class, Google Material FAB (floating action button) knock-off, recyclable code, extensive comments in CSS explaining why and how it's done.
Thanks for the mention!
I'm so happy to see the awesome people who created these down in the comments too. Something about that feels really nice. Kudos to all of you. These are so inspiring!
Thank you for featuring my projects at 17:35 and 1:07:20 ! (even though the names got kinda mixed up)
The shape at the left is actually supposed to be a tetrahedron, but for the shape on the right I don't know how its called xD
And i also loved seeing the projects of everyone else in this community, especially the interesting shapes that Anna tutor made
Oh no, I'm sorry for mixing up the names! And awesome work!
How cool! This video alone will probably push the world of 3d interfaces forward. I got really inspired of the possibilities. 😊
Nice, happy that you enjoyed it!
Wow.after watching this. I am convinced that Metaverse can be implemented by 3D css.
I hope you make more of these videos, they are my favorite. I’m sure you will get tons more submissions
Oh my goodness, all of them are so freaking cool!! Alvaro's gazebo, Shahriar's guitar, Adam's snacss truck, Benjamin's 3D calculator and everyone else's 3D goodies, awesome work XD I'm also glad you got some giggles outta ma face and goofy doggie @ 1:04:56 that made my day muhohohoho, thank you!
Thank you! I'm Benjamin who made the CSS calculator.
@@BenjaminAster Heya, nice work! I'm absolutely mind blown by the complex counters logic you created!
1:02:05 That pumpkin's mine - and indeed it took some blood, sweat, and a few new gray hairs :D Especially since the principal work on it was done on the two last days of the challenge, culminating in a 14-hour marathon of last-minute additions that I'd hesitated about due to time-constraints. Because, hey, it'd be cooler with a carved face. And another face on the back, right? Et cetera ;) Right now I'm actually working on a version 2.0 of it - with better optimization, less clutter, and animated imitation of lighting/shading.
That sounds really cool! Love to see the update
Great submissions! I got lots of inspiration! Thanks to all the people who submitted, and to you for showcasing them!
The duracel battery guy, I wonder if he opened up his junk drawer looked at the batter and thought "huh, I got an idea."
26:27 , Looks like my project made its way in . Big thanks Kevin
My Pc seeing those much of tabs in chrome: 🥵
I wasn't sure if it would make it 😂
WOW I feel like those people are the real kings/queens of CSS! Better step your game up Kev! 😉
The old school running horse animation thing is called a zoetrope
The accordion effect would be really cool with accordion sounds paired with it. Could make an interactive sound board on a portfolio
18:39 - I knew I should have included instructions. 🤦♂️ Keep the mouse over the cube, don't just move it over and out immediately. :)
I think the game you might be thinking of at 17:20 is Q*bert. Released in 1982.
Every youtuber's dream having such talented followers
Hey Kevin! I loved that challange. Could you make more css challanges? 😀
The black and white one with grid that looks like girders in the fog is a recreation of "Cubic Space Division" by M.C. Escher.
All warm and fuzzy inside now.
For a next challenge, maybe my obsession: interactivity. Do as much as possible without, or with minimal javascript.
Excellent video, you have a very talented community.
The video we were all waiting for 😁
Kevin, can you make more GSAP Greensock animation videos. 🙏🏻
Me watching this 3d creations :
how they doing that?!!
I can't even align a div in the middle yet 🤣
Cool 3D models, like
40:28 card from Pete Where can I find more information on this ? Thanks you Kevin Powell
29:28 Woohoo 🎉 I'm so proud of my CSS calculator! Unfortunately though, you covered the results with your face cam.
Sorry about that! I'm insanely impressed by how you managed to do that one though. Very amazing work.
Definitely one of the most impressive css projects, the complexity of the algorithm all of that it's awesome
Oh em gee this is like an hour and ten minutes, this is like, plan a LAN party-worth :)
Impressive. Very nice. ...now let's see Paul Allen's 3D css creations.
Best parts imho
3:56
4:41
6:05
8:15
8:38
10:01
40:28
40:37
41:19
Amazing examples! I could take a crapload of knowledge from the repos!
But: The Designs made with GSAP or D3.js beolng to another video IMHO
Kevin, what do you think of dApps and web 3.0?
Very beautiful
Kevin, could I make a recommendation? That bar of color that ends in red across the bottom of your thumbnail for this video made me think that I had already watched this video and I nearly skipped it. Perhaps you may not wish to use red for a bar at the bottom on thumbnails in the future as it may cause a drop in initial engagement during the critical first few days.
Oh, I never thought of that, thanks! I'll update it now :)
I: think that i know css very well.
Other people in this time:
This is so cool
Kevin, it's time for an intervention... I think you have a tab addiction and you need to google help. 😂🤣
Some of these are REALY cool!
That slider with the rolling moon can benefit from fading to a sun and back and function as a dark mode slider 😍
Wasn't sure if my computer was going to handle all those tabs, but it managed, lol.
@@KevinPowell it's been a while since I've seen names next to the favicons on 2 browser windows haha but at least mine are not ALLLLL the same 😂😂😂😂
Never knew Ricardo was also a web dev
There should be a 3D challenge where you can only use Codepen on your mobile. Some of these would take about a month 😂
nft in 3d with help of css wow
Bumbed I missed the submission deadline :( Middle of very busy term.
i am really interested in learning on how to do that monopoly one. Look almost impossible
47:41 is my Rubic Cube so glad i participated
Sir Please do Angular Class Projects because i got a task Angular Task...I cant done yet ....
I face some problem with position I tried so much to figure it out
I don't know why siblings div act very different way way 1 get absolute positive and another one relative
Absolute one goes down and relative goes up why??
Is there any way to make it understandable
Hi Kevin, how do you make your css comment autocomplete when you type /* ?
Is 3D something you would avoid on mobile devices entirely? Can today’s smartphones handle some 3d effects performancewise?
Hi Kevin what is your opinion about Tailwind CSS? Is overcome the other CSS frameworks like Bootstrap or Material Ul
Q-bert
30:40
qbert
Omg so proud @jihadkurdo ❤ 💙