@@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 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.
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...
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 !
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.
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.
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.
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!
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."
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! 👍👍👍
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 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 -->
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 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
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❤
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!!
I am a CSS newbie, but I've been messing around with 3D a good bit and your approach seemed inefficient to me. I'd have it done like this >Card-Container >>Card-Front >>Card-Background >>>Card-Gradient On hover just rotate the background, grow the gradient for the shadow, make the front appear in an animation. The gradient would follow the rotation of its parent by default I believe, or you just switch background and gradient in the html
Yeah, I agree that only rotating one layer makes a lot more sense, and I'd go that route if I were to update it. Started off down that road though, so stuck with it 😅
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.
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 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.
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 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.
Love this videos building from scratch! Please, do more. I learn a lot.
Just at 7:07 you know this is some magic stuff going on. Thank you for your awesomeness.
Love it! Truly enjoy the thought process!
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
Enjoyed this walkthrough! Great stuff as always, Kevin! ^_^
awesome try there. To me, you got it right. you're extremely good in CSS breaking it and moulding it back.
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
I suck at UI / CSS. This was fantastic and I learn so much from this. Thank you.
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.
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.
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...
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 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.
omg this video was a wonderful journey... awesome, please keep going
I never knew that animating drop shadows was stupidly resource hungry! Learn something every day!
These are my favourite videos of yours
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
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 was able to follow your tutorial with Webflow. Thanks!
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.
absolutely love this style, figure it out, of video! Keep em coming!
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 like videos like this where you go through your thought process xD
This was amazing, more of these please!
Was waiting for a video from u ❤❤
Loved this style of video!
Man, so intense! great job.
Just saw the intro and OMG can't wait to get the time to try this out 😮😮
That was really cool, you have really helped me improve my css skills :)
This is absolutely perfect. Keep going!
Star Wars, CSS, and the return of smooshing! What more could I want?! 🤣🤣🤣
Definiitely like the real-time thought approach to problem solving.
I love this thumbnail face, gets me everytime
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.
even the master keep learning. ❤
Love this style of video!
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."
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! 👍👍👍
We want more videos something like this :)
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 job!
Totally love your work
I was laughing through almost the whole thing but you taught me a lot today
Looks pretty simple. I like when designers actually do cool stuff and challenge us CSS guys a bit ;)
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 -->
That was a heck of a lot of fun!
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
I’m a beginner so this is out of my league but you inspire me a lot. Thanks Kevin.
Z-index not doing what I think it should is a weekly battle for me I swear.
thanks for the inspiration, Kevin
I think this style of unscripted video is awesome 👍
Perfect bro .. just a question..is that work to the any browser or not?
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
Thank you SO MUCH .. Really 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❤
yoda best CSS teacher
You made the internet awesome kev 🎉🎉
Kev, the css MVP 🤙
Nice teacher, amazing!
This!!!! more of this !!!
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!!
Thats a pretty neat animation. thanks for explaining and showing how to do it.
P.S. I like the unscripted content here
Amazing video Kevin
Awesome video Kevin, I think preserve 3D wasn't necessary and ended up causing more complications.
Amazing sir 👍
This is very cool!
surprised that i was watching you for years and was not actually subscribed.
amazing man, gj
Love the content!
that's some awesome css
Well done
I am a CSS newbie, but I've been messing around with 3D a good bit and your approach seemed inefficient to me. I'd have it done like this
>Card-Container
>>Card-Front
>>Card-Background
>>>Card-Gradient
On hover just rotate the background, grow the gradient for the shadow, make the front appear in an animation.
The gradient would follow the rotation of its parent by default I believe, or you just switch background and gradient in the html
Yeah, I agree that only rotating one layer makes a lot more sense, and I'd go that route if I were to update it. Started off down that road though, so stuck with it 😅
Great stuff, can you show us the clean up version when you get a chance please.
It was awesome.
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.
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 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
Css master 😍😍🔥🙏🏼🙏🏼❤
Please make more videos like this
Great video! What application do you use to type your code into?
VS Code :)
Amazing...
I learn more from when you fail then when you succeed
it was something i haven't saw :)
Wow!