Useful CSS Text Effects

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

  1. Change Text Selection Colour
  2. Highlight Marker Style
  3. Truncate String with Ellipsis
  4. Ordered List Numbering
  5. Change Icons by Link Format
  6. Change Style by Language
  7. Text Link Effects
  8. Show URL When It’s Printed
  9. Force Text to Wrap for Long URL
  10. Prevent Text From Wrapping to Next Line
  11. Paragraph Drop Caps
  12. Add Space Each Line
  13. 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.

See the Pen Text selection colour by Mana (@manabox) on CodePen.


Back to Table of Contents

2. Highlight Marker Style

Use background property if you just want to add a background colour, or border-bottom property to add an underline. However, linear-gradient
property will make it fancier! It makes line like highlighted. You can adjust line width.

See the Pen Marker Line by Mana (@manabox) on CodePen.


Back to Table of Contents

3. Truncate String with Ellipsis

You can add “…” at the end of sentence if it’s long. Please adjust the width if you want.

See the Pen Crop long text by Mana (@manabox) on CodePen.


Back to Table of Contents

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.

See the Pen Ordered List Text by Mana (@manabox) on CodePen.


Back to Table of Contents

5. Change Icons by Link Format

Show different icons by link file type. It will improve usability.

See the Pen Link text with icon by Mana (@manabox) on CodePen.

Also see previous article: Add Icon Fonts to Text Links


Back to Table of Contents

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.

See the Pen Change colour by language by Mana (@manabox) on CodePen.


Back to Table of Contents

7. Text Link Effects

transition property makes changes from one style to another, without using Flash animations or JavaScripts. You’ll get more information about it by previous article: Change Text Link Hover Effect Using CSS3

See the Pen Text Link Transition by Mana (@manabox) on CodePen.


Back to Table of Contents

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 ).

See the Pen Show URL for Print by Mana (@manabox) on CodePen.

サンプルページ
Back to Table of Contents

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.

See the Pen word-break by Mana (@manabox) on CodePen.


Back to Table of Contents

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.

See the Pen white-space – show text next line by Mana (@manabox) on CodePen.


Back to Table of Contents

11. Paragraph Drop Caps

p:first-child:first-letter targets only first letter of the first paragraph.

See the Pen Drop caps by Mana (@manabox) on CodePen.


Back to Table of Contents

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”)

See the Pen 1 letter space by Mana (@manabox) on CodePen.


Back to Table of Contents

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.

See the Pen Gradation Text by Mana (@manabox) on CodePen.

Using the same effect with background image:

Back to Table of Contents

Share

Comments