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
Web Development Articles
Page 617 of 801
Set the kind of decoration used on text in CSS
The CSS text-decoration-line property is used to set the kind of decoration line that appears on text. This property controls whether text has an underline, overline, strikethrough, or no decoration at all. Syntax text-decoration-line: none|underline|overline|line-through|initial|inherit; Possible Values ValueDescription noneNo line for the text decoration (default) underlineA line gets displayed under the text overlineA line gets displayed over the text line-throughA line gets displayed through the text Example: Overline Decoration The following example shows how to add an overline decoration to text − ...
Read More:active pseudo class in CSS
The CSS :active pseudo-class represents an element that is being activated by the user. This occurs during the brief moment when the element is being clicked or pressed, typically on links, buttons, or any clickable element. Syntax selector:active { property: value; } Example 1: Active Link Color The following example changes the link color to green when clicked − a:active { color: green; } ...
Read MoreDifference between PX, EM and Percent
In CSS, units of measurement define how sizes and distances are calculated. The three most commonly used units are px (pixels), em (relative to font size), and % (percentage). Each has different behaviors and use cases. Syntax selector { property: value px; /* Absolute pixel units */ property: value em; /* Relative to font size */ property: value%; /* Percentage of parent element */ } Unit Comparison UnitTypeRelative ToBest For ...
Read MoreAnimate CSS word-spacing property
The CSS word-spacing property controls the space between words in text. You can animate this property to create dynamic text effects where the spacing between words changes smoothly over time. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { word-spacing: initial-value; } to { word-spacing: final-value; } } Example: Animating Word Spacing The following example demonstrates how to animate the word-spacing property from normal spacing to 30px and back − ...
Read MoreAnimate transform property with CSS Animation
The CSS transform property can be animated using CSS animations to create smooth transitions and visual effects. By combining transform functions like rotate(), scale(), translate(), and skew() with keyframes, you can create engaging animations. Syntax @keyframes animation-name { from { transform: initial-value; } to { transform: final-value; } } selector { animation: animation-name duration timing-function; } Example 1: ...
Read MoreAnimate vertical-align property with CSS Animation
The CSS vertical-align property can be animated using CSS animations to create smooth transitions between different vertical alignment values. This is particularly useful for animating inline elements like images, text, or inline-block elements. Syntax selector { vertical-align: initial-value; animation: animation-name duration; } @keyframes animation-name { percentage { vertical-align: target-value; } } Example: Animating Image Vertical Alignment The following example demonstrates how to animate the vertical alignment of an image ...
Read MoreCSS rest-after Speech Media property
The CSS rest-after property is used in speech media to specify a pause or rest period after an element is spoken. This property is particularly useful for screen readers and text-to-speech applications to create natural-sounding speech patterns. Syntax selector { rest-after: time | none | x-weak | weak | medium | strong | x-strong; } Possible Values ValueDescription Sets pause duration in seconds (s) or milliseconds (ms) noneNo pause after the element x-weakExtra weak pause (shortest) weakWeak pause mediumMedium pause (default) strongStrong pause x-strongExtra strong pause (longest) ...
Read MoreCSS top property with Animation
The CSS top property specifies the vertical position of a positioned element. When combined with CSS animations, you can create smooth movement effects by animating changes to the top value over time. Syntax selector { top: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { top: value; } } Example: Animating Top Property The following example demonstrates how to animate the top property to create a ...
Read MoreAnimate CSS text-decoration-color property
The CSS text-decoration-color property controls the color of text decorations like underlines, overlines, and line-throughs. You can animate this property to create smooth color transitions in text decorations. Syntax selector { text-decoration-color: color; animation: animation-name duration timing-function; } Example: Animating Text Decoration Color The following example demonstrates how to animate the text-decoration-color property from the default color to orange − .animated-text { font-size: 24px; ...
Read MorePerform Animation on CSS perspective property
The CSS perspective property defines how far an element is placed from the view, giving it a 3D effect. When animated, it creates dynamic depth changes that make 3D transformations more or less pronounced over time. Syntax selector { perspective: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { perspective: initial-value; } to { perspective: final-value; } } Example The following example animates the perspective property to create a dynamic 3D effect on a ...
Read More