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 653 of 801
Break 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 MoreTypes of Gradients in CSS
CSS gradients create smooth transitions between two or more specified colors. They are essential for modern web design, allowing you to create beautiful color transitions without using images. Syntax /* Linear Gradient */ background: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background: radial-gradient(shape size at position, color1, color2, ...); Types of Gradients CSS provides two main types of gradients − Linear Gradients − Transitions along a straight line (down/up/left/right/diagonally) Radial Gradients − Transitions radiating from a center point in a circular or elliptical pattern Linear Gradient Example ...
Read MoreCSS3 Left to right Gradient
CSS3 left to right gradient creates a smooth color transition that flows horizontally from the left edge to the right edge of an element. This is achieved using the linear-gradient() function with the to right direction. Syntax selector { background: linear-gradient(to right, color1, color2, ...); } Example: Basic Left to Right Gradient The following example creates a red to blue gradient flowing from left to right − .gradient-box { height: 100px; ...
Read MoreCSS3 Multi color Gradients
CSS3 multi-color gradients allow you to create smooth transitions between multiple colors in a single gradient. Unlike simple gradients that use only two colors, multi-color gradients can include three or more colors to create vibrant, complex color effects. Syntax selector { background: linear-gradient(direction, color1, color2, color3, ...); } Example The following example demonstrates a multi-color linear gradient with seven colors − #grad { height: 100px; ...
Read MoreCSS3 Repeat Radial Gradients
The CSS repeating-radial-gradient() function creates a radial gradient that repeats in a circular pattern. Unlike regular radial gradients, the pattern repeats continuously from the center outward, creating concentric rings of color transitions. Syntax selector { background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...); } Possible Values ParameterDescription shapeOptional. circle or ellipse (default) sizeOptional. closest-side, farthest-side, closest-corner, farthest-corner positionOptional. Position of the center (e.g., center, top left) color-stopColor followed by optional position percentage or length Example: Basic Repeating Radial Gradient The following example creates a repeating radial ...
Read More