Fading effect in html page

Fading effect in html page

(Reveal tech behind)

Noticed that some web sites restrict their contents from fully readable, e.g. WallStreet web site articles.

It used stylesheet to accomplesh this effect:

.wsj-snippet-body{
  position: relative;
}

.wsj-snippet-body:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 136px;
  background: rgba(255, 255, 255, .2); /* fallback for gradient */
  background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1)));
  background: linear-gradient(to bottom,  rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%);
} Effect:

Full solution:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.wsj-snippet-body{
  position: relative;
}

.wsj-snippet-body:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 136px;
  background: rgba(255, 255, 255, .2); /* fallback for gradient */
  background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(255, 255, 255, 0)),to(rgba(255, 255, 255, 1)));
  background: linear-gradient(to bottom,  rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%);
}
</style>
</head>
<body>
<div class="wsj-snippet-body">
  <p>这些人士称,他们讨论的想法包括扩大东南亚(可能是新加坡)的业务以及在美国重塑其品牌。扩大东南亚业务将使该公司高管能够使该应用远离中国。</p>
  <p>与此同时,据了解该公司做法的人士称,TikTok还减少了其应用上来自中国的内容数量,以期减少提醒美国用户该应用源自中国。</p>
  <p>TikTok母公司北京字节跳动科技有限公司(Beijing...</p>
</div>
</body>

172 total views, 4 views today

Author: Albert

Leave a Reply