WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > How to make fade-out text as screen width decreases

Reply
  Thread Tools Display Modes
Old 18th November 17, 05:20 PM   #1
EW1
WLC Member
 
Join Date: Nov 2017
Posts: 1
Default How to make fade-out text as screen width decreases

Hi everyone!

I was wondering if someone could help me recreate the effect that you can see on this page: https://www.penguin.co.uk/search/?charset=UTF-8&q=

You can see that the book description goes on for much longer than is actually visible, but that at after certain point the text fades out. This point has a consistent length that is maintained while the screen increases/decreases in size.

Is it possible for me to do the same sort of thing on my website using CSS?

Thank you for your help,
Lola
EW1 is offline   Reply With Quote
Old 19th November 17, 05:15 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: How to make fade-out text as screen width decreases

Hello,

This is being done using a psueudo ::after element with the CSS. There also seems to be a background that helps with the affect.

The CSS is as follows, for that site:

Code:
background-image:linear-gradient(rgba(255,255,255,0.4) 0%, #fff 60%);
pointer-events:none;
content:'';
position:absolute;
top:205px;
left:0;
width:100%;
height:80px;
z-index:1;
If you want to see more, you can find the styles on the .content DIV's which wrap the descriptions of the books.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:52 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.