CSS v Photoshop Box Shadows: Lost in Translation

In trying to write a post related to working with a graphic artist for my web development students, I realized that I may have some holes in my own knowledge of the Photoshop specs for a box-shadow.

QUESTION: What have I expressed incorrectly from a technical perspective in the following: Box shadows are defined in different sets in graphic art software, such as Photoshop, and CSS coding.

PHOTOSHOP DESCRIPTION Shadow: Opacity: 20% Mode: Multiply Distance 10 px Angle 135 degrees X offset: 7 px Y offset: 7 px Spread: 0% Noise 0%

CSS DESCRIPTION box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; (Ex. box-shadow: 10px 10px 5px #888888;)

TRANSLATION 1. Opacity: To set the opacity, you have to use rgba color instead of hexidecimal box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); 2. Mode: This is probably more complicated than a small project budget. 3. Distance:this is called blur 4. Angle: this is done with the first two settings in the CSS. The problem is that I'm not sure how a number of degrees translates here. It seems to be a problem others have had. 5. Offset: if the angle is done with the first two settings and offset is the same thing, we have some confusion here. 6. Spread: looks like it's the same thing. 7. Noise: not part of CSS

链接地址: http://www.djcxy.com/p/96214.html

上一篇: 无法为NLog设置我的连接字符串

下一篇: CSS v Photoshop Box Shadows:迷失在翻译中