Using CSS to create a faded read more link

tom Tom, 1st December 2015

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.

Want to share? Tweet it!

More from our blog

OPC Markets Launch

OPC Markets Launch

6.04.21

We've been  busy helping our client OilPrice.com with the launch of their new trading platform. Made in conjunction with FTSE 250 company owned Markets.com, OPCMarkets… Read →

Video heros: the order of the day

Video heros: the order of the day

23.03.21

We recently had 3 clients - within the space of a few days - ask us for video heros on their home page. We do… Read →

Create Health rebrand

Create Health rebrand

12.03.21

Our lovely friends over at Create Health have unveiled their beautiful new brand, and we were thrilled to be involved. WordPress developer Jon built their WordPress… Read →