Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 468 of 652
How to create a wave ball effect using CSS?
In this article, we use CSS to create a wave ball effect that can offer a unique and visually attractive touch to any website or application. This effect can be used to make buttons, progress indicators, and other user interface elements stand out from the crowd. To achieve this effect, you will need to be familiar with several fundamental CSS properties such as border-radius, box-shadow, and animation. Syntax .wave-ball { width: value; height: value; border-radius: 50%; box-shadow: shadow-values; ...
Read MoreHow to create a Vertical Navigation Bar using HTML and CSS ?
A vertical navigation bar is a UI component that displays navigation links in a vertical stack, typically positioned on the left or right side of a webpage. It helps users navigate through different sections or pages of a website efficiently. HTML provides the structure while CSS handles the styling and positioning. Syntax /* Basic vertical navigation structure */ nav { width: value; height: value; background-color: color; } nav ul { list-style-type: none; margin: 0; ...
Read MoreHow to create linear gradient background using CSS?
Linear gradient background in CSS is a design technique used to create a smooth transition between two or more colors in a single element. It is defined using the CSS background-image property and the linear-gradient() function. Syntax selector { background: linear-gradient(direction, color1, color2, ...); } Linear Gradient Properties in CSS PropertyDescription directionSpecifies the direction of the gradient (to top, to right, 45deg, etc.) color-stopsColors used in the gradient and their position repeating-linear-gradientCreates a repeating gradient pattern background-sizeSpecifies the size of the gradient background background-positionSpecifies the position of the gradient ...
Read MoreHow to create gooey balls animation using HTML & CSS?
Gooey balls animation is a visually appealing effect created using HTML and CSS that makes circular elements appear smooth, flowing, and squishy − like balls made of goo. This animation style uses CSS keyframes to specify property values at different points in the animation timeline, creating engaging visual effects for websites. Syntax @keyframes animation-name { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .element { animation: animation-name duration timing-function iteration-count; } ...
Read MoreHow to create button hover animation effect using CSS?
The hover animation effect in CSS refers to the change in appearance of an element when the mouse pointer is over it. We use CSS to create various animation effects on hover, such as scaling, fading, sliding, or rotating elements. Syntax selector:hover { property: value; transition: property duration ease-function; } Key Properties for Button Hover Animations transform − This property allows you to scale, rotate, or translate an element. opacity − This property sets the transparency level of an element, where 1 is fully visible ...
Read MoreHow to Play and Pause CSS Animations using CSS Custom Properties?
In CSS, animation is an effective way to add some visual flair to the website. However, sometimes we want to have more control over when and how these animations play. Here, we will explore how to play and pause CSS animations using CSS custom properties. Before we go ahead, we should know that CSS animations can be created using keyframes or by transitioning between two or more states. Syntax @keyframes animation-name { /* define the animation steps */ } selector { animation-play-state: running | paused; } ...
Read MoreHow to make transition height from 0 to auto using CSS?
Making a transition height from 0 to "auto" is a way to smoothly animate an element's height as it changes to fit its content. In web development, creating smooth and elegant transitions can make a website more attractive and provide a better user experience. However, creating a transition from a height of 0 to "auto" can be a bit tricky since CSS cannot directly animate to the "auto" value. Syntax transition: property duration timing-function delay; Where property is the CSS property to animate, duration is the time length, timing-function specifies the transition pace, and delay ...
Read MoreHow to Design Fade balls loader Animation using CSS?
The CSS fade balls loader animation is a popular loading indicator that uses a series of circles or balls that fade in and fade out in sequence. This animation creates an engaging visual effect while content loads, keeping users informed about the loading progress. Syntax @keyframes fade { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } } .loader-element { animation: fade duration ease-in-out infinite; animation-delay: ...
Read MoreHow to define the color of the border using CSS?
The CSS border-color property is used to define the color of an element's border. You can set the same color for all four sides or specify different colors for each side individually. Syntax selector { border-color: value; } /* Individual sides */ selector { border-top-color: value; border-right-color: value; border-bottom-color: value; border-left-color: value; } Possible Values ValueDescription color nameNamed colors like red, blue, green hex codeHexadecimal values like #ff0000 rgb()RGB values like rgb(255, ...
Read MoreHow to define the border bottom color is animatable in CSS?
The CSS border-bottom-color property is animatable, meaning it can smoothly transition from one color to another over time. This allows web developers to create visually appealing animations that enhance user interaction and draw attention to specific elements. Syntax selector { border-bottom-color: color; animation: animation-name duration timing-function iteration-count; } Animatable Properties in CSS Before diving into border bottom color animation, it's helpful to understand other commonly animated properties − Color − Animate text, background, and border colors Opacity − Create fade-in and fade-out effects Transform ...
Read More