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

栏目: CSS · 发布时间: 5年前

内容简介:本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:平时开发中,我们经常会这是鼠标光标的效果,那最长设置的就是cursor:pointer;表示可点击的,那么其实还有其他一些我们不常用,但却非常有用的光标效果:以下是所有光标的效果:我们只需要记住上面这些常用的效果即可。 css2.1内置光标效果:

本系列文章,主要是围绕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内置光标效果:

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

css3 内置光标效果:

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

二:扩大可点击区域

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

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

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

三:通过阴影来弱化背景

首先,我们来看一下效果:

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

方案一:阴影部分用一层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);
}
复制代码

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

四:通过模糊来弱化背景

首先,来看一下我们想要实现的效果:

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

代码如下:

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

五:滚动提示

首先,我们看一下效果:

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

思路讲解: 首先,上下的阴影效果可以通过设置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;
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web标准之道

Web标准之道

阿一、棕熊、李战、丁学 / 人民邮电出版社 / 2009-8 / 35.00元

《Web标准之道:博客园精华集》由博客园知名博主联手打造,涉及Web标准、HTML/CSS、JavaScript、SEO优化等诸多领域,内容新颖,观点独特,妙语连珠。《Web标准之道:博客园精华集》并不是一本由代码和技巧堆积而成的集合,更多的是探讨了Web设计中若干理念和心得,其中多为经验之谈。无论对于从事Web前端设计的人士,还是对于那些从事Web后端编程的技术人员,《Web标准之道:博客园精华......一起来看看 《Web标准之道》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具