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 Lakshmi Srinivas
233 articles
Animate 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 MoreDisplay the flex items with space between the lines in CSS
The CSS justify-content property with the space-between value distributes flex items evenly across the main axis, placing the first item at the start and the last item at the end, with equal space between all items. Syntax selector { display: flex; justify-content: space-between; } Example You can try to run the following code to implement the space-between value − .mycontainer { ...
Read MoreUsage of CSS grid-row-start property
The CSS grid-row-start property specifies on which row line a grid item will start. This property allows you to control the exact row position where a grid item begins, giving you precise control over grid layout positioning. Syntax selector { grid-row-start: value; } Possible Values ValueDescription autoDefault value. The item will be placed automatically line-numberSpecifies which row line to start at (1, 2, 3, etc.) line-nameSpecifies a named grid line to start at span nSpecifies how many rows the item will span Example: Basic Grid Row Start ...
Read MoreCSS unicode-bidi Property
The CSS unicode-bidi property controls the bidirectional text algorithm, determining how text with mixed left-to-right and right-to-left content should be displayed. This property is essential when working with multilingual content that includes languages like Arabic, Hebrew, or Persian alongside Latin-based languages. Syntax selector { unicode-bidi: value; } Possible Values ValueDescription normalDefault behavior, follows Unicode bidirectional algorithm embedCreates an additional level of embedding bidi-overrideForces text direction override based on direction property isolateIsolates element from surrounding text for bidirectional calculations isolate-overrideCombines isolate and bidi-override behaviors Example: Comparing Different Unicode-bidi ...
Read MoreCSS hanging-punctuation Property
The CSS hanging-punctuation property allows punctuation marks to be positioned outside the line box at the beginning or end of text lines. This creates better visual alignment by preventing punctuation from affecting text indentation. Syntax selector { hanging-punctuation: value; } Possible Values ValueDescription noneNo punctuation marks hang outside the line box (default) firstPunctuation at the start of the first line hangs outside lastPunctuation at the end of the last line hangs outside allow-endPunctuation at the end of lines may hang outside force-endPunctuation at the end of lines must hang ...
Read MoreAnimate CSS border-top property
The CSS border-top property can be animated to create dynamic visual effects. You can animate the border width, color, and style using CSS animations and transitions. Syntax selector { border-top: width style color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-top: initial-value; } to { border-top: final-value; } } Example: Animating Border Top Width and Color The following example demonstrates how to animate the border-top property by changing its width and color − ...
Read MoreUsage of attr() CSS function
The attr() CSS function returns the value of an attribute of the selected element. It's commonly used with the content property in ::before and ::after pseudo-elements to display attribute values dynamically. Syntax attr(attribute-name) Parameters ParameterDescription attribute-nameThe name of the HTML attribute whose value you want to retrieve Example 1: Displaying href Attribute The following example displays the URL next to each link using the attr() function − a::before { content: " (" ...
Read MoreAnimate bottom CSS property
The CSS bottom property can be animated to create smooth transitions when changing an element's position from the bottom edge of its containing block. This is particularly useful for creating sliding effects and dynamic positioning animations. Syntax selector { animation: animation-name duration timing-function iteration-count; bottom: initial-value; position: absolute | relative | fixed; } @keyframes animation-name { percentage { bottom: target-value; } } Example: Animating Bottom Property ...
Read MorePerform Animation on CSS border-bottom-right-radius property
The CSS border-bottom-right-radius property creates rounded corners on the bottom-right of an element. You can animate this property to create smooth transitions between different radius values, providing dynamic visual effects. Syntax selector { border-bottom-right-radius: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-bottom-right-radius: initial-value; } to { border-bottom-right-radius: final-value; } } Example The following example demonstrates how to animate the border-bottom-right-radius property − ...
Read MoreDisplay the flex lines in the center of the container with CSS
The CSS align-content property is used to control how flex lines are distributed along the cross-axis in a flex container. When set to center, it positions all flex lines in the center of the container. Syntax selector { align-content: center; } Example The following example demonstrates how to center flex lines within a container − .mycontainer { display: flex; height: 300px; ...
Read More