ARvBlog

Watch Video -    https://youtu.be/DT8DPe3HLHA In this video, we are going to build an animated CSS loader without JavaScript & jQuery. Pure CSS Loader - Animated Loading effect for your website using HTML and CSS (No Javascript). Note:   You should also include a -WebKit- prefix for browsers that do not support animation and transform properties. HTML Code -  <section class="loader">         <div class="loader-text">              <span style="--i:1;">A</span>              <span style="--i:2;">N</span>              <span style="--i:3;">Y</span>          </div> </section> CSS Code - Animation Part Only .loader-text span {     animation: animate 1s ease-in-out infinite;     animation-delay: calc(0.1s * var(--i...

Watch Video -   https://youtu.be/2xARGKjnX4E In this video, I will show you a very basic implementation of a Parallax effect using HTML and CSS. Create 3d animated scrolling using CSS. Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Note: Parallax scrolling does not always work on mobile devices/smartphones. However, you can use media queries to turn off the effect on mobile devices.

Watch Video -   https://youtu.be/8ncKl3dulxw Neumorphism is predicted to be the biggest trend of 2020. Here is a simple tutorial demonstrating the Neumorphism Effect with CSS.  In this video, create custom radio button design with Neumorphism (Latest UI trends) Effect. CSS3 Custom Radio Button design with Soft UI design. Code Icon Content : content: '✔'; OR YOU USE font-family: FontAwesome; content: '\f00c';     

Watch Video -   https://youtu.be/SSzuc7yoAE0 Creating an ON/OFF switch using a checkbox with Neumorphism UI. 2020 Soft UI Design. Design a checkbox and get some cool effects of this.  Font awasome CDN :     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> Icon Code :  " \f011 ";

Watch Video -   https://youtu.be/pMLvfhZMUfQ The Neomorphism effect is one of the most talked-about web design and UI trends in 2020. Creating a Login form with Neumorphism UI. It is a very smooth UI effect that you can see on many websites or app nowadays. Dark theme is one of the most requested features over the past few years.  A dark theme doesn’t have to be pure white text on a pure black background.   Material design recommends #121212 as dark theme surface color.

Watch Video -   https://youtu.be/aMOSF9B9Q3A In this video, we will explain about CSS Neumorphism Social Icon Button Design in HTML & CSS or Neumorphism Soft UI Button Design. Icon copy from Font Awesome . in CSS social icon color code :   .fa-facebook-f {     color: #3b5998; } .fa-twitter {     color: #00acee; } .fa-whatsapp {     color: #25d366; } .fa-instagram {     background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);     -webkit-background-clip: text;     background-clip: text;     -webkit-text-fill-color: transparent; } .fa-linkedin-in {     color: #0e76a8; } .fa-github {     color: #211f1f; }

Watch Video -    https://youtu.be/ACjGO6Wl07s Today we will see how we can make a Login form using Neumorphism effects with HTML & CSS. It is a very smooth UI effect that you can see on many websites or app nowadays. Neumorphism is an upcoming web and UI design trend which is a combination of Material design and Skeuomorphism . It is being hailed all over the internet as one of the biggest digital design trends of 2020. Neumorphism  blends techniques from Skeuomorphism and flat design.  2020 is just begun and we already started to see some new trends in terms of design. One of them is the N eumorphism or Soft UI .