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
Page 8 of 24
Usage 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 MoreRotate In Animation Effect with CSS
The CSS rotate in animation effect creates a smooth spinning motion that rotates an element into view from a specified angle. This animation is commonly used for entrance effects where elements appear to spin into position while fading in. Syntax @keyframes rotateIn { 0% { transform: rotate(-200deg); opacity: 0; } 100% { transform: rotate(0deg); ...
Read MoreFade Out Up Big Animation Effect with CSS
The CSS Fade Out Up Big animation creates a dramatic exit effect where an element fades out while moving upward by a large distance. This animation is perfect for removing elements with an impactful visual transition. Syntax @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); ...
Read More