用background-attachment:local制作纯CSS的滚动阴影

问说网 · 发布于 2015-04-04 · 字数3167 · 浏览 2053 · 评论 0

几天前发现了一个很好的滚动示例,如果往下还有内容,那么就会在底部显示一个灰色的阴影,告诉用户可以继续往下面滚动,如果没有内容了那么,就不显示阴影,这个设计非常的有趣。

纯CSS3伪类制作滚动阴影与背景

Roman在他的尝试中,使用了绝对定位的伪元素(pseudoe element)去覆盖阴影(阴影是一个基本的放射渐变的背景图),再进一步讲,当我们滚动其内容的时候,背景是不随之滚动的,而绝对定位的元素则会随之 滚动。因此,当你滚动它的时候,阴影就会显示得越来越清楚。此外,这些伪元素是由白色到透明的线性渐变,因此这些阴影会很柔和的被覆盖。

但看到Roman的这个demo时,我在想,是否有可能不用额外的容器(包括伪元素)。这貌似是一个完美的background-attachment: local的用例。事实上,这也是我关于这一技术的第一个真实的用例。

“background-attachment……神马?我只知道scroll和fixed!”

scroll和fixed是CSS 2.1中background-attachment仅有的两个属性值。scroll是默认值,背景相对于其依赖的元素;而fixed则依赖于其视口(viewport),当页面滚动时,背景效果不会随之滚动,而是保留背景本来的位置,而基于这些定义,当页面只有一部分可滚动时(比如一个overflow: auto的div),其背景并不会随着容器的滚动而滚动。

Backgrounds & Borders Level 3中,新加入了一个值来打破这一限制:local。当background-attachment: local被应用时,背景相对于元素内容而放置。这一的结果就是,背景会随着内容的滚动而滚动。这已经不是一个新特性了,2005年Backgrounds and Borders 3的第一个草案时就已经有它了(当然,实现起来需要更多的时间,从2009年开始)。

眼见为实,我们来通过dabblet写个例子,把这三个属性值产生的效果集中展示一下(您的浏览器需要支持这些属性):

http://result.dabblet.com/gist/2494566/866ca6ee4812a9fdf17569c54cb5d637cccd9a3b

“好,我明白了。那么回到滚动阴影这个话题么?”

基本的思路就是将之前的绝对定位的伪元素作为一层背景放进其中,并赋予background-attachment: local的值。我试过了,工作正常,且省去了很多代码。这里是dabblet演示:

http://result.dabblet.com/gist/2462915/566ae1824313e87ae6123182d063b7c7a27286b4

他的缺点在于支持他的浏览器少了一点。如果把放射渐变的背景存成图片的话,Roman原本的尝试在IE8下都是可以工作的(渐变也不是这里的重点啦)。当你用到background-attachment: local的时候,你同时也把浏览器的支持范围缩小到了IE9+Safari 5+ChromeOpera。Firefox不在此列,这是值得留意的。如果你对有兴趣实现它的话,可以来这里:bug #483446

尽管如此,浏览器的支持并不重要,因为这一效果可以优雅降级。在不支持这一效果的浏览器中,我们看不到阴影就是了。

原文:http://lea.verou.me/2012/04/background-attachment-local/

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2014-11-17纯CSS制作工具提示tooltips效果
  • 2016-01-08Stream Socket 和 Datagram Socket 比较
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-02-24WordPress中的Debug调试模式和参数配置
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-04-19PS创建超现实的冰与火的混合照片处理效果
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-16引领设计潮流!学习响应式设计需要注意这几点
  • 发布评论

    为您推荐

    问说网 · 发布于 2015-08-25

    Ecshop消费积分规则功能原理分析

    Ecshop电子商务系统赠送积分。有他的赠送规则,首先在后台录入商品的时候,可以为该商品指定赠送多少Ecshop消费积分,如果填写数字,那么赠送的消费积分将按数…

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-12-02

    FlyJSONP轻量级的跨域AJAX请求插件

    FlyJSONP是一个JavaScript库,用于实现跨域GET和POST请求服务,支持JSONP,并取得一个JSON格式的数据响应,这个Library具有易于…

    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    缤纷上新!30个美艳绝伦的葡萄酒网站设计欣赏

    今天的葡萄酒网站质量非常高,有的强调性价比,有的想突显尊贵身份,但设计师们都干得很漂亮,完美地契合了产品的特点,如果有饮品相关设计项目的同学,这组网站非常有参考…

    • 缤纷上新!30个美艳绝伦的葡萄酒网站设计欣赏
    • 缤纷上新!30个美艳绝伦的葡萄酒网站设计欣赏
    • 缤纷上新!30个美艳绝伦的葡萄酒网站设计欣赏
    • 缤纷上新!30个美艳绝伦的葡萄酒网站设计欣赏
    EmmieKaren · 发布于 2016-05-16 · 浏览 1066 · 评论 0

    脑洞大开!国外过去30年那些里程碑式的椅子们

    椅子,作为我们生活中必不可少的一部分,平时我们却很少注意他们。关于椅子以及设计师,大家可能也是知之甚少。今天我们就特别跟大家分享一下,国外30年的历史中,那些里…

    • 脑洞大开!国外过去30年那些里程碑式的椅子们
    • 脑洞大开!国外过去30年那些里程碑式的椅子们
    • 脑洞大开!国外过去30年那些里程碑式的椅子们
    • 脑洞大开!国外过去30年那些里程碑式的椅子们
    BakerAlston · 发布于 2016-05-16 · 浏览 1377 · 评论 0

    五步打造水晶质感梦幻水晶鞋

    由夜猫教育的老师带来的PS实例教程,五步打造水晶质感梦幻水晶鞋,希望每个小伙伴们,可以学习到一些技能,设计出自己心中最美的水晶鞋,做一次“灰姑娘”!

    • 五步打造水晶质感梦幻水晶鞋
    • 五步打造水晶质感梦幻水晶鞋
    • 五步打造水晶质感梦幻水晶鞋
    • 五步打造水晶质感梦幻水晶鞋
    CarolineChapman · 发布于 2016-05-21 · 浏览 1065 · 评论 0

    详解CSS3中的属性选择器

    属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指…

    • 详解CSS3中的属性选择器
    • 详解CSS3中的属性选择器
    • 详解CSS3中的属性选择器
    • 详解CSS3中的属性选择器
    问说网 · 发布于 2016-06-04 · 浏览 1090 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13169 文章
    497 评论
    2089 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3252

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2998

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3132

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2530

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2750

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!