css 左边阴影_css揭秘-用户体验

选用合适的鼠标光标

难题

鼠标指针的用途不仅在于显示鼠标在屏幕上的位置，还可以告诉用户当前可以执行什么动作。这在桌面应用程序中是十分普遍的用户体验实践，但在网页应用中却往往被忽视。

解决方案

css3 中定义了鼠标的光标，可以使用 cursor 属性来定义。

扩大可点击区域

难题

对于那些较小的、难以瞄准的控件来说，如果不能把它的视觉尺寸直接放大，将其可点击区域（热区）向外扩张往往也可以带来可用性的提升。没有人愿意对一个狭小的按钮尝试点按很多次，但实际上这样的无奈之举仍然每天都在发生。

还有一些时候，我们想让某个元素在鼠标接近窗口某侧时自动滑入，举个例子，一个自动隐藏的页头会在鼠标接近时自动从顶部滑入并完整展现，这也涉及（只在单一方向上）放大热区的问题。

解决方案

扩张热区最简单的方法是为它设置一圈透明边框，因此我们加入：

border: 10px solid transparent;

加入10px透明边框的按钮

但是，效果并不好，它把按钮同时加大了，原因在于背景在默认情况下会蔓延到边框的下层。简单好用的 background-clip 属性可以把背景限制在原本的区域之内：

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;

与 border-box 不同的是 box-shadow 可以指定多层投影，只需要使用逗号分隔即可。但如果把内嵌投影和（常规的）外部投影组合起来，将会得到一个怪异的效果，因为外部投影是绘制在 border box 外部的。

边框会影响布局，因此这种方法也不是很完美，于是放弃边框改用另一个特性来实现：伪元素同样可以代表其宿主元素来响应鼠标交互。

于是，可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向都比宿主元素大出10px：

button {position: relative;/* [其余样式] */
}
button::before {content: '';position: absolute;top: -10px; right: -10px;bottom: -10px; left: -10px;
}

自定义复选框

难题

现在可以设置大多数表单控件的样式，但是单选框和复选框不在此列，极大多数浏览器中仍然是几乎或者完全无法设置样式的。

解决方案

核心：当 <label> 元素与复选框关联之后，也可以起到触发开关的作用。

初始代码：

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

接下来，需要生成一个伪元素，作为美化版的复选框，先给这个伪元素添加一些基本的样式：

input[type="checkbox"]+label::before {content: 'a0'; /* 不换行空格 */display: inline-block;vertical-align: .2em;width: .8em;height: .8em;margin-right: .2em;border-radius: .2em;background: silver;text-indent: .15em;line-height: .65;
}

左边是原生的复选框，右边是初步定义的复选框

现在需要给复选框的勾选状态加上不同的样式。样式可以很简单，比如换种颜色，再加上勾选标记：

input[type="checkbox"]:checked + label::before {content: '2713';background: yellowgreen;
}

选中后的状态

现在看来，这个伪元素俨然是一个经过简单美化的复选框了，因此需要将原生的那个复选框隐藏掉即可，但是不能使用 display:none，因为那样会把它从键盘 tab 键切换焦点的队列中完全删除。使用另一种方法来达到目的：

input[type="checkbox"] {position: absolute;clip: rect(0,0,0,0);
}

美化后将原生的复选框隐藏掉的状态

还可以进一步优化，比如在它聚焦或禁用时改变它的样式：

input[type="checkbox"]:focus + label::before {box-shadow: 0 0 .1em .1em #58a;
}input[type="checkbox"]:disabled + label::before {background: gray;box-shadow: none;color: #555;cursor: not-allowed;
}

开关式按钮

开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停用时，它就是浮起的状态。

在语义上，开关式按钮和复选框并没有本质上的差别，因此可以放心地使用这个技巧，不用担心语义上有问题。如果想用这个技巧来生成开关式按钮，其实只需要把 label 设置为按钮的样式即可，并不需要用到伪元素。

input[type="checkbox"] {position: absolute;clip: rect(0, 0, 0, 0);
}input[type="checkbox"]+label {display: inline-block;padding: .3em .5em;background: #ccc;background-image: linear-gradient(#ddd, #bbb);border: 1px solid rgba(0, 0, 0, .2);border-radius: .3em;box-shadow: 0 1px white inset;text-align: center;text-shadow: 0 1px 1px white;
}input[type="checkbox"]:checked+label,
input[type="checkbox"]:active+label {box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;border-color: rgba(0, 0, 0, .3);background: #bbb;
}

左边是按钮的正常状态，右边是按钮按下的状态

开关式按钮很容易与普通按钮混淆，让人误以为按下它会触发某个动作，要慎用。

通过阴影来弱化背景

难题

很多时候，我们需要通过一层半透明的遮罩层来把后面的一切整体调暗，以便凸显某个特定的 UI 元素，引导用户关注。比如，弹出层等。

通用的方法经常是增加一个额外的 HTML 元素用于遮挡背景，然后添加如下样式：

.overlay { /* 用于遮挡背景 */position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.8);
}
.lightbox { /* 需要吸引用户注意的元素 */position: absolute;z-index: 1;/* [其余样式] */
}

这个方法稳定可靠，但是需要增加一个额外的 HTML 元素，这就意味着该效果无法由单独的 CSS 实现，这不是一个严重的问题，但是对于开发者来说是一个麻烦事。

伪元素方案

可以使用伪元素来消除额外的 HTML 元素：

body.dimmed::before {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;background: rgba(0,0,0,.8);
}

这个方法的可移植性还不够好，body 元素上可能有其他的需求占用了 ::before 伪元素，而且在使用这个方法时，还需要一点 JavaScript 来给 body 添加 dimmed 这个类。

如果把遮罩层交给这个元素自己的 ::before 伪元素来实现，就可以弥补这些不足了。给伪元素设置 z-index: -1; 就可以让它出现在元素的背后。尽管这解决了可移植性的问题，但无法对遮罩层的 Z 轴层次进行细粒度的控制。它可能会出现在这个元素之后（这是我们期望的），但也可能会出现在这个元素的父元素或祖先元素之后。

box-shadow 方案

box-shadow 的扩张参数可以把元素的投影向各个方向延伸放大。具体做法就是生成一个巨大的投影，不偏移也不模糊，简单而拙劣地模拟出遮罩层的效果：

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

这个方法在分辨率超过 2000px 就不能完全遮上，因此需要扩大投影的尺寸，因为无法分开指定水平和垂直方向上的扩张半径，所以此处最合适的视口单位是 vmax 。 1vmax 相当于 1vw 和 1vh 两者中的较大值。因此修改为如下：

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

这个技巧非常简洁易用，但它存在两个非常严重的问题：

遮罩层的尺寸是跟视口相关而不是跟页面相关，因此当滚动页面时，遮罩层的边缘就露出来了，除非加上 position: fixed。
当使用一个独立的元素（或伪元素）来实现遮罩层时，这个遮罩层不仅可以从视觉上把用户的注意力引导到关键元素上，还可以防止用户的鼠标与页面的其他部分发生交互，但是 box-shadow 并没有这种能力。

backdrop 方案

如果想引导用户关注的元素就是一个模态的 <dialog> 元素（<dialog> 元素可以由它的 showModal() 方法显示出来），那么根据浏览器的默认样式，它会自带一个遮罩层。借助 ::backdrop 伪元素，这个原生的遮罩层也是可以设置样式的，比如可以把它变得更暗一些：

dialog::backdrop {background: rgba(0, 0, 0, .8);
}

要注意兼容性问题。

通过模糊来弱化背景

难题

上一节是使用半透明的遮罩层弱化页面背景，但是如果页面元素较多的情况下，只有将其调到很暗的程度才能为背景之上的文本提供足够的对比度，另外还有一种更优雅的方法，就是把关键元素之外的其他元素都模糊掉，用来配合（或取代）阴影效果。

不过，这种方法的实现难度也更高。在滤镜效果出现之前，完全是不可能完成的任务，即使是在 blur() 滤镜出现之后，这个任务依旧是非常困难的。

解决方案

需要一个额外的 HTML 元素来实现这个效果，要将页面上除了关键元素之外的其他元素都包裹起来，这样就可以只对这个容器进行模糊处理了。<main> 元素比较合适。结构代码：

<main>我是一个页面主体</main>
<dialog>我是一个对话框，点击。
</dialog>
<!-- 其他对话框都写在这里 -->

每当弹出一个对话框，都需要给 <main> 元素增加一个类，以便对它应用模糊滤镜。

main.de-emphasized { filter: blur(5px);
}

但是，现在这个模糊效果是突然出现的，看起来不是那么自然，反而给人一种突兀的感觉。由于 CSS 滤镜是可以设置动画的，可以让页面背景的模糊过程以过渡动画的形式来呈现。

main {transition: .6s filter;
}
main.de-emphasized { filter: blur(5px);
}

如果能把这两种弱化背景的手法(阴影和模糊)结合起来，那就更好了。有一种实现方法就是使用 brightness() 和 / 或 contrast() 滤镜:

main.de-emphasized {filter: blur(3px) contrast(.8) brightness(.8);
}

滚动提示

难题

当侧边栏的容器还有更多内容时，一层淡淡的阴影会出现在容器的顶部和 / 或底部。

解决方案

ul {display: inline-block;overflow: auto;width: 7.2em;height: 7em;border: 1px solid silver;padding: .3em .5em;list-style: none;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;
}

交互式的图片对比控件

.image-slider {position: relative;display: inline-block;
}.image-slider>div {position: absolute;top: 0;bottom: 0;left: 0;width: 50%;max-width: 100%;overflow: hidden;resize: horizontal;
}.image-slider>div:before {content: '';position: absolute;right: 0;bottom: 0;width: 12px;height: 12px;padding: 5px;background: linear-gradient(-45deg, white 50%, transparent 0);background-clip: content-box;cursor: ew-resize;-webkit-filter: drop-shadow(0 0 2px black);filter: drop-shadow(0 0 2px black);
}.image-slider img {display: block;user-select: none;
}