如何摆对姿势让前端工程师完美实现一个小阴影?

原创文章 分类: 经验/观点 版权:
1476 19 7 3
2017-12-05
5.7
普通推荐

前端工程狮也是人,了解实现方式也是项目开发中愉快合作的一种方式。


相信有朋友在项目验收UI的时候发现许多样式实现效果差强人意,经过项目后发现,许多都处在沟通的问题上面,在不熟悉代码的情况下与前端沟通页面问题有时候会非常吃力,并不是前端不配合,只是因为你不清楚他们的实现方式,他们也无法认真看你UI稿细节;在项目赶时间的情下,实现效果会更悲剧...所以这时候如果你能把一些看起来稍复杂的UI效果写成css代码的话那就无敌好了。

比如你画了一个多层流比大阴影,希望鼠标滑过实现如下效果...

Image title

Image title

Image title

Image title

Image title

Image title

当你欢快去验收时...结果实际图:

Image title

Image title

看一下对比:

Image title

微小的差别,前端没有像素眼没法很好看出你稿子的效果,但是在咱们这是万万使不得的!怎么办!怎么说!怎么跟前端大哥哥们坦诚以待,理直气壮的表达!


首先咱们实际操作

我先写出两种样式在网页上面的实际效果:

Image title

你看,其实是可以很完美实现的,为了更好的沟通,这时候你就需要了解一个CSS3的属性:

box-shadow

先看一下代码(关注加粗字段即可,想体验效果可复制代码贴入记事本中,改变记事本文件格式txt为html,在浏览器中打开即可预览):


 

你希望的效果

 

前端实现的效果


实现投影效果主要就是靠了它

box-shadow: 0px 32px 32px rgba(60,133,253,.22);

Image title

注意:这些数值需要按照正确顺序排列,否则效果会不同

其中,水平跟垂直可以用负值来表达相反方向以实现不同效果:

Image title

所以如果当你需要实现多层投影时,直接写给前端能让他们秒秒就懂

#Correct-BOX 

{

box-shadow:

0px 4px 4px rgba(60,133,253,.22),

0px 8px 8px rgba(60,133,253,.22), 

0px 16px 16px rgba(60,133,253,.22),

0px 32px 32px rgba(60,133,253,.22),

0px 64px 64px rgba(60,133,253,.22);

}

一共五层,跟PS稿数值、层数一致,相信一般前端们是不会这么去写几层投影的(实际问过前端,看后直接说“有毛用这么多层-_______-`”),所以最好这种比较复杂的投影数值还是写出来的好,保证还原度。


下面这种写法是错误的,box-shadow写一次就行,所有数值写在同一个属性中即可,不然浏览器只是默认显示第一个 

#Correct-BOX /*错误样式*/

{

box-shadow:

0px 4px 4px rgba(60,133,253,.22);

box-shadow:

0px 8px 8px rgba(60,133,253,.22); 

box-shadow: 

0px 16px 16px rgba(60,133,253,.22);

box-shadow:

0px 32px 32px rgba(60,133,253,.22);

box-shadow:

0px 64px 64px rgba(60,133,253,.22);

}

Image title

此外,box-shadow还有许多种属性:

box-shadow: 水平 垂直 模糊距离 阴影尺寸 模糊距离 颜色 外阴影改内阴影(inset) 如下图:

Image title

Image title

所以,一个简单的代码可以实现很多效果,其实没事学习一下代码也是不错的,也便于与前端攻城狮们沟通,看着复杂的效果其实多写几行代码也就实现了,彩虹投影也不是不可以,姿势正确,分分钟搞定。


Image title

Image title

 谢谢看完

对前端代码有兴趣的可以查看

http://www.w3school.com.cn/cssref/index.asp 

里面有很多基础代码可以学习













羽一yy

16粉丝/15关注

差旅H5 App

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN