注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易邮箱前端技术中心

汇聚最新最劲爆的前端技术

 
 
 

日志

 
 
 
 

轻松做土豪 打造页面IOS7毛玻璃效果  

2013-09-29 16:55:43|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
伴着新版iPhone的发售,大家都在寻找身边的土豪,希望能交上这种朋友。俗、忒俗~ 今儿咱们就来高雅一把,学学人家苹果的内在,在页面上做出高端大气上档次的新版IOS7毛玻璃效果。

轻松做土豪 打造页面IOS7毛玻璃效果 - 网易邮箱前端技术中心 - 网易邮箱前端技术中心
 
效果查看:http://mail.163.com/html/demo/frosted_glass.htm  (仅高版本chrome)

实现关键:
1. 模糊效果 - 通过CSS3的filter来实现。
filter是CSS3的一个标准属性,可以实现色相、灰度、亮度、对比度、模糊等修改,具体可以参考 https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html。目前仅chrome的高版本可以支持该属性。 当然很多同学想到了ie的滤镜,理论上IE的滤镜也可以实现,这里没有尝试,欢迎大家尝试并反馈效果。

2. 内容clone和同步滚动
大家在演示页面可以看到,模糊的部分仅限于拉下来的工具栏区域。想实现这一点 本例的做法是复制了页面内容到工具栏区域内,再按如上的CSS3将其模糊,这样就可以做到页面的局部模糊。
如果希望效果更为真实,可以监听内容区的滚动行为,实时调整模糊区克隆节点的位置偏移量,保证滚动区和内容的坐标定位相同。

如何?很简单吧。把你的页面也“毛玻璃”一下,试试土豪的感觉,或许还有小伙伴对你喊 “土豪,我们做朋友吧!”。

By Lemon
  评论这张
 
阅读(7934)| 评论(3)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017