Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to convert Photoshop projection to box-shadow in CSS. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Text-shadow is to add a shadow effect to the text, box-shadow is to add a surrounding shadow effect to the element block. With the popularity of html5 and CSS3, the use of this special effect becomes more and more common.

The basic syntax is {box-shadow: [inset] x-offset y-offset blur-radius spread-radiuscolor}

"mixed mode": Photoshop provides a variety of mixed modes, but CSS3 shadows only support normal mode (normal).

"color": shadow color. Corresponds to the color value in the CSS3 shadow.

"opacity": the opacity of shadows. The a value in the color rgba () that corresponds to the CSS3 shadow.

"Angle": the angle of projection.

"Distance": the distance of the shadow. X-offset and y-offet in CSS3 shadows can be converted according to angle and distance. X-offset = Distance * cos (180-Angle), y-offset = Distance * sin (180-Angle)

"Spread": the extended size of the shadow. Controls the amount of shadow solid color and virtual color. Spread * Size = the size of the solid color in the shadow. The rest is the virtual color. CSS3 Shadow spread-radius = Spread * Size

"Size": the size of the shadow. In CSS3, blur-radius + spread-radius = Size is blur-radius = Size-spread-radius.

The values in the above figure are taken as an example.

The code is as follows:

Color: rgba x-offset: 5 * cos = 4.09pxy-offset: 5 * sin = 2.87pxspread-radius: 10 * 6% = 0.6pxblur-radius: 10-0.6 = 9.4px

Box-shadow: 4.09px 2.87px 9.4px 0.6px rgba (118 and 113); text-shadow: 4.09px 2.87px 9.4px rgba (118 and 113)

Text-shadow does not have spread-radius, so it does not fully implement the effects in PS.

The above is how to convert Photoshop projection to box-shadow in CSS. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.