CSS提高用户体验的那些事

浠ラ箍发布于2019-08-29 12:20 / 959人阅读

1. 选择合适的鼠标光标

在有一些触摸屏上我们可能需要隐藏鼠标的光标，比如说播放器的屏幕上，这种情形下隐藏鼠标光标能带来性能方面的提升。

使用cursor: none;可以达到隐藏鼠标光标的效果。

对于一些旧的浏览器可能不支持这些新的光标关键字，可以通过使用老的方式，用一张1 * 1 的透明GIF图片，然后这样做：

video {
    cursor: url("transparent.gif");
}

最后我们生成隐藏鼠标光标的兼容各种情况的css代码如下：

video {
    cursor: url("transparent.gif");
    cursor: none;
}

2. 扩大按钮的可点击区域

可点击区域向外扩张往往也可以带来可用性的提升。没有人愿意对一个狭小的按钮尝
试点按很多次

比如把元素的热区在四个方向上各向外扩大10px，解决办法：

（1）给button增加border，代码如下：

button {
    padding: 20px;
    cursor: pointer;
    border: 10px solid transparent;
    background: #58a linear-gradient(#77a0bb, #58a);
    /* 
     * border会同时让按钮变大
     * 因为背景在默认情况下会蔓延到边框的下层
     * 使用 background-clip 属性可以把背景限制在原本的区域内
     */
    background-clip: padding-box;
}

效果如下：

这种解决方案并不是很好，边框会影响布局，并且有的场景并不能使用边框，另一种解决方案就是伪元素法，伪元素同样可以代替其宿主元素来响应鼠标交互。

（2）伪元素法：原理就是伪元素在四个方向都设置成比宿主大10px，基于伪元素的方法很灵活，基本上可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位代码如下：

.button {
    position: relative;
    /*其他的样式*/
}
.button::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

3.自定义复选框的样式

复选框和单选框这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的，解决方法可以通过label元素来设置样式，然后把真正的复选框隐藏起来，代码如下：

html部分


Awesome

css部分

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 4px;
    border-radius: 4px;
    background: silver;
    text-indent: 2px;
    line-height: 13px;
}

效果如下：

还可以设置各种状态的样式，checked、focus、disabled。

4.通过模糊弱化背景

将背景虚化来突出当前的文本内容

解决代码如下：

html部分


    
      这是背景
    
    
      i am a dialog

css部分

.virtual-container {
  width: 1000px;
  height: 500px;
  position: relative;
}
.main {
  width: 100%;
  height: 100%;
  transition: .6s filter;
  background: #ccc;
  
}

.virtual-container:hover .main {
  filter: blur(2px) contrast(.8) brightness(.8);
} 

.virtual-container .alert {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    background: #fff;
}

效果对比图如下：

5.交互式的图片对比控件

对比两张图片的排布方式是经常出现的，为了突出图片反应的问题
比如这种的图片对比交互：

应用了一点jQuery，实现的代码如下：

html部分

css部分

.image-slider {
    position:relative;
    display: inline-block;
}
.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%; /* 初始宽度 */
    overflow: hidden; /* 让它可以裁切图片 */
}
.image-slider img {
    display: block;
    user-select: none;
    width: 400px;
    height: 400px;
}
.image-slider input {
    position: absolute;
    left: 0;
    bottom: 10px;
    margin: 0;
    /*
     * 增加range的大小，提升用户的体验
     * 先减小它的宽度，在用变形将它放大
     */
    width: 50%;
    transform: scale(2);
    transform-origin: left bottom;
}

js部分

var slider = $(".image-slider");
var div = document.createElement("div");
$(".before").wrap("");

var range = document.createElement("input");
range.type = "range";
range.oninput = function() {
  $(".img-continer").width(this.value + "%");
}; 
slider.append(range);

云服务器 GPU云服务器云服务器那些事用户体验的用户体验的要素用户体验

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111824.html

前端入坑指南

摘要：作为自学两年的初级前端，希望对那些想入门前端开发的人分享一些观点。尤其是这几年前端领域飞速的发展，新东西层出不穷。或者关注下我的微信公众号前端获取每天分享前端入门知识。为什么选择前端做一件事之前最好问问自己为什么要做，然后再去思考该怎么做。如果只是看到别人做了，并且有很不错的收入，然后自己就决定做了，很可能中途放弃浪费掉很多时间。起码问自己一个问题：我是否真的热爱这个领域，并且很乐意在这个...

junnplus 2019-05-22 15:27 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0
CSS居中那些事

摘要：定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示，然后使用来实现居中效果。做前端这一年多来，其实一直都是偏向于js前后端，css什么的总是抱着够用就好的心态，从来没有系统的学习或总结过，结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师，不能让css成为自己的短板，于是简单的总结一下，高手绕路。...

dingding199389 2019-08-30 13:13 评论0 收藏0