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 76 of 130
Understanding the CSS3 Filter Functions
The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions. Syntax filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, and url. Invert The invert() function is used to invert the color samples in an image. ...
Read MoreSet areas within the grid layout in CSS
The CSS grid-template-areas property allows you to define named grid areas within a grid layout, making it easy to position grid items by name rather than line numbers. This property works with grid-area to create intuitive and maintainable grid layouts. Syntax .grid-container { display: grid; grid-template-areas: "area-name area-name . . ." "area-name area-name . . ."; } .grid-item { grid-area: area-name; } Key Properties ...
Read MoreChanging the Default Display Value using CSS
Every element in CSS has a default display value that determines how it appears on the webpage. We can easily change this default behavior by explicitly setting the display property to a different value. Syntax selector { display: value; } Common Display Values ValueDescription blockElement takes full width and starts on new line inlineElement takes only necessary width and flows with text inline-blockCombines properties of both inline and block noneElement is completely hidden Example 1: Changing List Items to Inline Display By default, list items () ...
Read MoreSet 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 More