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

问说网 · 发布于 2015-04-04 · 字数3167 · 浏览 1873 · 评论 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-04-30网页页面切换过度loading效果
  • 2016-07-15十分钟搞清字符集和字符编码
  • 2016-04-10Ionic接近原生的Html5移动App开发框架
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-16设计朋友有福了!教你快速打造炫彩的逆光场景
  • 2016-05-16设计新技能!爱不释手的模糊背景设计
  • 2016-05-17简单几招提升你的设计
  • 2016-06-12ResponsiveSlides.js基于jQuery响应式幻灯片插件
  • 发布评论

    为您推荐

    Javascript测试框架之Karma和Mocha以及Inkie
    问说网 · 发布于 2015-12-14

    Javascript测试框架之Karma和Mocha以及Inkie

    Mocha是一个JavaScript的测试框架,之前写过的一篇博客介绍了如何用node.js的环境来运行测试。Karma是一个驱动测试的Runner。也就是说,…

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

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

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

    问说网 · 发布于 2016-04-15

    PWChecker密码安全强度提示jQuery插件

    PWChecker是一款当用户键入密码的时候,提示的密码强度。允许强制执行指定最小和最大的密码长度,通过友好的方式提示用户,它也能在输入密码不一致的情况下,提示…

    涨姿势!超全面的移动端尺寸基础知识指南

    初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。

    • 涨姿势!超全面的移动端尺寸基础知识指南
    • 涨姿势!超全面的移动端尺寸基础知识指南
    • 涨姿势!超全面的移动端尺寸基础知识指南
    • 涨姿势!超全面的移动端尺寸基础知识指南
    AldingtonYetta · 发布于 2016-05-14 · 浏览 978 · 评论 0
    问说网 · 发布于 2016-12-02

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

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

    教你绘制一枚经典的ITUNES图标

    今天的iTunes图标是一个非常经典的icon,不过现在你们看不到了。现在的版本只能说是走火入魔,推崇扁平化,说它漂亮也谈不上,说难看也不至于~ 下面是我完成的…

    • 教你绘制一枚经典的ITUNES图标
    • 教你绘制一枚经典的ITUNES图标
    • 教你绘制一枚经典的ITUNES图标
    • 教你绘制一枚经典的ITUNES图标
    ClaphamAndrea · 发布于 2016-05-17 · 浏览 1038 · 评论 0

    Photoshop制作绿色透明导航设计讲解

    透明物体是通过背景进行参照,体现出质感。而本例里是讲解Photoshop制作绿色透明导航设计,如果背景太亮,会导致对比不明显。

    • Photoshop制作绿色透明导航设计讲解
    • Photoshop制作绿色透明导航设计讲解
    • Photoshop制作绿色透明导航设计讲解
    • Photoshop制作绿色透明导航设计讲解
    KellyMatthew · 发布于 2016-05-22 · 浏览 827 · 评论 0
    ResponsiveSlides.js基于jQuery响应式幻灯片插件
    问说网 · 发布于 2016-06-12

    ResponsiveSlides.js基于jQuery响应式幻灯片插件

    ResponsiveSlides.js 是一个微型的 jQuery 插件用来创建响应式的幻灯展示效果,对 <ul< 标签中的图片进行自动幻灯展示,支…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13134 文章
    495 评论
    2060 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3026

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2805

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2918

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2340

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2540

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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