@@mraloush8959 ....................... cuz js, c#, and c++ etc is so much more complicated? LOL spoken like someone who doesnt know how to code, can tell you right now... make a functional webapp with lets say js, html and css, css will take the most time to get right. not including the backend dev
It always amazes me. You provide not only complex answers in a simple fashion but mostly I am surprised that someone is providing such high quality content and knowledge for free on UA-cam while sharing most importantly the whole thought process on how one should approach a certain issue. You sir are a legend and have made my life very very easy. As a backend developer trying to understand UI and UX it was getting very frustrating before coming across your videos and here I am now sharing your content and suggesting your channel to every one going through same frustration. Can't thank you enough but thanks.
Nicely done! I think for the shadow you could try tying the blur amount to --timing as well. As the bottom of the card rotates up, it would get further from the background and the shadow would become more diffuse.
So awesome man. I like that you kept the googling in the video! I think a lot of new people assume you have to remember and recall every property with ease or you arent doing it right.
I am totally new at css and even though I don't understand that much it really showed me the power of css. Thank you for that! I also really love the trial&error type of video you made! Perfect...
It's crazy to me, if pros justify, just because they are not doing things instant perfect. Just because there are 0.01% haters, which will always hate. Great job, great inspiration!
I used to think I am good at css. But after watching your several videos, I am definitely not a good one. 😂 But thanks, I am learning a lot from your channel !
For me, it looks like the logo itself isn't on the same layer as the card. Without taking a look at the demo code I would say he used 2 layers and the top layer with the logo makes the opposite animation, that it looks like it stays and then the same time it gets moved up. The Rider is a pseudo-element of the same layer as the logo, which only shows on hover and also floats up. Not easy to get what happens here, but I think I am close to the original demo.
This is super interesting! I've been learning about attributes and properties I never even knew existed. Around halfway through the video, I might have lost my way a bit, but I'm genuinely excited to discover all the amazing possibilities that CSS offers. I would love to see more of this stuff with a tutorial touch to learn how to use them effectively.
i think both ways have some merits... the way you got it to work has that "extra spacialness" and more control options, compared to the simple slide up version. And by playing with timings, you can create some pretty intricate 3D animations! 👍👍👍
This looks awesome. I want to point something out though. Dont know if youre aware of this, forgot, or do it for a specific reason Im not aware. In this and a lot of your videos you tend to use a lot of z-index and most of them are unnecessary just by having the correct order. For instance when you use ::after pseudo-class for something you want beneath or have to use z-index to bring up a div that could just be on top by changing order to below the next div instead of above. Maybe something to explore? Otherwise, I learned about the perceptive having to be in a container, not that I use it much but good to learn in case.
Nice video, informative and interesting to watch. I think separating the front image and logo from the background to not rotate with it might be a lot easier than trying to fix the rotation with negative values though.
Such a great video! And i like how you love small hurdes (just as i do 🙂). There is allways a solution and it's great that you don't edit your moments of "whooops, i have no idea.. but let me think."
Amazing value. I learn so much. Also how to use some tools in wordpress the best way possible. Like using the sudo element for shadows to make it more performed
You're good at what you do. Some creative feedback, i basically fast forwarded alot. Because i couldn't stand the trial and error since it got me confused thinkin that i could learn from this video. I think it would be more pleasing to watch if you learned the CSS beforehand. Then made the video step by step, titled: "I found this cool CSS effect and here's how to do it".
Wow, great video, I think the strangeness of the card flip is because it is very tall, the examples are shorter maybe that is the difference you are commenting on or just some adjusts on perspective
Sir u can try adding a 🔵🧞♂️ blue filter or tint, or photoshop the yoda on hover to match the background image. You got me I guess🤔🤗. Yeah this tutorial was really helpful❤
Logo should slide more vertically staying perpendicular to camera. Also there should be delay or different speed between yoda and logo. So there would be feel that they are at 2 different layers.
I think if only the background image rotated rather than the whole card, it would've been easier. Set the perspective on the card, then translate the shadow to -10z, the background is at 0z, and the logo + foreground to 10z What do you think? And awesome video, as always...the half hour literally flew by!!
This was fun to watch! Quick VS Code question, what extension are you using to type a container and class into the editor and it outputs all the line? IE div.wrapper -->
35:00 finally succeeding in putting the logo in front of the image -Me(Junior dev): It's working! Yes!!! I'm the best developer ever -Kevin: Hmm! It's so weird. It seems to be working. How? Why?🤔
this might be just the coolest thing i've seen done with css. Great job Kevin
12:58 Words spoken by a true developer. 😂
"I don't try and do things perfectly, I try and get them to work..."
that's my approach since the beginning of my coding journey.
@@chhavimanichoubey9437 same... one day something will work.... one day.
Yh prototyping... small sauce before you pour it in the big soup
thats the oppsite of a true dev. also hes not doing dev work. its css, its not even coding
@@mraloush8959 ....................... cuz js, c#, and c++ etc is so much more complicated? LOL spoken like someone who doesnt know how to code, can tell you right now... make a functional webapp with lets say js, html and css, css will take the most time to get right. not including the backend dev
It always amazes me. You provide not only complex answers in a simple fashion but mostly I am surprised that someone is providing such high quality content and knowledge for free on UA-cam while sharing most importantly the whole thought process on how one should approach a certain issue. You sir are a legend and have made my life very very easy. As a backend developer trying to understand UI and UX it was getting very frustrating before coming across your videos and here I am now sharing your content and suggesting your channel to every one going through same frustration. Can't thank you enough but thanks.
Super cool effect and I love these long-form videos where you’re going through the whole process showing the pivots, please keep them coming!
This was really fun to create. I made a Zelda one with Link popping out. Thank you for doing the tutorial.
i like the way you face problems and fixing it after toughts and figuring thing out .thank you so much for this useful content
I just love how you solve and figure things out as you go.
16:14 Man, I like the fact that you kept improvising all the time, Cheers from Egypt.
Nicely done! I think for the shadow you could try tying the blur amount to --timing as well. As the bottom of the card rotates up, it would get further from the background and the shadow would become more diffuse.
i honestly find your thought process comforting
Just at 7:07 you know this is some magic stuff going on. Thank you for your awesomeness.
Love this videos building from scratch! Please, do more. I learn a lot.
Enjoyed this walkthrough! Great stuff as always, Kevin! ^_^
So awesome man. I like that you kept the googling in the video! I think a lot of new people assume you have to remember and recall every property with ease or you arent doing it right.
I am totally new at css and even though I don't understand that much it really showed me the power of css. Thank you for that!
I also really love the trial&error type of video you made! Perfect...
This is one of THE BEST PROGRAMING videos are exist on this platform.
Thank you from the bottom of my heart
Hey Kevin, I'd love to see a video with you cleaning up the code for better understanding and also get to know your thinking proccess while doing so.
the skill is unbelivable. Thank you and congratulations.
I suck at UI / CSS. This was fantastic and I learn so much from this. Thank you.
It's crazy to me, if pros justify, just because they are not doing things instant perfect.
Just because there are 0.01% haters, which will always hate.
Great job, great inspiration!
awesome try there. To me, you got it right. you're extremely good in CSS breaking it and moulding it back.
Love it! Truly enjoy the thought process!
I never knew that animating drop shadows was stupidly resource hungry! Learn something every day!
I used to think I am good at css. But after watching your several videos, I am definitely not a good one. 😂 But thanks, I am learning a lot from your channel !
I enjoy your like nervous/half laughs where you're unsure if your choice is correct lol.
Gives me a good chuckle cause I heavily relate. Nice video.
Amazing, i love how you always bring something new for us to enjoy with css.
This is one of the coolest effects I've seen
This helped me a lot to understand that I need to play with 3d effects more to make my site more awesome but with performance as well
Definiitely like the real-time thought approach to problem solving.
For me, it looks like the logo itself isn't on the same layer as the card. Without taking a look at the demo code I would say he used 2 layers and the top layer with the logo makes the opposite animation, that it looks like it stays and then the same time it gets moved up. The Rider is a pseudo-element of the same layer as the logo, which only shows on hover and also floats up. Not easy to get what happens here, but I think I am close to the original demo.
I like videos like this where you go through your thought process xD
This is super interesting! I've been learning about attributes and properties I never even knew existed. Around halfway through the video, I might have lost my way a bit, but I'm genuinely excited to discover all the amazing possibilities that CSS offers. I would love to see more of this stuff with a tutorial touch to learn how to use them effectively.
Was waiting for a video from u ❤❤
Looks pretty simple. I like when designers actually do cool stuff and challenge us CSS guys a bit ;)
omg this video was a wonderful journey... awesome, please keep going
That was really cool, you have really helped me improve my css skills :)
yoda best CSS teacher
Man, so intense! great job.
absolutely love this style, figure it out, of video! Keep em coming!
I was able to follow your tutorial with Webflow. Thanks!
That was a heck of a lot of fun!
I love this thumbnail face, gets me everytime
Just saw the intro and OMG can't wait to get the time to try this out 😮😮
These are my favourite videos of yours
This was amazing, more of these please!
You made the internet awesome kev 🎉🎉
Loved this style of video!
I’m a beginner so this is out of my league but you inspire me a lot. Thanks Kevin.
i think both ways have some merits... the way you got it to work has that "extra spacialness" and more control options, compared to the simple slide up version. And by playing with timings, you can create some pretty intricate 3D animations! 👍👍👍
This looks awesome. I want to point something out though. Dont know if youre aware of this, forgot, or do it for a specific reason Im not aware. In this and a lot of your videos you tend to use a lot of z-index and most of them are unnecessary just by having the correct order. For instance when you use ::after pseudo-class for something you want beneath or have to use z-index to bring up a div that could just be on top by changing order to below the next div instead of above. Maybe something to explore? Otherwise, I learned about the perceptive having to be in a container, not that I use it much but good to learn in case.
amazing effect! thank you so much to explain it for us. Its always helps!
Nice video, informative and interesting to watch. I think separating the front image and logo from the background to not rotate with it might be a lot easier than trying to fix the rotation with negative values though.
I was laughing through almost the whole thing but you taught me a lot today
Kev, the css MVP 🤙
I think this style of unscripted video is awesome 👍
Such a great video! And i like how you love small hurdes (just as i do 🙂). There is allways a solution and it's great that you don't edit your moments of "whooops, i have no idea.. but let me think."
This is absolutely perfect. Keep going!
even the master keep learning. ❤
We want more videos something like this :)
Thats a pretty neat animation. thanks for explaining and showing how to do it.
P.S. I like the unscripted content here
Love this style of video!
thanks for the inspiration, Kevin
Z-index not doing what I think it should is a weekly battle for me I swear.
surprised that i was watching you for years and was not actually subscribed.
Amazing value. I learn so much. Also how to use some tools in wordpress the best way possible. Like using the sudo element for shadows to make it more performed
You're good at what you do. Some creative feedback, i basically fast forwarded alot. Because i couldn't stand the trial and error since it got me confused thinkin that i could learn from this video. I think it would be more pleasing to watch if you learned the CSS beforehand. Then made the video step by step, titled: "I found this cool CSS effect and here's how to do it".
Totally love your work
Wow, great video, I think the strangeness of the card flip is because it is very tall, the examples are shorter maybe that is the difference you are commenting on or just some adjusts on perspective
Amazing video Kevin
This!!!! more of this !!!
Great stuff, can you show us the clean up version when you get a chance please.
Awesome video Kevin, I think preserve 3D wasn't necessary and ended up causing more complications.
Amazing job!
Man I just enjoy watching you.❤
Sir u can try adding a 🔵🧞♂️ blue filter or tint, or photoshop the yoda on hover to match the background image.
You got me I guess🤔🤗. Yeah this tutorial was really helpful❤
Star Wars, CSS, and the return of smooshing! What more could I want?! 🤣🤣🤣
I believe the reason the z-indexes weren't working for the two images is because Yoda had an opacity of 0, which created a new stacking context
Nice teacher, amazing!
Thank you SO MUCH .. Really Awesome
that's some awesome css
Logo should slide more vertically staying perpendicular to camera. Also there should be delay or different speed between yoda and logo. So there would be feel that they are at 2 different layers.
This is very cool!
Please make more videos like this
amazing man, gj
I think if only the background image rotated rather than the whole card, it would've been easier.
Set the perspective on the card, then translate the shadow to -10z, the background is at 0z, and the logo + foreground to 10z
What do you think?
And awesome video, as always...the half hour literally flew by!!
Love the content!
Amazing sir 👍
Well done
This was fun to watch! Quick VS Code question, what extension are you using to type a container and class into the editor and it outputs all the line? IE div.wrapper -->
It was awesome.
Css master 😍😍🔥🙏🏼🙏🏼❤
35:00 finally succeeding in putting the logo in front of the image
-Me(Junior dev): It's working! Yes!!! I'm the best developer ever
-Kevin: Hmm! It's so weird. It seems to be working. How? Why?🤔
I learn more from when you fail then when you succeed
Amazing!
All hail the css god
Wow!
Beautiful 🎉
Could you have set the Y rotation of everything 45deg to get kind of a “side view” to see how the z rotations were interacting?
it was something i haven't saw :)
Man i wish for u immortality