The realization of the content hiding effect of mobile web version

See a demand, such as the mobile phone web version of a visual effect on the content of a very long part has a gradient of hidden effect, personally think this design is still very good, in line with the size of the mobile phone application scene, not all of a sudden display completely, can quickly slide down the bottom of the page, to a certain extent, reduce the sliding time, The user experience is very good, there is a general preview of the whole page, obsessive-compulsive disorder will feel very cool.

Specifically how to achieve this effect, analysis:

It can be seen as a gradual effect, from the top down to white, we know there are two gradients in CSS3: Linear (Linear-gradient) and radial (radial-gradient), which is obviously a linear gradient.

Gradient this effect is actually a picture of the appearance, we can set up a transparent background map, positioning in the text, no gradient can be used this way. CSS3 has a gradient that we can use directly, and the gradient can be applied to any place where the background image is used. This means that in a CSS style, a gradient is equivalent to a background picture.

Background-image:linear-gradient (STR1,STR2,STR3);

There are three parameters in the gradient, the first number represents the direction of the linear gradient, and the second and third parameters are the start and end colors, respectively.

Programme one:

Html:

<div class= "Show_text" >

<p> See a demand, the mobile phone web version of a visual effect, the problem is a long part of the effect of a gradient overlay, personally think this design is still very good, in line with the size of the mobile phone application field ........</p>

</div>

<div class= "Mask" ></div>

Css:

body{

position:relative;

}

. show_text{

width:620px;

margin:0 Auto;

}

. mask{

width:620px;

Position:absolute;

top:0;

height:71px;

Background-image:-webkit-linear-gradient (Top, Hsla (0,0%,100%,0), #fff);

Background-image:-moz-linear-gradient (Top, Hsla (0,0%,100%,0), #fff);

Background-image:-o-linear-gradient (Top, Hsla (0,0%,100%,0), #fff);

Background-image:linear-gradient (Top, Hsla (0,0%,100%,0), #fff);

}

：

Hsla (0,0%,100%,0) can also be substituted with Rgba (255,255,255,0);

A stranger to Hsal. You can click the "169th issue" background transparent, text opaque solution

See an introduction to the application of Rgba () and Hsal ()

First we find a giant, and then we stand on his shoulder.

Scenario Two:

A few years ago, Zhang's blog has a similar effect, he wrote the effect of the text itself is a gradient, but also a way of thinking, borrowed to use, the font color is black, you can set the black to white up and down gradients.

p{

Background-image:-webkit-gradient (linear, 0 0, 0 bottom, from (RGB (+)), to (RGB (245, 244, 244)));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

The latter two properties are not well-compatible.

Under Chrome

The visual difference is not particularly large

Recommended use scenario one.

Postscript:

In this big front-end era, compared to a variety of hot front-end framework, CSS is simple, it is easy to be ignored, want to have a relatively deep grasp of CSS also need to take great effort. In the pursuit of the trend of the tide, we also want to play a good deep foundation, JS is also, original aim.

The realization of the content hiding effect of mobile web version