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
Articles by Chandu yadav
Page 21 of 81
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 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 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 MoreUsage of CSS grid-auto-rows property
The CSS grid-auto-rows property sets the default height for grid rows that are created automatically (implicitly) when grid items don't fit in the explicitly defined rows. This property is essential for controlling the sizing of rows in CSS Grid layouts. Syntax selector { grid-auto-rows: value; } Possible Values ValueDescription lengthFixed size in px, em, rem, etc. %Percentage of the grid container's height min-contentMinimum size needed to fit content max-contentMaximum size needed for content autoSize based on content (default) frFraction of available space Example: Fixed Row Height ...
Read MoreSet whether the text should be overridden to support multiple languages with CSS
The CSS unicode-bidi property controls how bidirectional text is handled in HTML elements. This property is essential when working with documents that contain text in multiple languages with different writing directions, such as mixing English (left-to-right) with Arabic or Hebrew (right-to-left). Syntax selector { unicode-bidi: value; } Possible Values ValueDescription normalDefault value. Does not use additional embedding level bidi-overrideCreates an additional level of embedding and overrides the inherent directionality isolateIsolates the element from its surroundings for bidirectional text algorithm embedCreates an additional level of embedding Example: Bidirectional ...
Read MoreHow to specify the size of the gap between rows in CSS Grid
Use the grid-row-gap property to set the size of the gap between rows in CSS Grid. This property controls the vertical spacing between grid items, making your layouts more visually appealing and well-structured. Syntax selector { grid-row-gap: value; } Possible Values ValueDescription lengthDefines the gap size in px, em, rem, etc. %Defines the gap as a percentage of the container normalDefault value, typically 0 Example The following example demonstrates a CSS Grid layout with a 50px gap between rows − ...
Read MoreCSS Grid Columns
The CSS Grid Layout provides a powerful way to create web layouts using rows and columns. In CSS Grid, grid columns are the vertical tracks that divide the grid container into sections where grid items can be positioned. Item 1 Item 2 Item 3 ...
Read MoreUse CSS width property for a responsive video player
The CSS width property can be used to create responsive video players that automatically adjust their size based on the container or viewport width. By setting width: 100% and height: auto, the video maintains its aspect ratio while scaling fluidly. Syntax video { width: 100%; height: auto; } Example: Basic Responsive Video Player The following example creates a responsive video player that scales with the browser window − ...
Read MoreCSS shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
The CSS flex property is a shorthand that combines flex-grow, flex-shrink, and flex-basis properties in a single declaration. It controls how flex items grow, shrink, and their initial size within a flex container. Syntax selector { flex: flex-grow flex-shrink flex-basis; } Possible Values PropertyDescriptionDefault Value flex-growHow much the item should grow (number)0 flex-shrinkHow much the item should shrink (number)1 flex-basisInitial size before growing/shrinkingauto Example The following example demonstrates how the flex property affects item sizing within a flex container − ...
Read MoreVariables in CSS
Variables in CSS are used to store values that can be reused throughout your stylesheet. They allow you to define custom properties with meaningful names and reference them anywhere in your CSS, making your code more maintainable and easier to update. Syntax /* Define variables */ :root { --variable-name: value; } /* Use variables */ selector { property: var(--variable-name); } Key Points CSS variables are defined with -- prefix The :root selector makes variables globally accessible Use var() function to access variable values Variable ...
Read More