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 TH-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.
@@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
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...
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.
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 !
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.
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.
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."
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 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.
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".
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
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.
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
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! 👍👍👍
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?🤔
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.
this might be just the coolest thing i've seen done with css. Great job Kevin
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 TH-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.
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
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!
i like the way you face problems and fixing it after toughts and figuring thing out .thank you so much for this useful content
16:14 Man, I like the fact that you kept improvising all the time, Cheers from Egypt.
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 was amazing, more of these please!
I just love how you solve and figure things out as you go.
This was really fun to create. I made a Zelda one with Link popping out. Thank you for doing the tutorial.
i honestly find your thought process comforting
Love it! Truly enjoy the thought process!
awesome try there. To me, you got it right. you're extremely good in CSS breaking it and moulding it back.
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.
Love this videos building from scratch! Please, do more. I learn a lot.
the skill is unbelivable. Thank you and congratulations.
This is one of THE BEST PROGRAMING videos are exist on this platform.
Thank you from the bottom of my heart
omg this video was a wonderful journey... awesome, please keep going
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.
Just at 7:07 you know this is some magic stuff going on. Thank you for your awesomeness.
This is one of the coolest effects I've seen
I never knew that animating drop shadows was stupidly resource hungry! Learn something every day!
Enjoyed this walkthrough! Great stuff as always, Kevin! ^_^
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 suck at UI / CSS. This was fantastic and I learn so much from this. Thank you.
Man, so intense! great job.
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
absolutely love this style, figure it out, of video! Keep em coming!
I love this thumbnail face, gets me everytime
Amazing, i love how you always bring something new for us to enjoy with css.
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 !
That was a heck of a lot of fun!
I like videos like this where you go through your thought process xD
These are my favourite videos of yours
I was able to follow your tutorial with Webflow. Thanks!
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.
Was waiting for a video from u ❤❤
Just saw the intro and OMG can't wait to get the time to try this out 😮😮
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.
Loved this style of video!
That was really cool, you have really helped me improve my css skills :)
Star Wars, CSS, and the return of smooshing! What more could I want?! 🤣🤣🤣
I was laughing through almost the whole thing but you taught me a lot today
This is absolutely perfect. Keep going!
Love this style of video!
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.
Amazing job!
We want more videos something like this :)
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 effect! thank you so much to explain it for us. Its always helps!
thanks for the inspiration, Kevin
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.
Kev, the css MVP 🤙
Amazing video Kevin
Totally love your work
yoda best CSS teacher
Definiitely like the real-time thought approach to problem solving.
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.
Looks pretty simple. I like when designers actually do cool stuff and challenge us CSS guys a bit ;)
This!!!! more of this !!!
I’m a beginner so this is out of my league but you inspire me a lot. Thanks Kevin.
You made the internet awesome kev 🎉🎉
even the master keep learning. ❤
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".
This is very cool!
Thats a pretty neat animation. thanks for explaining and showing how to do it.
P.S. I like the unscripted content here
Nice teacher, amazing!
surprised that i was watching you for years and was not actually subscribed.
Amazing sir 👍
Thank you SO MUCH .. Really Awesome
amazing man, gj
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
I think this style of unscripted video is awesome 👍
One word: wow!
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.
Love the content!
that's some awesome css
Man I just enjoy watching you.❤
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
Z-index not doing what I think it should is a weekly battle for me I swear.
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! 👍👍👍
Great stuff, can you show us the clean up version when you get a chance please.
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?🤔
Well done
It was awesome.
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❤
Please make more videos like this
Awesome video Kevin, I think preserve 3D wasn't necessary and ended up causing more complications.
Css master 😍😍🔥🙏🏼🙏🏼❤
2:49- Can't you just wrap the whole thing in a container with overflow hidden to get the layers all to cut off at the same place?
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?
Amazing!
Beautiful 🎉
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.
it was something i haven't saw :)
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
Perfect bro .. just a question..is that work to the any browser or not?
very nice
Amazing...
How to make the yoda only overflowing at the top but hide all the sides.