css揭秘实战技巧 - 用户体验[五]

全目录

本系列文章，主要是围绕css3属性，实现我们常见的各种效果，这些效果都是我们实战开发中经常可以用到的效果：

1. css揭秘实战技巧- 背景与边框 [一]
2. css揭秘实战技巧- 形状 [二]
3. css揭秘实战技巧 - 视觉效果[三]
4. css揭秘实战技巧 - 字体排印[四]
5. css揭秘实战技巧 - 用户体验[五]
6. css揭秘实战技巧 - 结构与布局[六]
7. css揭秘实战技巧 - 过渡与动画[七]

前言

1. 选用合适的鼠标光标
2. 扩大点击区域
3. 通过阴影来弱化背景
4. 通过模糊来弱化背景
5. 滚动提示

一：选用合适的鼠标光标

平时开发中，我们经常会这是鼠标光标的效果，那最长设置的就是cursor:pointer;表示可点击的，那么其实还有其他一些我们不常用，但却非常有用的光标效果：

1. pointer: 可点击
2. not-allowed: 不允许点击
3. context-menu：表示元素有上下文菜单
4. move: 表示元素可以移动的时候
5. help: 有帮助信息的时候
6. copy: 比如：某一按钮点击会将文案复制到其他地方或者剪切板的效果，就可以设置为copy
7. none: 不显示鼠标光标（某些不希望用户操作的时候，该效果是可以使用的）

以下是所有光标的效果：我们只需要记住上面这些常用的效果即可。 css2.1内置光标效果：

css3 内置光标效果：

二：扩大可点击区域

这也是我们平时做页面的时候，可以优化的一点，尽可能的扩大可点击区域，这样用户更容易到底可点击的区域。

例如下图：我们不要只给➕ 设置点击 事件，而是给整个圆圈区域设置点击事件。

三：通过阴影来弱化背景

首先，我们来看一下效果：

方案一：阴影部分用一层div包括，并且设置透明度，

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

方案二：用伪元素代替 外层的div

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

缺点：伪元素无法绑定独立的javascript事件处理的回调函数。

方案三：采用box-shadow

box-shadow: 0 0 0 999px rgba(0,0,0,.8); //此时阴影半径必须设置的足够大
或者
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); //将阴影半径设置为视口的宽高。

缺点：阴影也无法绑定独立的javascript事件处理的回调函数。

方案四：采用dialog的backdrop属性

//设置dialog元素的::backdrop伪元素，
dialog::backdrop {
    background: rgba(0, 0, 0, .8);
}

确定：浏览器的兼容性有限

四：通过模糊来弱化背景

首先，来看一下我们想要实现的效果：

代码如下：

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

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

五：滚动提示

首先，我们看一下效果：

思路讲解： 首先，上下的阴影效果可以通过设置radial-gradient实现，滚动到顶部或者底部的时候，阴影消失，可以通过另外加一层白色阴影去覆盖即可，然后通过backgroud-attachment控制阴影是否在滚动时显示。

代码如下：

ul {
    overflow: auto;
    width: 20em;
    height: 12em;
    padding: .3em .5em;
    border: 1px solid silver;
    background: linear-gradient(white, white) 0 0 / 100% 50px,
                radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0/ 100% 15px,
                linear-gradient(to top, white, white) 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;
}