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
CSS Articles
Page 79 of 130
CSS 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 MoreUsage of CSS grid-auto-columns property
The CSS grid-auto-columns property sets the default size for columns that are created implicitly in a grid container. This property is useful when grid items are placed outside the explicitly defined grid tracks. Syntax .container { grid-auto-columns: value; } Possible Values ValueDescription lengthFixed size using px, em, rem, etc. %Percentage of the container width frFractional unit for flexible sizing autoSize based on content (default) min-contentMinimum size needed for content max-contentMaximum size needed for content Example: Fixed Column Size The following example demonstrates grid-auto-columns with a fixed ...
Read MoreUsage of cubic-bezier() CSS function
The CSS cubic-bezier() function allows you to define custom timing functions for animations and transitions using cubic Bézier curves. This gives you precise control over the acceleration and deceleration of your animations. Syntax selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); animation-timing-function: cubic-bezier(x1, y1, x2, y2); } The four parameters define two control points for the curve, where x1, y1 is the first control point and x2, y2 is the second control point. All values must be between 0 and 1. Parameters ParameterDescriptionRange x1X coordinate ...
Read More