[CSS]《CSS揭秘》第六章——用户体验

simon_chen 发布于2019-08-30 15:54 / 2164人阅读

摘要：定义和用法标签为元素定义标注标记。元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

选用合适的鼠标光标

#testdiv{
    cursor:not-allowed;
    /*
    cursor:none;//例如视频界面隐藏鼠标
    */
}

扩大可点击区域

.testdiv{
    width: 100px;
    height: 40px;
    position: relative;
    cursor: move;
}
.testdiv::before{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: 10px;
    bottom: 10px;
    cursor: move;
}

利用伪元素。

自定义复选框


    
    Awesome


input[type="checkbox"]+label::before{
    content: "a0";
    display: inline-block;
    vertical-align: .2em;  //vertical-align 属性设置元素的垂直对齐方式
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background: silver;
    text-indent: .15em;  //text-indent 属性规定文本块中首行文本的缩进。
    line-height: .65;
}

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

input[type="checkbox"]{
    position: absolute;
    clip: rect(0,0,0,0)   //clip 属性剪裁绝对定位元素。
}

定义和用法  标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label
元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
 标签的 for 属性应当与相关元素的 id 属性相同。

通过阴影来弱化背景、通过模糊来弱化背景（遮罩层） 方案一：增加多一个HTML元素

.overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
}
main{
    background: blueviolet;
}
.lightbox{
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 100px;
    border: 1px solid red;
    background: yellowgreen;
}



the backgroung


    the lightbox

方案二：通过增加伪元素来取代多余的HTML元素 方案三：box-shadow方案

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

*：有2个缺点：

由于遮罩层的尺寸是与视口相关，而不是与页面相关的，当我们滚动页面时，遮罩层的边缘就露出来了，除非给它加上position: fixed;
boxshadow 并没有这种能力，因此它只能在视觉上起到引导注意力的作用，无法阻止鼠标交互。

方案4：通过模糊来弱化背景

main.de-emphasized {
    filter: blur(5px);
    word-wrap: break-word；
}

滚动提示

.testdiv{
    margin: 200px;
    overflow: auto;
    width: 10em;
    height: 8em;
    
    border: 1px solid silver;

    background: linear-gradient(white 15px,rgba(255,255,255,0)) ,
                radial-gradient(at top,rgba(0,0,0,.2),transparent 70%) ,
                linear-gradient(to top,white 15px,rgba(255,255,255,0)) ,
                radial-gradient(at bottom,rgba(0,0,0,.2),transparent 70%);
    background-position: 0 0,0 0,100% 100%,100% 100%;
    background-size: 100% 50px,100% 15px,100% 50px,100% 15px;

    
    background-repeat: no-repeat;
    
    background-attachment: local,scroll,local,scroll;
}

交互式的图片对比控件 CSS resize方案

.testdiv{
    position: relative;
    display: inline-block;
}
.testdiv>div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    resize: horizontal;
    max-width: 100%;
}
.testdiv>div::before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    padding: 5px;
    background: linear-gradient(-45deg,white 50% ,transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
}
.testdiv img{
    display: block;
    user-select: none;
}

范围输入控件方案

function change() {
    var x=document.getElementById("range").value;
    document.getElementById("beImg").style.width=x+"%";
}


#testdiv{
    position: relative;
    display: inline-block;
}
#testdiv>div{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    margin: 0;
    
}

#testdiv img{
    display: block;
    user-select: none;
}
#range{
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 50%;
    margin: 0;
    filter: contrast(.5);
    mix-blend-mode: luminosity;
    transform: scale(2);
    transform-origin: left bottom;
}

服务器托管 idc机房托管第六章第六章linux磁盘操作第六章数据库及应用教案 css引入css

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

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

css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
【Hello CSS】第六章-文档流与排版

摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。作者：陈大鱼头 github： KRISACHAN 正常流什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...

nihao 2019-08-02 15:35 评论0 收藏0
【Hello CSS】第六章-文档流与排版

摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。作者：陈大鱼头 github： KRISACHAN 正常流什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...

null1145 2019-08-30 11:27 评论0 收藏0
Linux_《Linux命令行与shell脚本编程大全》第六章学习总结

摘要：环境变量定义了用于进行命令和程序查找的目录。全局环境变量可以在对其作出定义的父进程所创建的子进程中使用。本章学习命令个人总结如下显示全局变量显示全局变量显示局部变量全局变量及用户自定义变量导出为全局环境变量删除环境变量时间：2017年07月31日星期一说明：本文部分内容均摘取自书籍《Linux命令行与shell脚本编程大全》，版权归原作者所有。《Linux命令行与shell脚本编程...

Kerr1Gan 2019-06-21 14:22 评论0 收藏1
css揭秘笔记——用户体验

摘要：使用透明边框增大热区面积，但和并不能阻止背景扩大到边框下面模拟原有边框自定义复选框思路使用与复选框绑定的的伪元素模拟一个勾选框，可以自定义其样式，将原来的复选框隐藏。这种方式被称为复选框。选用合适的鼠标光标 css3提供了一大批内建光标(cursor)其中某些光标很突出，因为只需要花费极少的代码，就可以迅速地提升大量网页应用的可用性。比如禁用（not-allowed），比如，公共触摸...

huaixiaoz 2019-08-29 13:49 评论0 收藏0