请选择 进入手机版 | 继续访问电脑版

网页UI-css3投影效果

发表于 2016-12-16 17:25 显示全部楼层 22 687

本帖最后由 赵延明老师 于 2017-5-29 20:41 编辑

简介:

相信大家对于一些投影效果,切图肯定都是使用图片来的,各种痛苦的表情,想起来就痛,还是说正经的吧。那么如何简单的实现,就需要使用CSS3新增的属性来进行制作。

效果:

投影效果图.png

视频:

技巧:

使用CSS3的属性box-shadow text-shadow border-radius以及CSS3 的伪类进行实现。CSS伪类:before或者:after实现布局。而其它的圆角属性和投影属性是为了实现投影和圆角属性

详细代码:

回复可查看全部代码:

游客,如果您要查看本帖隐藏内容请回复



想了解更多内容,可以点击以下链接:


小码哥官网:http://www.520it.com/


网页UI学院:http://www.520it.com/special/ui


回复 使用道具
举报
设计师傅

发表于 03-28 07:35 来自手机 显示全部楼层

厉害厉害
回复 支持 反对 使用道具
举报
scj麦子

发表于 2017-07-20 14:10 显示全部楼层

不错的案例

回复 支持 反对 使用道具
举报
JamieZou

发表于 2017-06-24 06:40 显示全部楼层

回复 支持 反对 使用道具
举报
Vincent_RRrGY

发表于 2017-05-27 17:02 显示全部楼层

66666666666

回复 支持 反对 使用道具
举报
大树学长

发表于 2017-02-12 06:44 显示全部楼层

回复 支持 反对 使用道具
举报
愚人花园

发表于 2017-02-12 02:25 显示全部楼层

回复 支持 反对 使用道具
举报
森之树

发表于 2017-02-11 14:45 显示全部楼层

回复 支持 1 反对 使用道具
举报
我爱大菠萝

发表于 2017-02-11 14:44 显示全部楼层

回复 支持 1 反对 使用道具
举报
p出我世界

发表于 2017-02-11 03:58 显示全部楼层

回复 支持 1 反对 使用道具
举报
12下一页

发表新文章
赵延明老师

小码哥名师团队

0

学分

2923

学币

3202

积分

小码哥名师团队

Rank: 5Rank: 5

积分
3202

小码哥一周年勋章关注小码哥教育公众号意见领袖勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育