CSS揭秘--笔记--滚动提示

我们实现的最终效果如下

目录结构如下

<ul>    <li>Ada Catlace</li>    <li>Alan Purring</li><li>Schrödingcat</li><li>Tim Purrners-Lee</li><li>Webkitty</li>   <li>Json</li><li>Void</li><li>Neko</li>   <li>NaN</li><li>Cat5</li><li>Vector</li>
</ul>

css代码如下

ul {display: inline-block;overflow: auto;width: 7.2em;height: 7em;border: 1px solid silver;padding: .3em .5em;list-style: none;margin-top: 2em;font: 100 200%/1.6 'Frutiger LT Std', sans-serif;background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px;background-repeat: no-repeat;background-attachment: local, scroll, local, scroll;margin-top: 30px;
}

实现这种特效的关键点在background-attachment属性，
If a background-image is specified, the background-attachment CSS property determines whether that image’s position is fixed within the viewport, or scrolls along with its containing block.
这个属性实现的是如果存在背景图片，则该属性可以定义图片的位置，是相对于视图固定或是随着页面内容滚动。
具体属性如下（MDN描述）
Values

fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn’t move with the element.
local
This keyword means that the background is fixed with regard to the element’s contents: if the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
scroll
This keyword means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)

为了实现这个效果，我们需要两成背景，一层用来生成那条阴影，一层生成用来遮挡阴影的白色矩形，起作用类似于遮挡层，生成阴影的那层具有background-attachment 默认的值scroll, 遮挡背景的background-attachment 值为local，这样就会在我们滚动到最边缘是遮挡住阴影。

CSS揭秘--笔记--滚动提示相关推荐

css揭秘笔记——用户体验
选用合适的鼠标光标 css3提供了一大批内建光标(cursor) 其中某些光标很突出,因为只需要花费极少的代码,就可以迅速地提升大量网页应用的可用性. 比如禁用(not-allowed),比如,公共触 ...
css揭秘笔记——背景与边框
背景与边框半透明边框知识点 background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和 ...
《CSS揭秘》读书笔记
摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...
CSS 揭秘-阅读笔记:（Ch5-Ch6）
CSS 揭秘阅读笔记:(Ch5-Ch6) CSS 揭秘阅读笔记:(Ch5-Ch6) Ch5 字体排印 5.20 连字符断行 5.21 插入换行 5.22 文本行的斑马条纹 5.23 调整tab 的 ...
《CSS揭秘》笔记（一）
前言我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
CSS笔记（CSS禅意花园+CSS揭秘）
关联css与html 通过id在head标签中一一设置 <style type="text/css"> #id名字{ Color:red; } </style&g ...
css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
双18期|CSS揭秘之简写属性
theme: channing-cyan highlight: a11y-dark 双18期|CSS揭秘之简写属性 tips:每个技术点都值得优学优写:18期一.写在前面 css 简写属性了解吗?前 ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...

CSS揭秘--笔记--滚动提示

CSS揭秘--笔记--滚动提示相关推荐

最新文章

热门文章