CSS's Articles

Learn CSS from the best online CSS tutorials and courses recommended by the programming community.

Neumorphism/Soft UI CSS shadow generator
There are lots of softwares available from which you can get code from design. There is Neumorphism/Soft UI online and open source application that can generate CSS code for the Soft box. This is helpful for the designer. You can design make any element like that. This is great tool when you want to make readymade UI.. You can direct make changes from UI and get CSS code for the boxes. Or you can download the application from th GitHub. Download the code from the link and run the below command to start application. npm start And in your browser, open http://localhost:3000. You can get the view to configure and get code.
How to Create Animation Effects using pure CSS
Creating animation nowadays is becoming a lot easier than ever. There are many readymade library available to create animation effect. In this article, we will discuss about one of these library. Animate.css is simple one css file library which provides cross-browser animations for any web application. The animate.css useful in home pages, sliders for attention-guiding hints. Animate.css. Installation Install animate.css using npm command. npm install animate.css --save Or simply add the CDN file directly in <head> tag of HTML code. <head>     <link rel="stylesheet" href="" /> </head> Usage After you add the library, just add animate__animated class along with along with any animation name with prefix animate__ to elements which you want to add animation. Example: <h1 class="heading animate__animated animate__bounce">An animated element</h1> You can change animation duration by adding animate__delay-3s class where 3s is 3 seconds time of animation. You can also add the effect to specific class using @keyframes directly to any class. You don't need to add animate__ prefix while adding it to animation. You also need to add animation-duration with it. .heading {     animation: bounce;     animation-duration: 2s; } You can use Javascript code to add sugar with Animate.css library. This will create effect whenever you want any event occurs. const elem = document.querySelector('.header'); elem.classList.add('animate__animated', 'animate__bounce'); Full Example: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Animate.css</title>     <link href="" rel="stylesheet">     <link rel="stylesheet" href="" /> </head> <body>     <div class="text-center mt-5">         <h1 class="header animate__animated">I am dancing!</h1>         <button class="btn btn-primary">Animate</button>     </div>     <script type="text/javascript">         document.querySelector('.btn-primary').addEventListener('click', function() {             const elem = document.querySelector('.header');             elem.classList.add('animate__bounce');             setTimeout(function() {                 const elem = document.querySelector('.header');                 elem.classList.remove('animate__bounce');             }, 1000);         });     </script> </body> </html> This way you can add animation to make your web application more attractive. You can get all animation effect name at here. I hope you liked this article.