• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > css揭秘笔记——用户体验

    css揭秘笔记——用户体验

    作者: 分类:前端开发 点击: 760 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      选用合适的鼠标光标

      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”。

      <input type="checkbox" id="awesome" disabled="true" checked="true">
      <label for="awesome">Awesome</label>
      
      #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(#ddd, #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);      
      }

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

      或者,可以把遮罩交给要凸显的元素的伪元素来实现,伪元素设置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不能捕获指针事件,而且也不能阻止鼠标和其他组件交互,只能在视觉上引导注意力。

      方案四:
      使用<dialog>元素及其::backdrop伪元素

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

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

      通过模糊来弱化背景

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

      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,会随内容滚动,当滑到最顶端时,上面的遮罩层遮住阴影层,滑到最底端时,下面的遮罩层遮住阴影层;在中间时,两个阴影层不会被遮住。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006198258.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    您的电子邮箱地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据