CSS - Text Effects

Text Color

The color property in CSS lets you set the color of text elements. You can specify the text color using formats like color names, hexadecimal values, RGB, and HSL.

To set the text color, use the color property followed by the desired color value.

p {
  color: blue;
}

All <p> elements will have a blue text color.

CSS provides many predefined color names that you can use, such as red, green, blue, and yellow. For more precise control over colors, you can use hexadecimal values, RGB, or HSL.

Hexadecimal values are represented by a # followed by six characters. Each pair of characters shows the intensity of red, green, and blue components.

• #ff0000 represents pure red
• #00ff00 represents pure green
• #0000ff represents pure blue

RGB values are specified using the rgb() function with three parameters representing red, green, and blue components (each ranging from 0 to 255).

• rgb(255, 0, 0) represents pure red
• rgb(0, 255, 0) represents pure green
• rgb(0, 0, 255) represents pure blue

HSL values are specified using the hsl() function which stands for hue (angle from 0 to 360 degrees), saturation (percentage), and lightness (percentage).

• hsl(120, 100%, 50%) is for green
• hsl(240, 100%, 50%) is for blue

Text colors can be inherited by child elements from their parent elements unless explicitly overridden. The cascading nature of CSS also applies to text colors where more specific rules take precedence.

<div class="parent">
   <p>This text inherits its parent's color.</p>
   <p class="child">This text has its own color.</p>
</div>

.parent {
    color: green;
}

.child {
    color: blue;
}

The first <p> element will have a green text inherited from the parent <div>. The second <p> element with class "child" will have a blue text due to the specific rule applied.

Text Alignment

The text-align property in CSS lets you control the horizontal alignment of text within an element. You can align text to the left, right, center, or justify it.

To set the text alignment, use the text-align property followed by one of these values: left, right, center, or justify.

p {
  text-align: center;
}

• text-align: left; aligns the text to the left side of the element. This is the default.
• text-align: right; aligns the text to the right side of the element.
• text-align: center; centers the text within the element.
• text-align: justify; stretches the text to fill up full width of an element, creating even spacing between words.

You can also set direction using properties like direction and unicode-bidi. These are useful for languages with different writing directions like Arabic or Hebrew.

The direction property sets direction while the unicode-bidi property handles bidirectional texts.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

By combining these properties you can control both horizontal alignment and direction of your content.

Text Decoration

The text-decoration property in CSS allows you to add lines to your text, such as underlines, overlines, or line-throughs. You can control the style, color, and thickness of these decorations.

To add a decoration to your text, use the text-decoration property followed by one or more of these values: underline, overline, or line-through.

p {
  text-decoration: underline;
}

h1 {
  text-decoration: overline;
}

a {
  text-decoration: line-through;
}

You can also combine multiple decorations by separating the values with a space.

p {
  text-decoration: underline overline;
}

To further control the appearance of the decorations, you can use these properties:

• text-decoration-line: Specifies the type of decoration (underline, overline, line-through).
• text-decoration-color: Sets the color of the decoration.
• text-decoration-style: Determines the style of the decoration (solid, double, dotted, dashed).

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

You can also set the thickness using text-decoration-thickness. It accepts length values or keywords like auto, from-font, or thick.

p {
  text-decoration-line: overline;
  text-decoration-thickness: 5px;
}

Text Transformation

The text-transform property in CSS lets you change the capitalization of text. You can transform text to uppercase, lowercase, or capitalize the first letter of each word.

To transform text, use the text-transform property followed by one of these values: uppercase, lowercase, or capitalize.

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

.title {
  text-transform: capitalize;
}

<p>This is a regular paragraph.</p>
<p class="uppercase">This paragraph will be in uppercase.</p>
<p class="capitalize">this paragraph will be capitalized.</p>

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

Text transformations help maintain consistency in capitalization style for certain elements like headings or buttons without manually typing them in a specific case.

The text-transform property only changes how the text looks and does not alter its actual content. Screen readers and other assistive technologies still read it in its original case.

Text Spacing

CSS provides properties to control the spacing and positioning of text, including letter spacing, word spacing, line height, and vertical alignment.

To adjust the space between characters, use the letter-spacing property. It accepts length values, either positive or negative.

p {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -0.5px;
}

Positive values increase the space between characters; negative values decrease it. This helps improve readability or create specific typographic styles.

To control whitespace between words, use the word-spacing property. It also accepts length values.

p {
  word-spacing: 10px;
}

.narrow {
  word-spacing: -2px;
}

Increasing word spacing can help readability for longer texts. Decreasing it can create a more compact look.

The line-height property sets the height of each line of text. It accepts length values, percentages, or unitless values.

p {
  line-height: 1.5;
}

.tall {
  line-height: 200%;
}

Adjusting line height can improve readability by providing enough vertical space between lines and affects overall visual rhythm.

The vertical-align property controls vertical alignment of inline elements relative to each other or to their container's baseline. Common values include baseline, top, middle, and bottom.

img {
  vertical-align: middle;
}

.subscript {
  vertical-align: sub;
}

Vertical alignment is useful for aligning inline items like images or icons with surrounding text.

Text Shadow

The text-shadow property in CSS lets you create shadow effects for text elements. You can specify the shadow's offset, blur radius, and color to achieve various visual effects.

To create a text shadow, use the text-shadow property followed by values representing the horizontal offset, vertical offset, blur radius, and color.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

The text-shadow property accepts multiple values separated by commas:

• Horizontal offset: Specifies the horizontal distance of the shadow from the text. Positive values move the shadow to the right; negative values move it to the left.
• Vertical offset: Specifies the vertical distance of the shadow from the text. Positive values move it downward; negative values move it upward.
• Blur radius (optional): Determines how much blur is applied to the shadow. A larger value creates a softer and more diffused effect.
• Color: Sets the color of the shadow using names or hexadecimal/RGB/HSL values.

p {
  text-shadow: -2px -2px 0 red, 2px 2px 0 blue;
}

Text shadows can improve readability when used against backgrounds with low contrast but use them sparingly as excessive or low-contrast shadows may hinder readability for some users.

h2 {
    text-shadow: 
        -3px -3px #ff0000,
         -6px -6px #00ff00,
         -9px -9 px #0000ff;
}

Text Overflow

CSS provides properties to handle situations where text overflows its container. You can control how the overflowing text is displayed using the overflow, white-space, and text-overflow properties.

The overflow property determines what happens when content exceeds the dimensions of its container. It accepts values such as visible (default), hidden, scroll, or auto.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

The text inside the .container element will be clipped and hidden from view if it overflows.

The white-space property controls how whitespace and line breaks within an element are handled. The nowrap value prevents text from wrapping, causing it to overflow if it exceeds the container's width.

p {
  white-space: nowrap;
}

Text inside <p> elements will not wrap to the next line, potentially overflowing the container horizontally.

To truncate overflowing text with an ellipsis (...), you can use the text-overflow property in combination with overflow and white-space.

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Text inside elements with the class .truncate will be truncated with an ellipsis if it overflows the 200-pixel width.

By setting these properties together (overflow: hidden, white-space: nowrap, and text-overflow: ellipsis) you create a single line of text that gets truncated when it overflows.

To create responsive text containers that adapt to different screen sizes, you can use relative units like percentages or vh/vw units for dimensions.

.responsive-container {
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}

The .responsive-container element will have a width of all its parent and a maximum height of half of the viewport height. If the text exceeds this max height, a scrollbar will appear.

Text Wrapping

CSS provides properties to control how text wraps within an element, including white-space, word-wrap, word-break, overflow-wrap, and hyphens.

The white-space property determines how whitespace and line breaks inside an element are handled. It accepts values like normal, nowrap, pre, pre-wrap, and pre-line.

p {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

<p> elements will not wrap text to the next line, causing overflow if the text is longer than the container's width. Elements with the class .pre will preserve whitespace and line breaks as they appear in the source code.

To control if long words should break or overflow, use the word-wrap property. It accepts values like normal (default) or break-word.

p {
  word-wrap: break-word;
}

Long words inside <p> elements will break and wrap to the next line if they overflow the container's width.

The word-break property specifies how words should break when reaching the end of a line. It accepts values like 'normal', 'break-all', and 'keep-all'.

.url {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

Elements with the class .url will break words and URLs at any character to prevent overflow. Elements with the class .keep will prevent word breaks between letters, keeping whole words together.

The 'overflow-wrap' property (previously known as 'word-wrap') determines whether a long word should break or overflow when it reaches the container's edge. It accepts values like 'normal' (default) or 'anywhere'.

p { 
    overflow-wrap: anywhere; 
} 

Long words inside <p> elements can break at any point if necessary to prevent overflow.

To apply hyphens to wrapped text, use the hyphens property. It accepts values like 'none' (default), 'manual', and 'auto'.

 p { 
    hyphens: auto;
} 

Wrapped text inside <p> elements will automatically have hyphens inserted at appropriate points if supported by the language and browser.

Using these properties carefully helps maintain an optimal reading experience, considering the content’s language and target browsers.

Text Effects and Techniques

CSS provides properties and techniques that let you create visual effects on text elements. Here are some of these techniques, including creating gradients and patterns on text, applying text stroke, and using text masking and clipping.

To create gradients or apply patterns to text, use the background-clip property with the text-fill-color property. The background-clip property defines how far the background should extend within an element. By setting its value to text, the background will be clipped to the shape of the text.

h1 {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

p {
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
}

h1 {
  clip-path: polygon(0% 0%,100% 0%,100%80%,0%100%);
}

p {
  mask-image: url('mask.png');
  mask-size: cover;  
  mask-repeat: no-repeat;
}