theAdhocracy | Multicoloured text highlighting in cSS

Source
Link to Original 🔗
Published
15 December 2020
Categories
HTML & CSS,User Experience
Tags
CSS,selection,nth-child,UXD,highlight,text,design

As multiple paragraphs of text are selected, each one gets highlighted with a different colour from the LGBTQA+ flag. — Seeing the different colour highlights coming into effect is such a satisfying piece of hidden UX.

A clever UX idea discovered on Pink News: each paragraph of text has a different highlight colour, so as you select parts of an article to copy elsewhere it reveals the LGBTQA+ flag. They're using a simple CSS pattern with several similar selectors along the lines of:

p:nth-child(6n+1)::selection {
   background-color: rgba(157,236,255,0.25);
}

Extremely effective 👏

Explore Other Notes

⬅ Newer

National park "honest" reviews

A wonderful collection of hand-illustrated one-star reviews for some of the most beautiful wilderness areas on the planet. Originally covered the great US National Parks, but has recently begun […]

Older ➡

Emoji before emoji

In other words, text speech or a variant on modern emoji speech. Cool/❄ […]

A clever UX idea discovered on Pink News: each paragraph of text has a different highlight colour, so as you select parts of an article to copy elsewhere it reveals the LGBTQA+ flag. They're using […]
19 May 2024
Murray Adcock

Journal permalink