css揭秘笔记——用户体验

huaixiaoz 发布于2019-08-29 13:49 / 1738人阅读

摘要：使用透明边框增大热区面积，但和并不能阻止背景扩大到边框下面模拟原有边框自定义复选框思路使用与复选框绑定的的伪元素模拟一个勾选框，可以自定义其样式，将原来的复选框隐藏。这种方式被称为复选框。

选用合适的鼠标光标

css3提供了一大批内建光标(cursor)
其中某些光标很突出，因为只需要花费极少的代码，就可以迅速地提升大量网页应用的可用性。
比如禁用（not-allowed），比如，公共触摸屏中隐藏光标，可以直接使用cursor:none搞定，而不需要额外的透明图片。

扩大可点击区域

将点击区域（热区）向外扩张可以提升可用性。

cursor: pointer;
border: 20px solid transparent; /*使用透明边框增大热区面积，但box-shadow和outline并不能*/
background-clip: padding-box;  /*阻止背景扩大到边框下面*/
box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; /*模拟原有边框*/

自定义复选框

思路：使用与复选框绑定的label的伪元素模拟一个勾选框，可以自定义其样式，将原来的复选框隐藏。这种方式被称为“复选框hack”。


Awesome

#awesome + 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;
}

添加选中的样式：

#awesome:checked + label::before{
    content: "2713"; /*不换行空格*/
    background: yellowgreen;
}

隐藏原来的复选框：

#awesome{
    position: absolute;
    clip: rect(0,0,0,0); /*clip只应用在已定位的元素上*/
}

还可以添加聚焦的样式：

#awesome:focus + label::before{
    box-shadow: 0 0 .1em .1em #58a;
}

禁用样式：

#awesome:disabled + label::before{
    background: gray;
    box-shadow: none;
    color: #333;
}

开关式按钮

各种需要保持状态的UI组件，比如模态对话框、下拉菜单、标签页、跑马灯等，都可以使用上面的“复选框hack”的思路模拟，只不过开关式按钮不需要伪元素，直接把label设置为按钮的样式就可以了。

#switch{
    position: absolute;
    clip: rect(0,0,0,0);
}
#switch + label {
    font-size: 1.5em;
    display: inline-block;
    padding: .3em .5em;
    background: #ccc;
    background-image: linear-gradient(#ffffd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .2em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px white;
}
#switch:checked + label{
    box-shadow: .05em .1em .2em rgba(0,0,0, .6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

通过阴影来弱化背景

增加一层半透明遮罩把后面的一切整体调暗，来凸显某个特定的UI元素。

方案一：
增加一个额外的HTML元素用于遮挡背景：

.overlay{
    position:fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    background: rgba(0,0,0,.8);
}
.lightbox{
    position: absolute;
    z-index: 1;
}

这个方法稳定可靠，但需要增加一个额外的元素。

方案二：
使用伪元素。

body.dimmed::before{
    position:fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    background: rgba(0,0,0,.8);      
}

这个方法移植性不好，的伪元素可能被其他需要占用了。

或者，可以把遮罩交给要凸显的元素的伪元素来实现，伪元素设置z-index:-1;。
但是，这样不能保证遮罩出现在这个元素后面，还是这个元素的父元素或祖先元素后面。
另外，伪元素无法绑定独立的JavaScript事件处理函数。

方案三：
使用box-shadow模拟遮罩。

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

这里的扩张半径用了vmax这个单位。首先，一个固定值无法满足不同屏幕大小的情况。然后只能用视口单位来解决。1vmax相当于1vw和1vh两者中的较大值。100vw等于整个视口的宽度，100vh相当于视口的高度。
这个方案有两个严重的问题：

遮罩层的尺寸和视口有关，当我们滚动页面时，遮罩层就露出来了，除非给它加上position:absolute;。所以要么页面不需要滚动，要么加固定定位。

box-shadow不能捕获指针事件，而且也不能阻止鼠标和其他组件交互，只能在视觉上引导注意力。

方案四：
使用

元素及其::backdrop伪元素

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

但是目前这个元素支持度不高。。

通过模糊来弱化背景

为了达到“景深效果”，也就是当我们的实现聚焦在较近的物体上时，远处的背景就是虚的，我们可以用之前的毛玻璃效果，但是要模糊掉除了凸显元素之外的其他所有元素，不能将虚化滤镜放在元素上，因为，这样，要凸显的元素也被模糊掉了。这时，我们需要一个元素包裹住页面上除了弹出框之外的所有内容元素。当弹出一个对话框时，就给这个元素加一个类，来应用模糊滤镜。

main{
  transition: filter 1s;
}
main.de-emphasized{
  filter: blur(5px) contrast(.8) brightness(.8);
}
dialog{
    box-shadow: 0 0 0 50vmax rgba(0,0,0, .2);/*回退方案*/
}

滚动提示

要实现滚动元素时，容器上下有淡淡的阴影提示，如：

ul{
  overflow: auto;
  width: 10em;
  height: 8em;
  padding: .3em .5em;
  border: 1px solid silver;
  margin-right: -15px;

  background:
      linear-gradient(white 30%, rgba(255,255,255,0)), /*上面遮罩层*/
      radial-gradient(at top, rgba(0,0,0, .3), transparent 70%),/*上面阴影层*/
      linear-gradient(rgba(255,255,255,0)  30%, white),/*下面遮罩层*/
      radial-gradient(at bottom, rgba(0,0,0, .3), transparent 70%);/*下面阴影层*/
  background-attachment: local, scroll, local, scroll; /*遮罩层设为local，阴影层默认值*/
  background-size: 100% 50px, 100% 15px,100% 50px, 100% 15px;
  background-repeat:  no-repeat;
  background-position: top, top, bottom, bottom;
}

background-attachment的一个新属性local，会随内容滚动，当滑到最顶端时，上面的遮罩层遮住阴影层，滑到最底端时，下面的遮罩层遮住阴影层；在中间时，两个阴影层不会被遮住。

云服务器私有云有道云笔记软件体验用户体验用户体验部用户体验的

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

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

css揭秘笔记——视觉效果

摘要：实现染色效果的混合模式是，它会保留上层元素的高亮信息，并从它的下层吸取色相和饱和度信息。当我们只有一个背景图像及一个透明背景色时，就不会有任何混合效果。投影知识点 box-shadow: [inset]? 注意：在元素正下方的投影被裁切掉了，是没有的；而text-shadow不同，文字下方的投影不会被裁切。 box-shadow的第三个参数是模糊半径，假如设置4px...

skinner 2019-08-29 13:48 评论0 收藏0
[CSS]《CSS揭秘》第六章——用户体验

摘要：定义和用法标签为元素定义标注标记。元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。选用合适的鼠标光标 #testdiv{ cursor:not-allowed; /* cursor:none;//例如视频界面隐藏鼠标 */ } 扩大可点击区域 .testdiv{...

simon_chen 2019-08-30 15:54 评论0 收藏0
《css 揭秘》读书笔记

摘要：因为鲜为人知的第四个长度参数双层投影毛玻璃效果见毛玻璃自定义复选框不多介绍，也有相关案例复选框滚动提示现在越来越多的移动端都是这样处理，滚动提示其他揭秘对应的地址图灵图书在封底都提供优惠码低价购买电子书她目标如何用 css 解决难题收获尽量减少代码重复 1 用相对值 font-size: 20px; line-height: 30px; // 应该改成 font-size:...

OnlyMyRailgun 2019-08-29 13:20 评论0 收藏0
css编码技巧【css揭秘读书笔记】

摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧尽量减少代码重复在实践中，代码可维护性的最大要...

Miyang 2019-08-30 12:59 评论0 收藏0
css揭秘笔记——字体排版

摘要：现实中的文字效果图版印刷效果空心字效果效果可以说有点差了，所以不适合描边宽的样式。插入换行 Name: zhanglu Email: zhanglu_helloworld@126.com zhanglu_helloworld@126.com Location: Earth 如何让上面这一段HTML变成这个样子： showI...

XboxYan 2019-08-29 13:48 评论0 收藏0