Practical practice of efficient CSS development: 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 a 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);}

In this way, a 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 Adjust the halo effect

Compared to the picture , developers can obtain effect changes by directly adjusting parameters in CSS code, and flexibility and development speed are greatly improved.

Share with those who want to learn