See a demand, the diagram below, zhihu mobile web version of a visual effect, long part of the content has a gradient, the effect of the hidden personal think the design is very good, accord with the size of a mobile phone application scenario, no show at a draught completely, can quickly slipped at the bottom of the page, to a certain extent reduced the sliding time, user experience is very good, Having a rough preview of the entire page feels good.

Review images

How to achieve this effect, analyze:

It can be seen that the effect is a gradual change, and the color becomes white from top to bottom. We know that there are two kinds of gradual changes in CSS3: Linear-gradient and radial gradient, which is obviously a linear gradual change.

The gradient effect is actually the appearance of an image. We can set a transparent background image above and below the text, and use this method before there is a gradient. Css3 has gradients that we can use directly, and gradients can be applied anywhere we use a background image. This means that in CSS styles, gradients are equivalent to background images.

background-image: linear-gradient(str1,str2,str3);Copy the code

There are three parameters to the gradient. The first number indicates the direction of the linear gradient. The second and third parameters are the starting and ending colors, respectively.

Solution a:

HTML:

See a requirement, as shown in the picture, a visual effect of Zhihu mobile web version. The long part of the problem will be covered by the effect of gradual change. Personally, I think this design is very good, in line with the size of the mobile application field……..

CSS: body{ position: relative; } .show_text{ width: 620px; margin:0 auto; } .mask{ width:620px; position: absolute; top:0; height: 71px; Background - image: - its - 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); }Copy the code

Effect:

Review imagesReview imagesHsla (0,0%,100%,0) can also be usedRgba (255255255, 0) to replace;

If you are unfamiliar with HSAL, you can click [Issue 169] to solve the problem of transparent background and opaque text

See the introduction to rGBA () and HSal ()

First we find a giant, and then we stand on his shoulders

Scheme 2:

A few years ago, Zhang Dashen’s blog also had a similar effect. The effect he wrote was to change the gradient of the text itself, which is also a kind of idea. For reference, the font color is black, and you can set the gradient from black to white.

p{

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(25, 27, 25)), to(rgb(245, 244, 244)));

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

}Copy the code

The latter two properties are not very compatible.

Chrome below the effect picture

The visual difference is not that great

Plan 1 is recommended.

Postscript:

In this big front-end era, compared to a variety of hot front-end frameworks, CSS is simple, but also easy to be ignored, want to have a deep grasp of CSS is also need to work hard. Under the trend of catching up with the tide, we should lay a solid foundation, js is also, all changes are inseparable from its ancestor.

Have effect demand also welcome message, exchange study