CSS进阶（五）用户体验

CSS进阶（五）用户体验

一、选用合适的鼠标光标

光标：http://w3.org/TR/css3-ui/#cursor
 

1. 提示禁用状态

:disabled,[disabled],[aria-disabled="true"] {
    cursor: not-allowed;
}

 

2. 隐藏鼠标光标

cursor:url("transparent.gif"); /*回退机制*/
cursor:none;

 

二、扩大可点击区域

背景

对于较小的，难以瞄准的控件来说，若不能把他的视觉尺度直接放大，将其可点击区域向外扩展往往也可以带来可用性的提升。

解决方案

button{
    width: 50px;
    height: 50px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    background: #58a;
    border-radius: 25px;
    outline: none;  //去除默认样式
    border: 10px solid transparent;
    background-clip: padding-box; // 默认情况下背景会延伸到边框下面，background-clip将背景限制在原本的区域里
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset; //用内嵌的投影模拟出边框
    cursor: pointer;
}

未加box-shadow：

添加box-shadow：

 

三、自定义复选边框

解决方案：

根据复选框的状态来给<label>元素设置样式，当<label>元素与复选框关联后，也可以起到触发开关的作用。由于label不是复选框那样的替换元素，我们可以为它添加生成性内容（伪元素），并基于复选框的状态为其设置样式。然后，把真正的复选框隐藏起来，再把生成性内容梅花一番，顶替原来的复选框。

<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>

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: .45;
}

input[type='checkbox']:checked+label::before{
    content: '\2713';  /*√*/
    background: yellowgreen;
}

/*隐藏原来的复选框，不能用display:none，那样会把它从键盘tab键切换焦点的队列中完全删除*/
input[type='checkbox']{
    position: absolute;
    clip: rect(0,0,0,0);
}

/*聚焦时的样式*/
input[type='checkbox']:focus +label::before{
    box-shadow: 0 0 .1em .1em #58a;
}

/*禁用时的样式*/
input[type='checkbox']:disabled +label::before{
    background: gray;
    box-shadow: none;
    color: #555;
}

还未关闭原来的复选框：

关闭原来的复选框：

聚焦时的样式：

 

开关式按钮

开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态；启用时，是被按下的状态；停用时，是浮起的状态。 只需要把label设置为按钮的样式即可，并不需要用到伪元素 。但容易与普通按钮混淆，误以为按下按钮会触发某个动作

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

input[type='checkbox']+label{
    display: inline-block;
    padding: .3em .5em;
    background: #ccc;
    background-image: linear-gradient(#ddd,#bbb);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px white;
}

input[type='checkbox']:checked+label,
input[type='checkbox']:active+label{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0, 0, 0, .3);
    background: #bbb;
}

按钮按下：

按钮弹起：

 

四、通过阴影来弱化背景

问题背景

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

 

伪元素方案

body.dimmed::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的扩张参数可以把元素的投影向各个方向延伸放大。生成一个巨大的投影，不偏移也不模糊，模拟遮罩层的效果

div{
    box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);
}

此方案有两个问题：

• 由于遮罩层尺寸是与视口相关，而不是与页面相关的，当我们滚动页面时，遮罩层就露出来了。所以我们要配合**position：fixed；**来使用或者当页面没有滚动条再使用
• box-shadow不能防止用户的鼠标与页面的其他部分发生交互，他只能在视觉上起到引导注意力的作用

 

backdrop方案

如果你想引导用户关注的元素就是一个模态的<dialog>元素，那么根据浏览器的默认样式，它会自带一个遮罩层。借助::backdrop伪元素，这个原声的遮罩层也可以设置样式，如更暗一点

dialog::backdrop{
    background:rgba(0,0,0,.8);
}

缺点：支持其的浏览器有限

 

五、通过模糊来弱化背景

动用一个额外的HTML元素来实现，需要将页面上除了关键元素之外的一切都包裹起来，这样就可以只对这个容器元素进行模糊处理了。<main>元素是非常适合的，因为它可以把页面中主要内容标记处理啊，同时还给我们添加样式的钩子。

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

main {
    transition: .6s filter;
}

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

 

六、滚动提示

解决方案

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Vue</li>
    <li>React</li>
    <li>WebSocket</li>
    <li>HTTP</li>
    <li>Single</li>
    <li>D3</li>
    <li>Canvas</li>
    <li>WebGL</li>
</ul>

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

如何让背景图像跟着元素的内容一起滚动？

我们需要两层背景，一层用来生成那条阴影，另一层就是一个用来遮挡阴影的白色矩形，其作用类似于遮罩层。生成阴影的那层背景将具有默认的background-attachment值（scroll），我们希望他总是保持在原位。我们把遮罩背景的background-attachment设置为local。这样它就会在我们滚动到最顶部时盖住阴影，在向下滚动时跟着滚动，从而露出阴影。

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

划到最顶部：

划到最底部：

 

七、交互式的图片对比控件

CSS resize方案

图片对比滑动控件可以理解为两层结构：下层是一张固定的图片，上层的图片则可以在水平方向调整大小，从而或多或少的露出下层照片。新属性：resize。这个属性适用于任何元素，只要它的overflow属性不是visible

<div class="image-slider">
    <div>
        <img src="1.png" alt="Before">
    </div>
    <img src="n4.jpg" alt="After">
</div>

 .image-slider {
     position: relative;
     display: inline-block;
}

.image-slider div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    resize: horizontal;
    max-width: 100%;  /*将div的宽度拉伸到超过图片宽度的程度*/
}

.image-slider div::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    padding: 4px;
    background: linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize; /*提供了额外的自释性，可以提示用户这个区域可以向调节手柄那样拖动*/
}

.image-slider img {
    display: block;
    user-select: none; /*规定不能选取元素的文本，即不会误选图片*/
    width: 600px;
    height: 400px;
}

::-webkit-resizer {
    width: 0;
    height: 0;
}