CSS can create a variety of special text effects. A few of these include:
- Shadows
- Word wrapping/breaking
- Character spacing
Example: Shadow effect
The following adds a green shadow to a blue large heading.
h1 {
color: blue;
text-shadow: 2px 2px green;
}
Output:
Example: Shadow effect on white text
The following adds a green shadow to a blue large heading.
h1 {
color: white;
text-shadow: 1px 1px 2px Black, 0 0 20px Fuchsia, 0 0 6px Blue;
}
Output:
Example: Borders
h1 {
color: PowderBlue;
text-shadow: -1px 0 Teal, 0 1px Teal, 1px 0 Teal, 0 -1px Teal;
}
Output:
Example: Character spacing with a CSS class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Example</title>
<style>
.exp {
letter-spacing: 2px;
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog</p>
<p class="exp">The quick brown fox jumps over the lazy dog</p>
</body>
</html>
Output:
