18a

Using CSS to create a faded read more link

1st December 2015 03:00 by tom

Whilst using Trello recently I noticed a nice little CSS fade effect. We often have 'read more' links on long paragraphs of text which, once clicked on, reveals the entire body of text. This can be really handy with user interfaces when you don't want to overload the screen with information, but you want to let the user know there is more information to see if they choose to. Trello achieve this really nicely, using CSS to fade the paragraph at the bottom, then offering a link to click to reveal the whole content.

I've created a little stand-alone demo of this effect here. Feel free to have a play around.