CSS使用技巧

CSS使用技巧-用户体验

Posted on 2018-04-16 · 阅读约 12 分钟
#CSS使用技巧

前言

1.扩大可点击区域

在移动端的时候，我们往往需要增加可点击区域，比如下面这个，本身比较小，那我们如何让其可点击区域变大呢？

常用做法是增加透明边框，但如果我们吧边框用了，我们还想增加边框样式怎么办，我们就可以借用box-shadow来模边框效果，代码如下：

1
2
3
4
5
6
7
8
9
10
11
button {
    padding: .3em .5em;
    border: 100px solid transparent;
    border-radius: 50%;
    background: #58a;
    background-clip: padding-box;
    box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
    color: white;
    font: bold 150%/1 sans-serif;
    cursor: pointer;
}

其中，默认背景会蔓延到边框的下层，所以我们需要使用background-clip控制背景裁剪区域，当然我们还可以使用伪元素来实现增加可点击区域：

1
2
3
4
5
6
button:before {
    content: '';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;chichichifansfsdf
}
2.自定义复选框

我们都知道，默认的复选框很难使用样式修改，所以我们只能使用默认样式，但是默认样式不美观，所以我们不得不寻找一些新的点子解决这个问题，其中的一个思路就是使用label标签模拟复选框行为，然后将真正的复选框隐藏掉，代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
}

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

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

详情查看这个demo

3.遮罩层

平时我们实现遮罩层往往都是使用一个div实现的，但是我们能不能不用页面元素实现呢，于是我们又想到了伪元素，但是伪元素不能相应用户点击事件，比如用户点击遮罩层消失的效果，其实我们还可以通过box-shadow方案实现这一效果，代码如下：

1
2
3
4
.lightbox {
    position: fixed;
    box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}

这里的vmax指的是1vw和1vh中的较大者，而100vw则是指整个屏幕的可视宽度，所以我们的设置的值为50vmax,也就是此时阴影大小是50vw + 50vw +元素自身宽度。但是这个遮罩层不会阻止默认鼠标交互，也就是鼠标可以继续滚动页面，当页面可滚动时。
当然还有一个浏览器自带的模态框元素dialog但是目前似乎只有谷歌支持。

4.滚动条提示

在滚动的时候，当底部有内容时，则显示一个阴影部分，从而提示底部还有内容，代码如下：

1
2
3
4
5
6
7
8
9
10
ul {
    overflow: auto;
    background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
                radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
                linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) 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;
    margin-top: 30px;
}

详情可点这个demo。

交互式图片对比控件

假如我们要对比两张图片前后的异同，那会怎么实现呢，直接放上两张图片，这样似乎只能看到较大的区别的，一些细微的地方可能就很难捕捉到了，所以我们现在有以下的设计稿:

通过拖拽下三角可以显示之前与之后的图片对比。

这里我们借助于一个resize属性，这个属性不只是可以作用于textare,其他元素也是可以的，只要求它的overflow的属性值不是visible就可以，我们有以下HTML布局：

1
2
3
4
<div class="image-slider">
<div><img src="../../../../img/2018-4-16/adamcatlace-before.jpg" alt="Before" /></div>
<img src="../../../../img/2018-4-16/adamcatlace.jpg" />
</div>

css样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.image-slider {
    position:relative;
    display: inline-block;
}

.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%;
    max-width: 100%;
    overflow: hidden;
    resize: horizontal;
}
.image-slider img {
    display: block;
    user-select: none;
}

效果如下：

我们是可以拖拽了，但是没有按钮提示用户拖拽的按钮提示，于是我们通过伪元素实现这种效果，css代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
.image-slider > div:before {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 12px; height: 12px;
    padding: 5px;
    background: linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
    -webkit-filter: drop-shadow(0 0 2px black);
    filter: drop-shadow(0 0 2px black);
}

最终实现了这种效果，详情可点这个demo。

作者：luoyelusheng
链接：https://luoyelusheng.com/2018/04/16/CSS%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7-%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

下一篇： CSS使用技巧-视觉效果 →

▲