目录:
1、扩大可点击区域
2、自定义复选框
3、通过阴影/模糊来弱化背景
4、滚动提示
1、扩大可点击区域
有些按钮本身的可点击区域是很小的,为了用户交互需要用CSS夸大其可点击区域。
如下所示的简单按钮,我们想在其本身可点击区域的基础上,让其可点击区域在四个方向上向外扩大10px;
扩大热区最简单的方法是在按钮周围设置一圈透明边框,因为鼠标对元素边框的交互也会触发鼠标事件,这一点是描边和投影所不及的。
.btn {
cursor: pointer;
border: 10px solid transparent;
}
确实扩张了点击区域,但按钮本体也被扩张,这时需要用background-clip:padding-box让背景区域被裁开;background-clip: padding-box;
使用这种方式进行扩张的话,我们就无法用border再设置边框效果,只能用box-shadow替代实现边框效果,但其效果不佳;
由于border会影响布局,所以我们选择替换用伪元素实现扩张点击区域的效果;
.btn::before {
content: '';
position: absolute;
color: black;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
2、自定义复选框
有些场景需要改变复选框的默认样式,让其展现不同的视觉效果,这就需要自定义复选框。
这里只展示一种自定义的实现方式:
<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: .65;
}
input[type="checkbox"]:checked+label::before {
content: '\2713';
background: yellowgreen;
}
上面的代码就是让一个自定义的label标签绑定在一个checkbox后面,然后自定义效果,最后把前面的checkbox用一定方式隐藏,但不销毁元素,如下面代码:
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
最后实现了自定义的checkbox:
3、通过阴影/模糊来弱化背景
(1)阴影
很多时候,我们需要通过一层半透明的遮罩层来把后面的一切整体调
暗,以便凸显某个特定的 UI 元素,引导用户关注。比如,弹出层。
使用伪元素实现阴影遮挡效果是比较靠谱的方案,避免了新加元素作为遮挡层。
body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
缺点是还需要进行JS操作,将伪类元素进行展示。
(2)模糊
所谓的模糊弱化背景,就是把关键元素之外的一切都模糊掉,用来配合(或取代)阴影效果,比上面阴影弱化背景更能突出想突出的内容。
这种效果需要加一个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:onfocus {
filter: blur(5px);
}
由于这样模糊效果出来是很突兀的,所以给它加上动画效果过度。
4、滚动提示
滚动条是一种常见的界面控件,用来提示一个元素除了可以看到的内容之外,还包含了更多内容。但是,它往往太过笨重,在视觉上喧宾夺主,因当用户不与可滚动的元素交互时,滚动条就会被完全隐藏。但是这样就无法看出元素是否可以滚动。
我们参照一种RSS阅读器,让可滚动区域的上下显现一种阴影效果,告知用户这是可滚动的区域。
<ul>
<li>Ada Catlace</li>
<li>Alan Purring</li>
<li>Schrödingcat</li>
<li>Tim Purrners-Lee</li>
<li>WebKitty</li>
<li>Json</li>
<li>Void</li>
<li>Neko</li>
<li>NaN</li>
<li>Cat5</li>
<li>Vector</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;
}
这样在保持隐藏滚动条的同时也能提示用户滚动区域。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。