Overlapping Text
When creating HTML documents, you can use CSS to create some pretty cool effects with your text. Although HTML and CSS don't actually provide an overlapping-text property, with a bit of creativity, you can create your own overlapping text effects.
Overlapping Text Example
Here, we use the CSS line-height property to reduce the height of each line of text. By doing this, the second line of text overlaps the first line. And to make the text look presentable, we modify its font-family, font-size, color, etc.
| Source Code | Result |
|---|---|
|
Overlapping text |
Overlapping Words
Here, we use the CSS word-spacing property to reduce the space between each word. To reduce the space, we provide a negative value (i.e. -40px) The result is that each word overlaps the previous word.
We also drop the second word down so that its baseline is lower than the previous word. To do this, we use position:relative;top:10px;.
| Source Code | Result |
|---|---|
|
Overlapping Text |
Overlapping Letters
Here, we use the CSS letter-spacing property to reduce the space between each letter. To reduce the space, we provide a negative value (i.e. -5px) The result is that each letter overlaps the previous letter slightly.
| Source Code | Result |
|---|---|
|
Overlapping Text |