CSS Text Effects

CSS text effects allow you to enhance and style text in various ways. These effects can make text more engaging, emphasize certain parts, or contribute to the overall design of a web page.

Common CSS Text Effects

• Text Shadow: Adds shadows behind text.
• Text Transform: Changes the case of text.
• Text Decoration: Adds decorations like underline, overline, and strikethrough.
• Text Stroke: Adds an outline around text (not widely supported).
• Text Overflow: Manages how text is displayed when it overflows its container.

Text Shadow

The `text-shadow` property adds shadow effects to text. You can specify the horizontal and vertical offsets, blur radius, and color of the shadow.

/* Text Shadow Syntax */
text-shadow:    ;

        

/* Text Shadow Example */
.text-shadow-example {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

            

Text Transform

The `text-transform` property changes the case of text. Common values are `uppercase`, `lowercase`, and `capitalize`.

/* Text Transform Syntax */
text-transform: ;

        

/* Text Transform Example */
.text-transform-example {
    text-transform: uppercase;
}

            

Text Decoration

The `text-decoration` property adds decorations to text, such as underline, overline, and line-through.

/* Text Decoration Syntax */
text-decoration: ;

        

/* Text Decoration Example */
.text-decoration-example {
    text-decoration: underline;
}

            

Text Stroke

The `text-stroke` property adds an outline around text. Note that this property is not supported in all browsers.

/* Text Stroke Syntax */
-webkit-text-stroke:  ;

        

/* Text Stroke Example */
.text-stroke-example {
    -webkit-text-stroke: 1px black;
}

            

Text Overflow

The `text-overflow` property controls how text is displayed when it overflows its container. Common values are `ellipsis`, `clip`, and `string`.

/* Text Overflow Syntax */
text-overflow: ;

        

/* Text Overflow Example */
.text-overflow-example {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}