Тёмный

3D CSS - lighting, animations, and more! 

Kevin Powell
Подписаться 919 тыс.
Просмотров 404 тыс.
50% 1

Having no idea how to do this myself, Amit Sheen was awesome enough to jump in and show me how it's done.
You can find more from Amit Sheen here:
✅ His website: amitsh.com/
✅ Twitter: / amit_sheen
✅ Codepen: codepen.io/amit_sheen
🔗 Links
The CSS Tricks article that Amit mentioned, How CSS Perspective Works: css-tricks.com/how-css-perspe...
⌚ Timestamps
00:00 - Introduction
01:21 - Basic Set up
09:04 - Giving the scene perspective
12:28 - Making the cube
22:35 - Making the ball 3D and adding the shadow
27:56 - Rotating the scene
31:34 - Making the ball bounce
37:06 - Making the cube squish as the ball lands on it
#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
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
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!

Опубликовано:

 

25 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 553   
@zachjensz
@zachjensz 3 года назад
Ohhhh, so this is that whole 'box model' thing in CSS 😜
@enthusefreelancer3440
@enthusefreelancer3440 3 года назад
:)
@endenman1872
@endenman1872 2 года назад
I was like a noob to css and when i found this channel, I'm like i eat css for breakfast!
@dilanirupasinghe3056
@dilanirupasinghe3056 2 года назад
@@endenman1872 no he eat css for brekfast lol
@walkergms3546
@walkergms3546 2 года назад
i rather say 'cube model'
@sebastiangudino9377
@sebastiangudino9377 2 года назад
This is the most clever comment ever, you win dude
@sadhlife
@sadhlife 3 года назад
Little tip: In physics class we're taught that the equation for the distance traveled by a falling ball is a quadratic equation. Which is why making the timing functions ease-in-quad and ease-out-quad would actually make it even more realistic feeling.
@sadhlife
@sadhlife 3 года назад
ease-in-quad = cubic-bezier(0.11, 0, 0.5, 0); ease-out-quad = cubic-bezier(0.5, 1, 0.89, 1);
@KennyCarter90
@KennyCarter90 3 года назад
I really like the format of this video, it's like two wizards teaching each other their tricks 🧙🏻‍♂️
@remkospaans
@remkospaans 3 года назад
The reverse animation on the ball 😱. I can’t stop 👀 at it.
@MerthanMerter
@MerthanMerter 3 года назад
like a boss
@frankcastle3288
@frankcastle3288 2 года назад
I wonder if removing the PRESERVE_3D would've also done the trick?
@naveenramkumar6123
@naveenramkumar6123 2 года назад
i dont understand that part at all...why does it have to be reverse?
@abdulsalphan
@abdulsalphan 2 года назад
@@naveenramkumar6123 The whole scene rotates at one direction, including the circle, which makes it look as a circle and not a sphere. When you reverse the rotation of the circle alone, it nullifies the rotation it gets from the whole scene. So, it basically doesn't rotate and gives us an impression that it is a sphere and not a 2D circle.
@abdulsalphan
@abdulsalphan 2 года назад
@@frankcastle3288 I thought if we could nail the circle from rotating, could do the trick.
@pablowbk
@pablowbk 3 года назад
Amit showing the crazy there-is-no-spoon trick on the "ball", Keving smiling "that makes me happy". I love this channel.
@Morrile1
@Morrile1 3 года назад
Mind boggling CSS. Amit is much like Kevin, makes things look so easy whilst encouraging a desire to know more, love it 😎
@sivanandhini9943
@sivanandhini9943 2 года назад
Aaa
@sivanandhini9943
@sivanandhini9943 2 года назад
Aaaaaaaaaaaaaaààaàaààaaàa.
@folkote
@folkote Год назад
Exactly!!!
@carloseduardoramos9646
@carloseduardoramos9646 Год назад
I started my studies in CSS a month ago. My mind blowed just now, because all that i've heard untill yesterday was something like "CSS is for styles, and JS for add actions". Now im being introduced for a huge new world, full of possibilitys... the animations. Thank u guys for this pleasant start.
@abhyudaytripathi
@abhyudaytripathi 3 года назад
I was a Backend Developer, but now after discovering your channel, I now don't hate CSS (at least)
@orcave8802
@orcave8802 2 года назад
Knowing backend without mastering front end is useless atleast for me
@myname-mz3lo
@myname-mz3lo 2 года назад
front end dev can upload a site to cloud services and be ok . backend dev needs front end dev . soon only front end and cloud services will be there
@patfix
@patfix 2 года назад
Very relatable.
@connoisseurofcookies2047
@connoisseurofcookies2047 2 года назад
Difficult to create an impressive portfolio with zero front-end, especially if you're a junior dev.
@kelvinsmith4894
@kelvinsmith4894 3 года назад
Lol at that when he tricked my perspective of the ball with reverse rotation! This guy a legend! Shows he thinks rather than just code!😂
@davidcordero9864
@davidcordero9864 3 года назад
Next level CSS. Kevin you looked inspired man! Can't wait to see where you take this, thanks for this fantastic video. Amit showed what a pro he is and a great teacher, bravo!
@thecoderabbi
@thecoderabbi 2 года назад
This is so so so amazing! Thanks so much Kevin. I love the fact that you featured this 3D-CSS wizard, Love your enthusiasm in wanting to learn something new. Love that you're so much concerned about making CSS so much easier than it seem. I can't wait to see how easier you can make this to be when applying it to real web pages!!
@bw-dude
@bw-dude 3 года назад
Hey Kevin, I watched a lot of your videos and learned something in each of them. But this one was a class of its own, absolutely mindboggling what Amit was doing. I could tell you felt the same way sometimes. Thank you!
@EddyDarell
@EddyDarell 2 года назад
This tutorial is actually amazing. The ball animation and shadow tricks are just so simple yet yield so good results that I'm actually blown away. I'd have never thought of that. Thank you
@d.l.3807
@d.l.3807 3 года назад
Just incredible. 50% of the video was just learning new stuff and I would say, I know quite something about CSS. Thanks for your tutorial!
@antio1753
@antio1753 3 года назад
YEAAAAAAAAAAAAHHHHHHHHHH I LOVE 3d with css and RU-vid has not enough video (or well structured) about it... PLEASE Kevin make a series for 3d with Css and of course with libraries like 3js.... I am SURE that people would love them...especially with YOUR teaching style -With love, one of your students !
@lepsycho3691
@lepsycho3691 3 года назад
Man that was amazing! Thank you for bringing Amit to show his skills, very inspiring!
@haythamkenway1561
@haythamkenway1561 3 года назад
oh my goodness ! you did it ! I was waiting for animation and you brought even more , thank you kevin You have my word 🙏❤
@fanzheng1412
@fanzheng1412 2 года назад
It really makes a difference when you find out something this amazing is something you can do yourself. This actually makes me really want to learn webgl stuff, since animation with CSS takes too much CPU. This is a really inspiring video.
@edwardholmes91
@edwardholmes91 3 года назад
Wow, that's incredible, I never knew you could create such realistic effects using CSS. Amit's teaching style and way of explaining important concepts is fantastic. He's right, light and shade play such an important role in making things look realistic. I'm in awe, my CSS is very much armature by comparison but it's great to see what's possible!
@ThePete98
@ThePete98 3 года назад
I always struggled with CSS as I mostly did back end dev, only working on styling when absolutely necessary and only enough to make things look reasonable, what I called functional not pretty. So inspiring to watch your videos and to get such insight. Fantastic
@JoeL-zw2me
@JoeL-zw2me 3 года назад
Really cool to see how something like this is made. Like you said not as complex as you’d think but just knowing how and what to do to accomplish it is the impressive part
@jimiscott
@jimiscott 3 года назад
This is totally amazing! Such a clear demonstration....so many concepts covered. Well done!
@MyUbuntuVids
@MyUbuntuVids 3 года назад
Thank you, Kevin and Amit. This was a fantastic tutorial! You've whetted my appetite for CSS animation.
@sldentertainments9842
@sldentertainments9842 2 года назад
Never seen such a great video on CSS and never knew before that we can do so much things with just CSS!!! You guys are out of the world!! Thanks for amazing video🙏🙏
@facundocorradini
@facundocorradini 3 года назад
So awesome! funny how your face (and mine) clearly reflected the excitement throughout the vid. I mean, CSS can feel somewhat magical at times, but in this one, Amit had us all amazed as if we were children watching an actual magician
@Goloso333
@Goloso333 3 года назад
This stuff is fascinating and even though I haven't understood most of it because of the actual knowledge of 3D I am still very interested in learning more. Thank you for taking the time in sharing all this information. I am now a new follower of Amit Sheen. Thank you.
@josvelema2362
@josvelema2362 3 года назад
That trick with the alpha on a hex value blew my mind ! Also this 3DCSS is not that hard to understand , it's really intuitive.
@dave6012
@dave6012 3 года назад
Careful. Safari calculates the Z-axis differently! I had a perfectly working 3d carousel that completely broke. Had to refactor the whole thing to work in safari as well as the other browsers.
@willjohnson4579
@willjohnson4579 3 года назад
@@dave6012 oh no, is it time to go to war for browser consistency again?
@dave6012
@dave6012 3 года назад
@@willjohnson4579 Gondor calls for aid!
@cephasmutua8639
@cephasmutua8639 3 года назад
Wow! Will have to set the 3D somewhere in my site. Thank you for the awesome teaching and thank you for inviting Amit.
@dgtlbby
@dgtlbby 2 года назад
I'm new in the coding world and I can't believe all the free sources and the amount of amazing people sharing what they know, thank you so much Kevin and Amit!!
@astrit
@astrit 3 года назад
As always amazing. And this collaboration makes it even more interesting. Keep it up.
@mritz579
@mritz579 2 года назад
This was amazing man! That reverse animation on the ball got me. So simple but soooooo effective. Thank you for all your videos. You definitely inspire me to create!
@elvisjames
@elvisjames 3 года назад
Your channel is a godsend. Brought back some inspiration to me, and the clean and concise delivery of the content is EVERYTHING. The thought process to use the knowledge bis what gets me excited Great content. Thanks.
@holo23
@holo23 3 года назад
I've literally been binging your videos since I find them so enjoyable
@technikhil314
@technikhil314 3 года назад
I will have to watch it at least 3-4 times to understand it fully. Great work.
@pavanrao2965
@pavanrao2965 3 года назад
This video is super informative and absolutely stunning !!! ❤️ amazing content 👍 loved the animations especially the reverse animation on the ball 😍
@wallacce
@wallacce 3 года назад
Guys, you absolutely blew my mind. It's awesome! Thanks!
@RunOs3
@RunOs3 2 года назад
CSS has always been an enigma to me. Amit is awesome and there are few like him out there in the front end world.
@aCitizenJOSerased
@aCitizenJOSerased 3 года назад
Immense collaboration! Fantastic video. Makes you break down thing in your mind in a lot of new ways.
@burhanahmed8767
@burhanahmed8767 2 года назад
Your Studio lighting is the best, I watched this video on a big screen, & seemed like you were sitting right before me.
@guntherschabus3458
@guntherschabus3458 3 года назад
awesome guys! Idea, collaboration and deliverable. Really awesome 👍
@glitchpixels5303
@glitchpixels5303 3 года назад
Insane I'm in love with CSS now Hat's off to the legend Amit Sheen and ton of love for Kevin Powell for sharing this with us
@funnybones1803
@funnybones1803 3 года назад
I just had this zen moment while watching. You guys are just great!
@ratias0
@ratias0 3 года назад
Thank you very much for this video. You both can make people fall in love with CSS. I'd only add an animation to make the ball darker when it bounces against the cube
@lemondrake0342
@lemondrake0342 3 года назад
Amazing, amazing stuff! Thanks so much, both of you! Learned a lot!
@swimmyJones
@swimmyJones 2 года назад
I've been doing straight up CSS for about a year now (getting away from Bootstrap when possible) and this video makes me feel like a beginner again lol.
@thydevdom
@thydevdom 2 года назад
The counter animation of the ball is badass! I would have never thought to do such a simple thing. lol
@OrvilleChomer
@OrvilleChomer 2 года назад
I just saw this. It was amazing! What was really cool is that I actually understood it! I was also encouraged that someone like Amit struggled with using the new CSS color syntax. If HE could struggle with that... helps alleviate some 'imposter syndrome!' Thanks for this video
@nullpointer3860
@nullpointer3860 3 года назад
I have seen a couple of animations like this in css but honestly for most that I tray to understand the code I cannot, but this guy, wow just mind blowing...
@dipanjandeb5245
@dipanjandeb5245 2 года назад
Absolutely mind blown!! Take a bow!
@rakeshpk4991
@rakeshpk4991 3 года назад
Thanks for inviting an amazing artist.
@emashno5
@emashno5 2 года назад
I just love how people are seeing that css and css3 three can produce insane stuff nice work Amit and Kevin
@prasathj7436
@prasathj7436 10 месяцев назад
In just one word, Amazing !!!
@PhotographyAdventure
@PhotographyAdventure 4 месяца назад
This was so inspirational, amazing walkthrough! 🙏🏼
@marianarlt
@marianarlt 3 года назад
Very cool to share this with everyone. Thanks for the effort! Extremely clever way to build a scenery in CSS and excellent attention to detail! I suppose most people know how positioning works, but this really shows how messed up CSS can be: "We give this element position: absolute, because it needs to be relative to the parent". Hahaha.
@Voughnfox
@Voughnfox 3 года назад
AWESOME! Superb talent! thank you Amit Sheen and Kevin Powell.
@maclaurent1147
@maclaurent1147 2 года назад
Thank you for all the videos, you have really made me fall in love with CSS thank you so much and am learning alot. Keep up the gr8t work.
@8koi245
@8koi245 2 года назад
This is so cool!!! I'm so glad I decided to work on this
@codaniel
@codaniel 2 года назад
Very interesting, I love the collaboration.
@Viktor920
@Viktor920 Год назад
That was super fun and super useful, thank you!
@tejasrao3559
@tejasrao3559 3 года назад
I love CSS and started loving it more after seeing this video, your channel us amazing!
@sebap_xc
@sebap_xc 2 года назад
Thanks both of you for this great video!
@peternicholson26
@peternicholson26 2 года назад
Even the simplicity of the chessboard style floor was epicly simple. Genius.
@JBWEBDEVELOPER
@JBWEBDEVELOPER 3 года назад
Man am just blown away with the 3d, its really amazing
@willjohnson4579
@willjohnson4579 3 года назад
and just like that i have a better grasp of 3D CSS, what an amazing 3D animation lesson, and in just 45 minutes!
@vin-kry
@vin-kry 3 года назад
Superb! I was scrolling for such animation tutorial and suddenly a notification popped up from this Channel.
@ashleyhoward14
@ashleyhoward14 3 года назад
I love your collabs! They're so interesting
@NirangaDeSilva
@NirangaDeSilva 3 года назад
Mind Blown..!!! 🤯🤯🤯🤯 Thanks a lot Kevin & Amit..!! Cheers..!!
@pcartisan2721
@pcartisan2721 3 года назад
AWESOME! Thank you two.
@mansukong
@mansukong 3 года назад
Is this possible? Wow! That's amazing!
@wanyi8761
@wanyi8761 3 года назад
This is literally mind blowing
@gowravkumar7251
@gowravkumar7251 3 года назад
This was so awesome. Loved it 😍😍
@mhyeganeh
@mhyeganeh 3 года назад
Awesome Collaboration! 👍👏 So much new stuff to learn. Thx
@NoztrozeR
@NoztrozeR Год назад
This was fantastic. I really hope you can get Amit back for some more CSS magic in the future!
@stevebob240
@stevebob240 2 года назад
That was awesome, very informative. I'd love to see Amit on again.
@upl1nk.v01d2
@upl1nk.v01d2 2 года назад
Amit is legendary! Thanks for sharing this!!
@crowebro9581
@crowebro9581 2 года назад
Wow! This was amazing to watch and learn. I am eager to try this.
@ir1n3l
@ir1n3l 2 года назад
I discovered your channel today, and 😮 wow, just blow my mind. I would like to see more of this video of people who work together. This will take me a year to recreate it 😅😅 awesome job, an awesome video awesome awesome awesome work. Love it!
@alykane6347
@alykane6347 2 года назад
We're also happy, Kevin! Idid some 3D design with cinema 4D but I couldn't believe it possible with css. Great! Great! Great!
@tanakakun6093
@tanakakun6093 3 года назад
Finally finished doing this, It was actually fun to do. I got a bit of trouble at the start because firefox doesnt support perspective. But switched to Chrome to testing and its working. Thanks for teaching me this!
@antoniocebrian8379
@antoniocebrian8379 2 года назад
You made my day with this video. Thank you!
@danielhbrito
@danielhbrito 3 года назад
Mindblowing experiment! Thanks for sharing this knowledge.
@tomsantos220
@tomsantos220 2 года назад
wow amazing !! very good my friends !!!
@rian438
@rian438 3 года назад
Holy cow this is so cool.
@TheSoulCrisis
@TheSoulCrisis Год назад
Wow.........raw CSS this is amazing!!
@gireeshmt56
@gireeshmt56 Год назад
Thank you so much both!
@atleast_me
@atleast_me 3 года назад
I'm glad to see the full video.
@AsavarKul
@AsavarKul Год назад
Man, this sorcery classes are top notch
@MohammadRezaAbdolian
@MohammadRezaAbdolian 2 года назад
Mind Blowing! 🤯
@jonothan
@jonothan 2 года назад
This makes me so happy
@vickmackey24
@vickmackey24 2 года назад
Super cool. Excellent presentation.
@cthuloox476
@cthuloox476 3 года назад
Dude, this is awesome!
@Showbear1986
@Showbear1986 2 года назад
So awesome to watch. Makes me smile ;)
@xudayfijamacfarax1361
@xudayfijamacfarax1361 Год назад
Thanks both of you
@LokiDaFerret
@LokiDaFerret 3 года назад
AWESOME VIDEO!!
@xavuto
@xavuto 2 года назад
That's amazing !
@johnannovyn
@johnannovyn 3 года назад
Man! This is awesome! Thankx
@mohamedlamhamdi5244
@mohamedlamhamdi5244 2 года назад
that was so cool!!
@EverriseN
@EverriseN Год назад
Amazing!
@MuntahaIbnAhmed
@MuntahaIbnAhmed 2 года назад
Oh man, awesome work.
@dan110024
@dan110024 3 года назад
This is ridiculous. So good!
Далее
Amazing 3D CSS creations from my community
1:09:06
Просмотров 78 тыс.
NAME THE EURO 2024 PLAYER OR SWIM 💦
00:35
Просмотров 11 млн
ОБНОВАА?? ЛУТАЕМ МЕГАЯЩИКИ
3:12:14
Просмотров 312 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 71 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 911 тыс.
Naming things just got easier thanks to @scope
26:22
Просмотров 32 тыс.
Front-end dev reacts to amazing CSS-only Codepens
11:51
A look at the CUBE CSS methodology in action
47:09
Просмотров 102 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
A flexbox trick to improve text wrapping
5:02
Просмотров 177 тыс.
CSS Anchor Is The Best New CSS Feature Since Flexbox
15:39