We have seen many websites with various text effects, and they are rapidly getting popular as the current and upcoming trend for good form design. With the help of CSS3, the best thing about these effects is that they can be achieved with pure CSS, that is, no more image replacements and image-heavy design. In this section, we will learn some new text effects that CSS3 provides us.
The new text features are as follows.
The text-shadow property is used to apply shadow effects to the text content. We can have one or more effects for a single text by using a simple comma.
These effects consist of a shadow color, x/y offset of the shadow effect, and a blurring radius for the shadow effect. The effects can overlap each other, but for clarity they should not overlap the text content.
The word-wrap property is used by the browser to break lines within the words to prevent the text from exceeding the boundary, or else it will exceed the boundary.It forces the text to wrap, even if it has to split it in the middle of a word.
The values of the word-wrap property are as follows:
Some new text properties which CSS3 provides are as follows:
hanging-punctuation: This specifies whether a punctuation character can be placed outside the line box or notpunctuation-trim: This specifies whether a punctuation character should be trimmed or nottext-align-last: This describes how the last line of a block or a line right before a forced line break is alignedtext-emphasis: This applies emphasis marks to the element's text and the foreground color to the emphasis markstext-justify: This specifies the justification method used whentext-alignisjustifytext-outline: This specifies the outline of the texttext-overflow: This specifies what action needs to be taken when the text overflows in the containing elementtext-wrap: This specifies the line-breaking rules for the textword-break: For non-CJK scripts, this specifies the line-breaking rules