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
Front End Technology Articles
Page 512 of 652
writing-mode Property in CSS
The CSS writing-mode property controls the direction in which text flows within an element. It's particularly useful for creating layouts that match different language writing systems or for creating unique design effects. Syntax selector { writing-mode: value; } Possible Values ValueDescription horizontal-tbContent flows horizontally from left to right and vertically from top to bottom (default) vertical-rlContent flows vertically from top to bottom and horizontally from right to left vertical-lrContent flows vertically from top to bottom and horizontally from left to right Example 1: Vertical Writing (Right to ...
Read MoreSetting Text Color using CSS
The CSS color property is used to set the text color of HTML elements. You can specify colors using various formats including color names, hexadecimal values, RGB values, or HSL values. Syntax selector { color: value; } Possible Values Value TypeDescriptionExample Color NamePredefined color namesred, blue, green Hexadecimal6-digit hex code#FF0000, #00FF00 RGBRed, Green, Blue valuesrgb(255, 0, 0) HSLHue, Saturation, Lightnesshsl(0, 100%, 50%) Example: Using Color Names This example demonstrates setting text color using predefined color names − ...
Read MoreUnderstanding 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 More