《CSS 揭秘》- 用户体验 - 第五章
2018-04-23 本文已影响0人
noyanse
选用合适的鼠标光标
image.png
image.png
扩大可点击区域
border: 10px solid transparent;
background-clip: padding-box;
这个方法很管用。不过好景不长，当你需要给
按钮加上真正的边框效果时，会发现按钮仅有的那道边框已经被我们挪作他用了。怎么办？很简单，可以用内嵌投影来模拟出一道（实色）边框。
border: 10px solid transparent;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box;
自定义复选框
http://dabblet.com/gist/e269f10328615254e29e
image.png
遮罩层
1.最常见的实现方法就是增加一个额外的 HTML 元素用于遮挡背景，然后为它添加如下样式
.overlay { /* 用于遮挡背景 */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.lightbox { /* 需要吸引用户注意的元素 */
2.伪元素方案(不好)
伪元素无法绑定独立的 JavaScript 事件处理函数。当遮罩层是由一个独立的元素来实现时，我们可以给它绑定事件处理函数，比如当用户点击遮罩层时自动关闭弹出层。当使用弹出层自己的伪元素来实现遮罩层时，就需要判断用户到底是点了弹出层还是遮罩层，这就变得相当棘手了
body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
3.box-shadow 方案
http://dabblet.com/gist/91538b2131d3545035ca
box-shadow: 0 0 0 999px rgba(0,0,0,.8);
这个初步的解决方案有一个明显的问题，就是它无法在较大的屏幕分
辨率（>2000px）下正常工作。此处最合适的视口单位是 vmax
1vmax 相当于 1vw 和 1vh 两者中的较大值。 100vw 等于整个视口的宽度， 100vh 就是视口的高度。因此，满足我们需求的最小值就是50vmax 。由于投影是同时向四个方向扩展的，这个遮罩层的最终尺寸将是100vmax 加上元素本身的尺寸。
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
通过模糊来弱化背景
http://dabblet.com/gist/1326eb460b0dff91d638
背景知识
过渡动画，“毛玻璃效果”，“通过阴影来弱化背景”
image.png
