Css best effects of all time. You have never seen such amazing effects.

#beginners #css #uiweekly #webdev

Hello World, Welcome. In today's article we'll see some of the most amazing and underrated CSS effects. All these effects are created by me.

Who I am ?

I am kunaal, From India. I love coding. I started coding at the age of 12 and now I am 16. I started a youtube channel last year. My Channel has 100+ videos. Although I don't get views and have no audience, even then I am glad that I never stopped because maybe my youtube channel is failing but this taught me a lot of things. By making videos for youtube I enhanced my web development skills. I am very proud of it. Below are some of my videos that was very challenging for me to make and taught me lot's of thing about development.

1. Card Hover Effect.

This card hover was not that hard to create. When I thought of this effect, I feel like that's it this is the one I need to make for my channel. It took me over 1 day to just to figure out, how can I make those 3 different spans for hover effect.

2. Login/Register Forms

This is a great smooth transitioning forms. I like that one. But you know, I was not actually making it. I was making something else, an extraordinary form animation. But I made this. Well I am still happy this effect.

3. Thanos Snap Image Slider

This is best thing I ever made. How I got this idea. well, I saw a coding video on youtube in which he was showing this image snap effect. He was using a video to do this. But I thought What If we can make this with pure CSS, no video. It was really hard for me to do this with pure CSS. After trying few days, I realize that it can't be done with CSS only. So I took some help of JS and guess what, It worked. It took me a whole week. At the time of uploading this video I actually not cared about views because I was happy with this effect. And I still am.

4. Image Gallery

When I started my channel I really wanted to make a tutorial video on image gallery. But i want it to be different from others. I like apple mac-book's UI, I took this UI inspiration from there. I guessed this video will break the internet. Yeah I was a fool. And I still am. And, it never touched even 100 views. 😅😅

5. Loading Animation

This effect looks very simple. But it was really hard for me to make. I actually deleted this project 2 times. The only problem making this effect was to perfectly align text's background image with header's background image. I don't know it look like the idea what I wanted to make but yeah it is really close to that idea.

6. Tile Navigation

I got this navigation idea from a youtube video. In that video a guy was reacting to other's portfolio website. And, There was a portfolio, which has this tile navigation. And, it was looking very awesome. And I really wanted to try this effect. I tried my best to perfectly make this like the one I saw. But, yeah it stills looks amazing. Isn't it.

7. Product Card

This is the best product card I ever made. It looks amazing, feels amazing, transition are amazing. What else, we want. And this effect is 100 percent exact to my idea that I had.

8. 3D Content Slider

Making this was really fun. This was one of my first projects which uses CSS animations, transitions and JS at the same time. I got the idea of making this after my "3D Image Carousel" Video touched 100 views. I thought of making everything in 3D but it didn't worked out.

9. Header Animation - 01

you can easily find out 5 to 6 video on this type of tutorial video on my channel. I kind of like these UX loading animation. It was not that hard to make but it look and feels amazing.

My Favorite effects of all time.

10. Header Animation - 02

As I said, I kind of like these effects. But this effects was a bit harder to make at first. The idea of this animation came from an Intro I saw online. Again this is not same as I thought But This is my favorite header opening animation.

11. 3D navbar

As I made toggle navigation system. This navigation is also cool. I got this idea from my video "3D navbar" but this video was not about working 3D navbar and My viewer asked me in comments that can I make this working. At first I thought It will be easy. But it was not. I made that navbar design to a working navbar but it kinda look off to me.(You can check it here) From there I thought to change the design a little bit. And I made this. It was very frustrating to make at first. But, I am glad I made it.

So that's it for today. I thought of sharing my best projects ever with you all. I think you like them. If you have anything to ask feel free to ask me in comments.

And if you want you can subscribe my youtube channel.

Thanks for reading. Have a nice day.