Multicoloured text highlighting in cSS | Pink News

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 […]
  • 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 […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.