CSS揭秘（如何只用CSS提升用户视觉体验（）） CSS揭秘：如何只用CSS提升用户

目录： 1、扩大可点击区域 2、自定义复选框 3、通过阴影/模糊来弱化背景 4、滚动提示

1、扩大可点击区域

有些按钮本身的可点击区域是很小的，为了用户交互需要用CSS夸大其可点击区域。

如下所示的简单按钮，我们想在其本身可点击区域的基础上，让其可点击区域在四个方向上向外扩大10px；

文章图片

扩大热区最简单的方法是在按钮周围设置一圈透明边框，因为鼠标对元素边框的交互也会触发鼠标事件，这一点是描边和投影所不及的。

.btn { cursor: pointer; border: 10px solid transparent; }

文章图片

确实扩张了点击区域，但按钮本体也被扩张，这时需要用background-clip：padding-box让背景区域被裁开；

background-clip: padding-box;

使用这种方式进行扩张的话，我们就无法用border再设置边框效果，只能用box-shadow替代实现边框效果，但其效果不佳；
【CSS揭秘（如何只用CSS提升用户视觉体验（））】由于border会影响布局，所以我们选择替换用伪元素实现扩张点击区域的效果；

.btn::before { content: ''; position: absolute; color: black; top: -10px; right: -10px; bottom: -10px; left: -10px; }

2、自定义复选框

有些场景需要改变复选框的默认样式，让其展现不同的视觉效果，这就需要自定义复选框。

这里只展示一种自定义的实现方式：

Awesome!

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; }

上面的代码就是让一个自定义的label标签绑定在一个checkbox后面，然后自定义效果，最后把前面的checkbox用一定方式隐藏，但不销毁元素，如下面代码：

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

最后实现了自定义的checkbox：

文章图片

3、通过阴影/模糊来弱化背景
（1）阴影

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

使用伪元素实现阴影遮挡效果是比较靠谱的方案，避免了新加元素作为遮挡层。

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

缺点是还需要进行JS操作，将伪类元素进行展示。
（2）模糊

所谓的模糊弱化背景，就是把关键元素之外的一切都模糊掉，用来配合（或取代）阴影效果，比上面阴影弱化背景更能突出想突出的内容。

这种效果需要加一个main元素把所有内容都包裹起来，再使用模糊滤镜

Bacon Ipsum dolor sit amet... O HAI, I'm a dialog. Click on me to dismiss.

main { transition: .6s filter; }main:onfocus { filter: blur(5px); }

由于这样模糊效果出来是很突兀的，所以给它加上动画效果过度。
4、滚动提示

滚动条是一种常见的界面控件，用来提示一个元素除了可以看到的内容之外，还包含了更多内容。但是，它往往太过笨重，在视觉上喧宾夺主，因当用户不与可滚动的元素交互时，滚动条就会被完全隐藏。但是这样就无法看出元素是否可以滚动。

我们参照一种RSS阅读器，让可滚动区域的上下显现一种阴影效果，告知用户这是可滚动的区域。

Ada Catlace Alan Purring Schr?dingcat Tim Purrners-Lee WebKitty Json Void Neko NaN Cat5 Vector

ul { overflow: auto; width: 10em; height: 8em; padding: .3em .5em; border: 1px solid silver; background: radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%) no-repeat; background-size: 100% 15px; }

这样在保持隐藏滚动条的同时也能提示用户滚动区域。