这是今天早晨的简书的封面，（其实以前都没注意过），等等，然后发现了哪里不对
首页
左边图片配的文字，怎么看上去辣么别扭。
给白色文本加了投影，那因为背景图片不是那种纯色或者模糊的效果，会导致文本看上去不清晰。
改改试试。
因为家里PC配置比较低，ps也只有基本的字体，所以只能用微软雅黑暂时代替了
改进方法1，给图片加上半透明的黑，然后去掉投影效果，效果如下：
加蒙版背景，去掉文本的投影
改进方法2，不增加代码的基础上，改文本的text-shadow属性，来实现文本的黑色的外发光效果。因为“简书”和“交流故事，沟通想法”用了相同的text-shadow设置，-1px,0,0,rgba(0,0,0,0.75)，外发光效果很好实现，把X轴和Y轴偏移值都设定为0，同时设定模糊半径值，考虑到“交流故事，沟通想法”的字号，把半径定义到6px，感觉还比较合适，同时，为了让白色文本更突出，也去掉了外发光的透明度，0,0,6px,rgba(0,0,0,1)，效果如下：
改text-shadow属性（改了css属性后直接截图）
这里说一下前端攻城狮和界面设计的配合，有时候UI最大的感慨就是设计稿看上去很美好，但最后实现的效果有偏差甚至偏差很大，所以这时候需要的一个重要的工作就是“视觉联调”。
比如，我猜测一下故事场景，当简书的UI给首页找来一张图片，然后定义好字号、颜色、排版等等，交给前端开发人员后，前端按照界面标注做好之后，发现，文本似乎不是那么清楚，那后就加了投影的属性。然后UI看了最终实现的效果，感慨一下，好吧，差不多算实现了吧，然后，然后……
所以
-------------
前端懂一点点审美和UI懂一点点代码，最终才能成为完美组合。
网友评论