Mobile-first design is getting more and more important in today’s world. We need to make each web page comfortable to read. So I collected some CSS text effect snippets for both decoration and usability improvements.
Table of Contents
- Change Text Selection Colour
- Highlight Marker Style
- Truncate String with Ellipsis
- Ordered List Numbering
- Change Icons by Link Format
- Change Style by Language
- Text Link Effects
- Show URL When It’s Printed
- Force Text to Wrap for Long URL
- Prevent Text From Wrapping to Next Line
- Paragraph Drop Caps
- Add Space Each Line
- Gradation Text
They are tested in Chrome, Safari, Firefox, IE10. They also might work in IE8 or 9.
1. Change Text Selection Colour
You’ll see the light blue colour when you select the text. You can change this colour to your favourite one. It will be a good idea to match with your website theme colour! You need to add
-moz- for Firefox. Try to select below demo text.
2. Highlight Marker Style
background property if you just want to add a background colour, or
border-bottom property to add an underline. However,
property will make it fancier! It makes line like highlighted. You can adjust line width.
3. Truncate String with Ellipsis
You can add “…” at the end of sentence if it’s long. Please adjust the width if you want.
4. Ordered List Numbering
ol is used for ordered list, and there is no problem if you just want to show the number. However, if you need to show as “Chapter 1, Chapter 2” or “No. 1, No. 2”,
counter-increment helps you.
5. Change Icons by Link Format
Show different icons by link file type. It will improve usability.
Also see previous article: Add Icon Fonts to Text Links
6. Change Style by Language
You can change styling by language, which set by HTML
<html lang="">. For example, US English is set as
en-US, Japanese as
ja etc. Please check how it woks by clicking on “Edit on CODEPEN” below demo and edit language to
en-US. Text colour changes to orange.
7. Text Link Effects
8. Show URL When It’s Printed
You need to be careful of text link when you create a print.css otherwise link URL wouldn’t be printed. Prepare CSS for print using
@media print and show URL next to the link text by
content: " (" attr(href) ")";. Please see a demo page and open a print preview window by press
⌘ + P ( or
Ctrl + P for Windows ).
9. Force Text to Wrap for Long URL
The text which includes a long URL is extending out the box and breaking the layout.
word-wrap can prevent it.
10. Prevent Text From Wrapping to Next Line
white-space: nowrap; will prevent the text from wrapping to next line. It would be useful for tag clouds or showing the date.
11. Paragraph Drop Caps
p:first-child:first-letter targets only first letter of the first paragraph.
12. Add Space Each Line
Adding space from the second line. (This style is often used in Japanese documents, especially with ※ symbol that means “note” or “important”)
13. Gradation Text
Set background colour as gradation and mask with text by
background-clip: text;. Sadly, this property is supported only Safari and Chrome for now.
Using the same effect with background image:
Back to Table of Contents