CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ylluminate
ylluminate

Reputation: 12369

Fade effect for text summaries similar to Amazon?

If you look at a book, for example, in Amazon, you can see a rather nice (and much more intuitive than ellipses) effect for abbreviating text summaries: enter image description here

Is there a well documented way of doing this or a library that facilitates such a summarization of text?

Upvotes: 0

Views: 305

Answers (2)

KatieK
KatieK

Reputation: 13853

The extra content is hidden from view with these rules: height: 200px; and overflow: hidden;; you can see them applied to #outer_postBodyPS. But the fade effect is handled in #psGradient:

background: -moz-linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
background: -webkit-gradient(linear, bottom, top, color-stop(15%, rgb(255, 255, 255)), color-stop(100%, rgba(255, 255, 255, 0)) );
background: -webkit-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -o-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -ms-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% ); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03ffffff', endColorstr='#ffffff', GradientType=0 ); 
background: linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );

The different prefixed rules (and the filter) are just for browser-specific instances.

You can inspect the whole stylesheet with these rules at http://z-ecx.images-amazon.com/images/G/01/browser-scripts/dpMergedOverallCSS/dpMergedOverallCSS-12049068973.V1.css.

Upvotes: 1

Sites Done Right
Sites Done Right

Reputation: 652

The visual effect is simply CSS. There's a div with a gradient image fixed to the bottom which adds a "fade" illusion. Set the overlay to position:fixed;bottom:0 to add that visual effect.

As far as actually truncating the text, there are many ways to do it. The easiest way is to use the substring functions, like PHP's substr. http://php.net/manual/en/function.substr.php and simply cut off after X characters.

Alternatively, you can explode http://php.net/manual/en/function.explode.php the string on the [space] character and that would return an array of words. You can then iterate through that array easily and stop when you reach X words...

Upvotes: 0

Related Questions