这是今天早晨的简书的封面,(其实以前都没注意过),等等,然后发现了哪里不对
左边图片配的文字,怎么看上去辣么别扭。
给白色文本加了投影,那因为背景图片不是那种纯色或者模糊的效果,会导致文本看上去不清晰。
改改试试。
因为家里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),效果如下:
这里说一下前端攻城狮和界面设计的配合,有时候UI最大的感慨就是设计稿看上去很美好,但最后实现的效果有偏差甚至偏差很大,所以这时候需要的一个重要的工作就是“视觉联调”。
比如,我猜测一下故事场景,当简书的UI给首页找来一张图片,然后定义好字号、颜色、排版等等,交给前端开发人员后,前端按照界面标注做好之后,发现,文本似乎不是那么清楚,那后就加了投影的属性。然后UI看了最终实现的效果,感慨一下,好吧,差不多算实现了吧,然后,然后……
所以
-------------
前端懂一点点审美和UI懂一点点代码,最终才能成为完美组合。