Css best effects of all time. You have never seen such amazing effects.
Tags: beginners, css, uiweekly, webdev
Published: 2021-08-02 08:57:16

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.

{% youtube LFnmUv-ahSk %}

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

{% youtube R_MutcGu_xE %}

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

{% youtube iEYYT-okGgY %}

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

{% youtube kgLD27jrWRo %}

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

{% youtube 9wZTyLLqZhc %}

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

{% youtube EsD3QY_wFm8 %}

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

{% youtube 2MtU84rS2GA %}

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

{% youtube CzTtEA9DMZM %}

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

{% youtube eCFFbjFvjKM %}

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

{% youtube fQcA1MBRvY0 %} 

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

{% youtube SNAkksixAs4 %}

As I made toggle navigation system. This navigation is also cool. I got this idea from my video "[3D navbar](https://youtu.be/-c9HUvylWVM)" 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](https://github.com/kunaal438/3d-navbar-2.0)) 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](https://www.youtube.com/c/modern_web?sub_confirmation=1) my youtube channel.

Thanks for reading. Have a nice day.