Can I copy this cool effect with CSS?

[@vasyaqwe2087]

this might be just the coolest thing i've seen done with css. Great job Kevin

[@rj3965]

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 KZbin 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.

[@ethansc]

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!

[@ichiroutakashima4503]

12:58 Words spoken by a true developer. 😂 "I don't try and do things perfectly, I try and get them to work..."

[@chhavimanichoubey9437]

that's my approach since the beginning of my coding journey.

[@viralclickb8]

@@chhavimanichoubey9437 same... one day something will work.... one day.

[@geelemo]

Yh prototyping... small sauce before you pour it in the big soup

[@mraloush8959]

thats the oppsite of a true dev. also hes not doing dev work. its css, its not even coding

[@viralclickb8]

@@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

[@R3DA333]

i like the way you face problems and fixing it after toughts and figuring thing out .thank you so much for this useful content

[@henson_prod]

I just love how you solve and figure things out as you go.

[@GodsZoldier]

i honestly find your thought process comforting

[@deltaromeo8207]

This was really fun to create. I made a Zelda one with Link popping out. Thank you for doing the tutorial.

[@islamali9818]

16:14 Man, I like the fact that you kept improvising all the time, Cheers from Egypt.

[@adryeeel]

Love this videos building from scratch! Please, do more. I learn a lot.

[@NickCombs]

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.

[@ThugLifeModafocah]

the skill is unbelivable. Thank you and congratulations.

[@marktabner]

I never knew that animating drop shadows was stupidly resource hungry! Learn something every day!

[@اسماعيل-ر8ل]

This is one of THE BEST PROGRAMING videos are exist on this platform. Thank you from the bottom of my heart

[@codytownley5236]

Love it! Truly enjoy the thought process!

[@MaralTheGameGirl]

This is one of the coolest effects I've seen

[@slavg-k9l]

Just at 7:07 you know this is some magic stuff going on. Thank you for your awesomeness.

[@marquisegbunike5773]

awesome try there. To me, you got it right. you're extremely good in CSS breaking it and moulding it back.

[@swissademar]

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.

[@Drazyhaze]

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.

[@ABanksy]

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.

[@EldonElledge]

I suck at UI / CSS. This was fantastic and I learn so much from this. Thank you.

[@TheRealFreekBos]

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...

[@kushagragour]

Enjoyed this walkthrough! Great stuff as always, Kevin! ^_^

[@aviralvikram9431]

Amazing, i love how you always bring something new for us to enjoy with css.

[@chhavimanichoubey9437]

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

[@_kaverna]

I like videos like this where you go through your thought process xD

[@BRODERVEVO]

I love this thumbnail face, gets me everytime

[@poooooow]

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!

[@oncalldev]

Definiitely like the real-time thought approach to problem solving.

[@blu3tan]

omg this video was a wonderful journey... awesome, please keep going

[@Ayydos]

This was amazing, more of these please!

[@matejlaskomulej]

These are my favourite videos of yours

[@magoxxii]

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.

[@MasayaShida]

yoda best CSS teacher

[@spartiata71]

Man, so intense! great job.

[@WraShadow]

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.

[@markclynch]

absolutely love this style, figure it out, of video! Keep em coming!

[@LabelledManiacs]

That was really cool, you have really helped me improve my css skills :)

[@octothorpe12]

That was a heck of a lot of fun!

[@mehulparekh619]

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 !

[@TheRalic]

Just saw the intro and OMG can't wait to get the time to try this out 😮😮

[@PicSta]

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.

[@StevenDavisPhoto]

Looks pretty simple. I like when designers actually do cool stuff and challenge us CSS guys a bit ;)

[@Kaldrax]

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.

[@the-secrettutorials]

I was able to follow your tutorial with Webflow. Thanks!

[@SDRMusic777]

I was laughing through almost the whole thing but you taught me a lot today

[@flibben]

Loved this style of video!

[@craftwithfatima4146]

You made the internet awesome kev 🎉🎉

[@securefolder4548]

Was waiting for a video from u ❤❤

[@JunieVM]

I’m a beginner so this is out of my league but you inspire me a lot. Thanks Kevin.

[@J90JAM]

Kev, the css MVP 🤙

[@aliaskhar.11]

This is absolutely perfect. Keep going!

[@everybot-it]

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! 👍👍👍

[@hygorlima7660]

amazing effect! thank you so much to explain it for us. Its always helps!

[@RaveKev]

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."

[@thtasca]

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

[@SamarHayatOfficial]

We want more videos something like this :)

[@victor25021983]

even the master keep learning. ❤

[@nikolaykyurchiyski7523]

thanks for the inspiration, Kevin

[@Beastintheomlet]

Z-index not doing what I think it should is a weekly battle for me I swear.

[@salman.tanvir]

I think this style of unscripted video is awesome 👍

[@kylevandeusen]

Love this style of video!

[@MrOliver1444]

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

[@frictiongraphics116]

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❤

[@leanrasmussen8019]

This!!!! more of this !!!

[@DesignwithCracka]

Awesome video Kevin, I think preserve 3D wasn't necessary and ended up causing more complications.

[@heiko3169]

Thats a pretty neat animation. thanks for explaining and showing how to do it. P.S. I like the unscripted content here

[@olumorsotnas]

Amazing job!

[@vincentmbwende9131]

Totally love your work

[@AndréMichel-h9d]

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".

[@T25de]

Amazing video Kevin

[@RickertBrandsen]

surprised that i was watching you for years and was not actually subscribed.

[@millos0116]

Man I just enjoy watching you.❤

[@sum1179]

Nice teacher, amazing!

[@severgun]

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.

[@joelpinnock8131]

Great stuff, can you show us the clean up version when you get a chance please.

[@MrMairu555]

Star Wars, CSS, and the return of smooshing! What more could I want?! 🤣🤣🤣

[@dfgatorfan]

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 -->

[@AabirKashif]

This is very cool!

[@muhammad.mohsen]

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!!

[@jorgegamboa5408]

that's some awesome css

[@shlomgoldberg9136]

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

[@KevinPowell]

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 😅

[@faridlachkar]

Thank you SO MUCH .. Really Awesome

[@KingTMK]

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

[@alfarabyindra]

Amazing sir 👍

[@vinsmokesanji7629]

amazing man, gj

[@renéTheDev]

Love the content!

[@JaGaNezhil]

Css master 😍😍🔥🙏🏼🙏🏼❤

[@marjanzivkovic5377]

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?🤔

[@zahrahasti3723]

It was awesome.

[@bigmanfry]

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?

[@ozairabtahi]

Well done

[@MichaStolarskiPL]

I don't see any hard things to do here. Basically, 3 elements animated separately on the hover. Ok, 4 because of an extra gradient to adding the vignet effect

[@bazichill]

Perfect bro .. just a question..is that work to the any browser or not?

[@KultuFact]

Please make more videos like this

[@PixelAnimeCoder]

it was something i haven't saw :)

[@RazahLP]

Wow!

[@lost_and_finding]

All hail the css god

[@alanthomasgramont]

I learn more from when you fail then when you succeed