JavaScript | React | Express | Mongo Db | HTML | Sass | Css

Animation can be very time consuming if we use vanilla JavaScript and CSS. But there are a lot of JavaScript libraries which can help us in animation. Today I will be using Animejs for animation. Today I will be animating a SVG and give it a neon light effect. Now let's see the final output first. You can get this code from GitHub from   here . Live demo .   Now let's just jump into the code . I will start with HTML. So far we have  added a wrapper div which is wrapping the neon div. Div with class neon is the div which will have the SVG code. We have also linked the html with the css file . Now before adding the SVG, let's give the basic styles to our page. Now after adding the basic styling we will add the SVG file code. You guys can have the same SVG file from the GitHub repository. Now let's add styling to the SVG file classes. Now we will link the Animejs library using the CDN. Since we have Animejs linked now we can work on the JavaScript part. And it's do...

Glassmorphism is the new UI trend for 2021. This is the best time to build something using glassmorphism UI .So let's build a Login form UI using this trend. I will be using the SCSS instead of CSS just for nesting purpose to make code clean and easy to understand.  You can see demo   here .  GitHub: https://github.com/hitesh-webRepo/glassmorphism-login-form.git Let's start with the HTML part first. Container div is wrapping the form and the drops div. Now let's start with the SCSS part. Firstly I'm setting up the background-color and height of the page. I’m storing light shade of white in a variable because I will be using this at different places. This is the result so far. The form styling goes as following  The backdrop-filter property plays a key-role in glass morphism as due to this property we get the blurry effect on the objects behind the element. Result so far: Now we will add the basic styling of the form heading and the input tag This is the resul...