CSS Text Effects
By this time, we have already mastered the CSS Text properties like –
- Text Color (using color)
- Text Alignment (using text-align)
- Text Direction(using direction)
- Text bold (using tag)
- Text Size (using font-size)
- Text Line Height (using line-height)
- Space between words (using word-spacing)
- Space between Letters (using letter-spacing)
- Text Decoration (using text-decoration)
- Outline Text (using text-stroke)
- Indent the Text (using text-indent)
- Transform the text from lower to upper case and vice versa (using text-transform)
We also covered the shadow effects in detail like-
Let us master some Text Effects properties like
The word-wrap breaks the long words which are not able to fit in the same line to the next line.
word-wrap takes one of the following values –
- normal – This follows the normal word break rule.
- break-word – This breaks the long words which do not fit in the line to the next line so it wraps the long words in such a way that the extra letters flows in the next line.
- inherit – This gets the word-wrap property from its parent.
The Syntax of word-wrap:
word-wrap: normal| break-word| inherit ;
Example of word-wrap
The word-break property specifies how words should break at the end of the line.
word-break takes one of the following values –
- normal – This does not break the long words into the next line. It goes with the flow and the text can go in the same line even beyond the container or div. The line will only break if there are white spaces or space between 2 consecutive words
- keep-all – For Chinese/Japanese/Korean (CJK) texts, do not use the word-break property at all. For other texts i.e. Non-CJK texts, the word break will be normal.
- break-word – Break the unbreakable words at arbitrary points to prevent the overflow
- break-all – Words should break between 2 characters to prevent the overflow.
- inherit – This gets the word-break property from its parent
The Syntax of word-break:
word-break: normal| keep-all| break-word| break-all| inherit ;
Example of word-break
The text-overflow decides how the text will be displayed to the user in case the text overflows its boundary i.e. it decides whether to clip the text or show some dots etc.
This takes any one of these values –
- clip – This property clips(cuts) the overflowed texts
- ellipsis – In this case, there will be 3 dots(…) to show the clipped text
- string – The particular string will use the data type <string> to show the clipped text. This works on Firefox browser only. We do not advise to use this in production.
- inherit – The given element will acquire the text-overflow property from its parent
The text-overflow does not work on its own. You should code white-space: nowrap & overflow: hidden along with this.
The Syntax of text-overflow:
text-overflow: clip| ellipsis| string| inherit ;
Example of text-overflow
The writing-mode decides whether the text will be written in vertical or horizontal (horizontal-tb) direction.
If the direction of the writing is vertical, then it can also control if the writing will be from left to right direction(vertical-lr) or right to left direction(vertical-rl).
The Syntax of writing-mode:
writing-mode:horizontal-tb|vertical-lr|vertical-rl| inherit ;
Example of writing-mode
This is the end of the tutorial on Text effects of CSS.
If you want to see a few more examples using text effects, then you can continue further else you can skip to the next page.
Example of 3D-Text
Text glow effect
Now, let us create a glowing text using the text-shadow property.
Example of Text glow animation
Example of Blinking text effects
We are going to create a text fade out effect by using the CSS Animation.
Example of text fade
Text Typing Effects
Using the CSS animation, let us create a “Typing Text” effects.
Example of Text Typing Effects
Text Mirror Effects
We are going to create a mirror effect of the text by using the transform property.
Example of Text Mirror Effects
CSS Text Moving Effect
Move texts show important information to the user.
Some of the websites contains a moving text before the header to show important information about an advertisement, an offer, etc.
Let us create that using the animation.
Example of Text Moving Effect
Text Rollover Effect
Let’s create a rollover effect using animation.