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 515 of 652
Perform Animation on CSS line-height property
The CSS line-height property can be animated to create smooth transitions between different line spacing values. This is useful for creating dynamic text effects where the vertical spacing between lines changes over time. Syntax selector { line-height: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { line-height: initial-value; } to { line-height: final-value; } } Example: Basic Line Height Animation The following example demonstrates how to animate the line-height property from 20px to 50px ...
Read MoreAnimate CSS column-rule-color property
The CSS column-rule-color property defines the color of the rule (line) between columns in a multi-column layout. You can animate this property to create dynamic visual effects where the column divider changes color over time. Syntax selector { column-rule-color: color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { column-rule-color: initial-color; } to { column-rule-color: final-color; } } Example The following example demonstrates animating the column-rule-color property from orange to black − ...
Read MoreCSS white-space Property
The CSS white-space property controls how white-space characters (spaces, tabs, line breaks) inside an element are handled. It determines whether white-space is preserved, collapsed, or wrapped. Syntax selector { white-space: value; } Possible Values ValueDescription normalDefault. White-space is collapsed and text wraps normally nowrapWhite-space is collapsed but text does not wrap preWhite-space is preserved and text does not wrap pre-wrapWhite-space is preserved but text wraps when necessary pre-lineWhite-space is collapsed except for line breaks Example: Comparing white-space Values The following example demonstrates different white-space property values ...
Read MoreCSS nav-down property
The CSS nav-down property defines which element should receive focus when the user presses the down arrow key. This property is part of CSS spatial navigation, designed primarily for TV remotes and game controllers where users navigate using directional keys. Syntax selector { nav-down: target; } Possible Values ValueDescription autoBrowser determines the next element (default) idID of the element to focus when down arrow is pressed inheritInherits the value from parent element Example: Creating Navigation Grid The following example creates a grid of buttons where pressing ...
Read MoreAnimate CSS border-top-color property
The CSS border-top-color property can be animated to create dynamic color transitions on an element's top border. This property defines the color of the top border and can smoothly transition between different color values using CSS animations. Syntax selector { border-top-color: color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-top-color: initial-color; } to { border-top-color: final-color; } } Example The following example demonstrates how to animate the border-top-color property from yellow to red ...
Read MoreUsage of CSS grid-auto-flow property
The CSS grid-auto-flow property controls how auto-placed items are inserted in the grid container. It determines whether new items are placed in rows or columns and the direction of placement. Syntax selector { grid-auto-flow: value; } Possible Values ValueDescription rowAuto-placed items fill rows first (default) columnAuto-placed items fill columns first row denseFill rows and pack items densely column denseFill columns and pack items densely Example 1: Column Flow The following example uses grid-auto-flow: column to place items in columns − ...
Read MoreSet whether the text of the element can be selected or not with CSS
Use the CSS user-select property to control whether the text content of an element can be selected by the user. This property is useful for preventing text selection in UI elements like buttons, navigation menus, or decorative text. Syntax selector { user-select: value; } Possible Values ValueDescription autoDefault behavior - text can be selected noneText cannot be selected textText can be selected allAll content is selected with a single click Example: Preventing Text Selection The following example demonstrates how to prevent text selection using user-select: none ...
Read MoreChange CSS filter property with Animation
The CSS filter property can be animated to create smooth visual effects on elements. By combining filter with CSS animations, you can create dynamic transitions between different filter states like brightness, contrast, blur, and more. Syntax selector { filter: filter-function(value); animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { filter: initial-value; } to { filter: final-value; } } Example: Animated Contrast Filter The following example demonstrates animating the contrast filter on an image − ...
Read MoreChange CSS columns property with Animation
The CSS columns property can be animated to create dynamic multi-column layouts. This property is a shorthand for column-width and column-count, allowing you to animate column changes smoothly. Syntax selector { columns: column-width column-count; animation: animation-name duration timing-function; } Example: Animating Column Properties The following example demonstrates how to animate the columns property along with related column styling − .container { width: 600px; ...
Read MoreUsage of rgba() CSS function
The rgba() CSS function is used to define colors using the Red, Green, Blue, and Alpha (transparency) model. It extends the basic rgb() function by adding an alpha channel that controls the opacity of the color. Syntax selector { property: rgba(red, green, blue, alpha); } Possible Values ParameterValue RangeDescription red0-255Red component of the color green0-255Green component of the color blue0-255Blue component of the color alpha0-1Opacity level (0 = transparent, 1 = opaque) Example: Using rgba() with Different Alpha Values The following example demonstrates rgba() colors with ...
Read More