ARvBlog

Posts

CSS Ellipsis | How To Truncate Text With An Ellipsis | Using of CSS Text-Overflow

- June 05, 2020

Watch Video - https://youtu.be/6fcmTfIIxRc The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...) , or display a custom string. In this video, we are going to take a look at the " Text-Overflow " property in CSS. It's used to handle cases where text overflows its container. In this tutorial, you will learn how to truncate/clip/cut/hide text with an Ellipsis using CSS. CSS Code : .box p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }

Water Ripple Effects using pure CSS | No JavaScript | Neumorphism UI Button Design 2020

- June 02, 2020

Watch Video - https://youtu.be/8t-Mrad6Cdk In this video, I will show you how to create a Neumorphism button and create Water Ripple Effect using Pure CSS, No JavaScript in quick, easy, and simple steps. Click the button to animate the Wave effect CSS tutorial. CSS Code : button { border: none; border-radius: 40px; padding: 20px 30px; font-size: 20px; text-transform: uppercase; cursor: pointer; color: #34495e; letter-spacing: 2px; background-color: transparent; outline: none; box-shadow: -7px -7px 17px rgba(255,255,255,0.6), 7px 7px 17px rgba(70,70,70,0.12); } .wave { background-position: center; transition: background 0.8s; } .wave:hover { background: #f2f2f3 radial-gradient(circle, transparent 1%, #f2f2f3 1%) center/15000%; ...

Amazing Loading Animation Using Only HTML & CSS | Pure CSS Loader for your website using HTML & CSS

- May 11, 2020

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...

Parallax Scrolling Effect using HTML, CSS | NO JavaScript | 3d Animated Scrolling using preserve-3d

- May 08, 2020

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.

Radio Button design with NEUMORPHISM UI || CSS3 Custom Radio Button design with Soft UI 2020

- May 06, 2020

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';

CSS3 Soft UI Button || Neumorphism UI Button ON / OFF Design || Pure CSS Checkbox Design