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;
}
复制代码