How to convert Photoshop projection to box-shadow in CSS
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.
