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
Web Development Articles
Page 622 of 801
Usage 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 MorePerform Animation on the background-color property with CSS
The CSS background-color property can be animated using CSS animations and keyframes to create smooth color transitions. This technique is commonly used to create hover effects, attention-grabbing elements, and interactive visual feedback. Syntax selector { background-color: initial-color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { background-color: target-color; } } Example: Basic Background Color Animation The following example demonstrates a continuous background color animation that transitions from ...
Read MoreAnimated background with CSS
CSS animated backgrounds allow you to create dynamic visual effects by changing background properties over time. The @keyframes rule defines the animation sequence, while the animation property applies it to elements. Syntax @keyframes animation-name { from { background: initial-state; } to { background: final-state; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Color Transition Animation The following example demonstrates a smooth background color transition that cycles through different colors − ...
Read MoreSet the initial length of a flex item with CSS
The CSS flex-basis property sets the initial main size of a flex item before free space is distributed. It defines the default size of an element before the remaining space is distributed according to the flex factors. Syntax selector { flex-basis: value; } Possible Values ValueDescription autoDefault value. The length is equal to the length of the flexible item lengthA length unit (px, em, rem, etc.) specifying the initial length %A percentage of the parent container's main size contentSize based on the item's content Example The ...
Read MoreSet how much a flex item will grow relative to the rest of the flex items with CSS
The CSS flex-grow property controls how much a flex item will grow relative to the rest of the flex items inside a flex container. When there's extra space available, this property determines how that space is distributed among flex items. Syntax selector { flex-grow: number; } Possible Values ValueDescription 0Default value. Item will not grow. numberA positive number that defines the growth factor relative to other flex items. Example: Basic Flex Grow The following example demonstrates how flex-grow distributes extra space. The third item (Q3) has ...
Read MoreAvoid wrapping flex items with CSS
The CSS flexbox layout allows you to arrange elements in flexible containers. By default, flex items try to fit in a single line, but when they exceed the container width, they may wrap to new lines. To prevent this wrapping behavior, you can use the flex-wrap property with the nowrap value. Syntax .container { display: flex; flex-wrap: nowrap; } CSS flex-wrap Property The flex-wrap property controls whether flex items wrap onto multiple lines or stay on a single line. When set to nowrap, all flex items ...
Read More