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 517 of 652
Wrap the flex items in reverse order with CSS
Use the flex-wrap property with wrap-reverse value to wrap flex items in reverse order. This means that when flex items exceed the container's width and need to wrap, they will wrap in the opposite direction compared to the normal wrap behavior. Syntax selector { flex-wrap: wrap-reverse; } Example The following example demonstrates how wrap-reverse wraps flex items in reverse order − .mycontainer { display: flex; ...
Read MorePerform Animation on CSS border-top-right-radius property
The CSS border-top-right-radius property defines the radius of the top-right corner of an element's border. You can create smooth animations on this property to create engaging visual effects. Syntax selector { border-top-right-radius: value; animation: animation-name duration timing-function; } @keyframes animation-name { from { border-top-right-radius: initial-value; } to { border-top-right-radius: final-value; } } Example: Animating Border Top Right Radius The following example demonstrates how to animate the border-top-right-radius property from 0 to 80px − ...
Read MoreAlign flex items at the beginning of the container with CSS
The CSS justify-content property with the flex-start value is used to align flex items at the beginning of the flex container along the main axis. This is the default behavior for flex containers, positioning items at the start of the container. Syntax .container { display: flex; justify-content: flex-start; } Example The following example demonstrates how to align flex items at the beginning of the container using justify-content: flex-start − .mycontainer { ...
Read MoreAnimate CSS border-spacing property
The CSS border-spacing property controls the distance between the borders of adjacent table cells. When animated, it creates a dynamic effect where the spacing between cells changes smoothly over time. Syntax selector { border-spacing: value; animation: animation-name duration timing-function; } Example The following example animates the border-spacing property from 0px to 20px − table { border-collapse: separate; border-spacing: 0px; ...
Read MorePerform Animation on border-right-width property
The CSS border-right-width property can be animated to create smooth transitions of the right border thickness. This creates engaging visual effects where the border grows or shrinks over time. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-right-width: initial-value; } to { border-right-width: final-value; } } Example The following example demonstrates animating the border-right-width from 15px to 25px − .animated-border { ...
Read MoreUsage of calc() CSS function
The CSS calc() function allows you to perform mathematical calculations to determine CSS property values. It enables dynamic calculations using different units like pixels, percentages, em, rem, and viewport units. Syntax selector { property: calc(expression); } Possible Values OperatorDescriptionExample +Additioncalc(100px + 50px) -Subtractioncalc(100% - 20px) *Multiplicationcalc(50px * 2) /Divisioncalc(200px / 4) Example: Dynamic Width Calculation The following example creates a div that spans the full width minus 100px for margins − body { ...
Read MoreAnimate CSS border-left-color property
The CSS border-left-color property can be animated to create smooth color transitions on the left border of an element. This animation effect is useful for creating interactive hover states, loading indicators, or visual emphasis. Syntax selector { border-left-color: color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-left-color: initial-color; } to { border-left-color: final-color; } } Example The following example demonstrates how to animate the border-left-color property from yellow to lightblue − ...
Read MoreAnimate border-left property with CSS
The CSS border-left property can be animated to create smooth transitions between different border styles, widths, and colors. This animation technique is useful for creating interactive hover effects or drawing attention to specific elements. Syntax @keyframes animationName { from { border-left: initial-value; } to { border-left: final-value; } } selector { animation: animationName duration timing-function iteration-count; } Example: Animating Border Left Width and Color The following example demonstrates how to animate the border-left property by changing its width and color − ...
Read MoreAnimate border-color property with CSS
The CSS border-color property can be animated to create dynamic color transitions on element borders. This animation effect is useful for hover states, attention-grabbing elements, or interactive UI components. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { border-color: color-value; } } Example: Basic Border Color Animation The following example animates the border color from gray to red and back − ...
Read MorePerform Animation on border-bottom-width CSS property
The CSS border-bottom-width property can be animated to create dynamic visual effects. By using CSS animations, you can smoothly transition the bottom border width from one value to another over a specified duration. Syntax selector { border-bottom-width: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-bottom-width: initial-value; } to { border-bottom-width: final-value; } } Example The following example demonstrates how to animate the border-bottom-width property from 5px to 50px − ...
Read More