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 112 of 130
CSS3 Multi-Column rule-width Property
The CSS column-rule-width property is used to specify the width of the rule (line) that appears between columns in a multi-column layout. This property works in conjunction with column-rule-style and column-rule-color to create visual separators between columns. Syntax selector { column-rule-width: value; } Possible Values ValueDescription thinA thin rule (typically 1px) mediumA medium rule (typically 3px) - default value thickA thick rule (typically 5px) lengthA specific width in px, em, rem, etc. Example: Using column-rule-width Property The following example demonstrates the column-rule-width property with a 5px ...
Read MoreMatrix Transform in another direction with CSS
The CSS matrix() transform function allows you to apply complex 2D transformations including scaling, rotating, skewing, and translating elements in different directions. By adjusting the matrix parameters, you can create various transformation effects. Syntax transform: matrix(a, b, c, d, tx, ty); Where: a and d − scaling on x and y axis b and c − skewing on x and y axis tx and ty − translation on x and y axis Example: Matrix Transform with Skew and Translation The following example demonstrates how to use matrix transform to skew and ...
Read MoreRotate div to -20 degrees angle with CSS
The CSS transform property with rotate() function allows you to rotate an element by a specified angle. To rotate a div to -20 degrees, you apply a negative rotation value which rotates the element clockwise. Syntax selector { transform: rotate(angle); } Example The following example demonstrates how to rotate a div to -20 degrees angle − div { width: 300px; height: 100px; ...
Read More2D transforms in CSS3
CSS 2D transforms allow you to modify the appearance of elements by translating, rotating, scaling, and skewing them in 2D space without affecting document flow. Syntax selector { transform: function(value); } Transform Functions FunctionDescription translate(x, y)Moves element along x and y axes translateX(n)Moves element along x-axis only translateY(n)Moves element along y-axis only scale(x, y)Changes element size (width and height) scaleX(n)Changes element width only scaleY(n)Changes element height only rotate(angle)Rotates element by specified angle skewX(angle)Skews element along x-axis skewY(angle)Skews element along y-axis matrix(a, b, c, d, e, f)Combines all transforms using ...
Read MoreBreak the line and wrap onto next line with CSS
The CSS word-wrap property allows you to break long words and wrap them onto the next line when they exceed their container's width. This is particularly useful for preventing text overflow in fixed-width containers. Syntax selector { word-wrap: value; } Possible Values ValueDescription normalDefault. Break words only at normal word break points break-wordAllows unbreakable words to be broken at arbitrary points Example: Breaking Long Words The following example demonstrates how to break long words that exceed the container width − ...
Read MoreDetermine how overflowed content that is not displayed is signaled to users with CSS
The text-overflow property is used to determine how overflowed content that is not displayed is signaled to users with CSS. It controls the visual indication when text content exceeds its container's boundaries. Syntax selector { text-overflow: value; } Possible Values ValueDescription clipText is clipped and no indication is shown (default) ellipsisText is clipped and an ellipsis (...) is displayed stringCustom string to represent clipped text (limited browser support) Example The following example demonstrates both clip and ellipsis values for the text-overflow property − ...
Read MoreAlign the last line of the text with CSS
The text-align-last property in CSS is used to align the last line of a text block. This property is particularly useful when you want the final line of a paragraph to have different alignment than the rest of the text. Syntax selector { text-align-last: value; } Possible Values ValueDescription leftAligns the last line to the left rightAligns the last line to the right centerCenters the last line justifyJustifies the last line autoDefault value, follows text-align property Example: Aligning Last Line to Right The following example demonstrates ...
Read MoreCSS text-emphasis property
The CSS text-emphasis property is used to apply emphasis marks to text elements. It allows you to add decorative marks above or below text while also controlling their color and style. Syntax selector { text-emphasis: text-emphasis-style text-emphasis-color; } Property Values PropertyDescription text-emphasis-styleDefines the type of emphasis marks (filled, open, dot, circle, etc.) text-emphasis-colorSets the foreground color of the emphasis marks Example: Basic Text Emphasis The following example demonstrates how to apply emphasis marks to text − ...
Read MoreAdd shadow effects to text with CSS
The text-shadow property in CSS is used to add shadow effects to text, creating depth and visual appeal. This property helps make text stand out and gives it a three-dimensional appearance on web pages. Syntax text-shadow: h-shadow v-shadow blur-radius color; Property Values ValueDescription h-shadowHorizontal offset of the shadow (required) v-shadowVertical offset of the shadow (required) blur-radiusBlur distance (optional, default is 0) colorShadow color (optional, uses text color if not specified) Example 1: Basic Text Shadow The following example shows a simple shadow with horizontal and vertical offset − ...
Read MoreCSS Text Shadow
The CSS text-shadow property adds shadow effects to text. You can create simple shadows, colored shadows, blurred shadows, and even multiple shadows for creative text effects. Syntax selector { text-shadow: h-offset v-offset blur-radius color; } Possible Values ValueDescription h-offsetHorizontal offset of the shadow (required) v-offsetVertical offset of the shadow (required) blur-radiusBlur radius of the shadow (optional) colorColor of the shadow (optional, defaults to current text color) Example: Various Text Shadow Effects The following example demonstrates different text shadow variations − ...
Read More