[Original] CSS efficient development practice: CSS 3, LESS, SASS, Bootstrap, Foundation Reading Notes (5) Using radial gradients to create light and shadow effects_html/css_WEB-ITnose

Shadow effects are usually used to express the feeling of light casting on an object. If you want to create a text light and shadow effect as shown in Figure 5.19, you can use the linear gradient of the background to construct it.

In Figure 5.19, you can see that there is an effect similar to the light beam shining on the text, which highlights the text well. This is very simple to implement. You only need to center the text and set a radial gradient radiating from the center to the background element. The code is as follows:

// HTML代码<div class="box">赞</div>  // CSS代码：.box{      width: 200px;      height: 200px;      font-size: 80px;      line-height: 200px;      text-align: center;  background: -webkit-radial-gradient(#feb3ad, #fd695d); background: -o-radial-gradient(#feb3ad, #fd695d);background: -moz-radial-gradient(#feb3ad, #fd695d);background: radial-gradient(#feb3ad, #fd695d);}

　

This way , a most basic light and shadow background effect is completed. You can set the brightness of light and shadow by adjusting the color. The closer to white, the brighter it is. Adjust the range of the halo effect by adjusting the percentage occupied by the center color, as shown in Figure 5.20.

Figure 5.20 Adjusting the halo effect

Compared with images, developers can directly adjust the CSS code The parameters in the software are changed to obtain the effect, and the flexibility and development speed are greatly improved.

Let’s learn together and communicate