CSS3新特性应用之用户体验

一、光标

  • 新增加not-allowed光标,不允许访问
  • 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可。
  • 完整代码:
curosr: url(transparent.gif');
cursor: none;

二、扩大热区

  • 应用在小按钮的情况下,不好被鼠标点击到
  • 代码如下:
.btn{
    position: relative;
    cursor: pointer;
}
.btn:after{
    position: absolute;
    content: '';
    top:-10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

三、自定义复选框

  • 系统自带复选框美化
    • 利用css3提供的:checked伪类选择器实现
    • 宽、高、对齐等设置单位最好用em,让按钮变得更为灵活
    • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type="checkbox"]{
            display: none;    
        }
        input[type="checkbox"] + label::before{
            content: '\a0'; /*不换行空格*/
            display: inline-block;
            background: silver;
            border-radius: .2em;
            margin-right: .2em;
            width: .8em;
            height: .8em; 
            line-height: .65em;
            text-indent: .15em;
        }
        input[type="checkbox"]:checked + label::before{
            content: '\2713';
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="anesome"/>
    <label for="anesome">anesome</label>
</body>
  • 开关按钮的实现
    • 伪类选择器 + 修饰label元素实现
    • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type="checkbox"]{
            display: none;    
        }
        input[type="checkbox"] + label{ 
            display: inline-block;
            padding: .3em .5em;
            background: #ccc;
            border: 1px solid rgba(0, 0, 0, .2);
            background-image: linear-gradient(#ddd,#bbb);
            text-align: center;
            border-radius: .3em;
            box-shadow: 0 1px white inset;
            text-shadow: 0 1px 1px white;
        } 
        input[type="checkbox"]:checked + label{
            box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;
            border-color: rgba(0, 0, 0, .3);
            background: #bbb;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="anesome"/>
    <label for="anesome">anesome</label>
</body>

四、通过阴影来弱化背景

  • 传统方式,增加一个背景元素和一个内容元素实现,背景遮罩挡住所有,内容元素展示一切,简单不做示例。
  • body上增加一个伪元素,与传统方式一样,只是减少背景元素而已
  • 重点介绍box-shadow实现
    • 实现方式让内容元素产生一个巨大的阴影,不偏移也不模糊
    • H5单位介绍(利用单位解决大屏遮罩层显示不全的问题)
      • em:相对父级的font-size,1em=16px;
      • rem:相对根元素的font-size
      • vh和vw:IE10 + 和现代浏览器 1vh = viewport的高的1%,vw相同;
      • vmax和vmin
        • ie10 + 和现代浏览器都支持vmin,ie全部都不支持vmax
        • vmin表示vh和vw中比较小的值
        • vmax表示vh和vw中比较大的值
        • 1vmax表示1vh和1vm之间较大的值
      • ch和ex
      • ie9+和现代浏览器都支持,依据当前font-family的相对单位
        • ch:字符0的宽度
        • ex:小写字符x的高度
    • 当页面有滚动条时,遮罩层的边缘会露出来,除非用position:fixed定位,但又防止页面本身就有滚动条
    • box-shadow不能产生交互事件(独立元素的遮罩层),只能在视觉上带来引导
    • box-shadow只限于没有滚动条 + 只做引导层的场景。
    • 示例代码:
.wrap{
    margin: 0 auto;
    width: 200px;
    height: 100px;
    box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);
}

五、通过模糊来弱化背景

  • 主要利用blur来模糊背景
  • 由于blur应用的元素,相对所有的子元素都会被模糊,所以除高亮元素之外其他元素都包含在一个main元素下面。
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        main{
            transition: .6s;
        }
        main.de-emphasized{
            filter: blur(2px);
        }
        main.de-emphasized + dialog{
            display: block;
        }
    </style>
</head>
<body>
    <main class="de-emphasized" >在图6-16 中可以看到,这已经是一个巨大的进步了。不过,现在这个
模糊效果是突然出现的,看起来不是那么自然,反而给人一种突兀的感觉。
由于CSS 滤镜是可以设置动画的,我们可以让页面背景的模糊过程以过渡
动画的形式来呈现。</main>
<dialog>dialog in html</dialog>
</body>

六、滚动提示

  • 利用radial-gradient做圆形径向渐变
    • radial-gradient(center,shape,size,start-color,...,stop-color);
    • center:是一个坐标值,表示原点位置,默认为50% 50%
    • shape:默认为ellipse(椭圆),可以设置为circle(正圆)
    • size:四个值,closest-side(最近边),farthest-side(最远边),closest-corner(最近角),farthest-corner(最远角)
    • 角度都是离圆心最近与最远的角,四个角度
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            overflow: auto;
            width: 10em;
            height: 8em;
            padding: .3em .5em;
            border: 1px solid silver;

            background: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0, 0, 0, .2),transparent 70%);
            background-repeat: no-repeat;
            background-size: 100% 50px, 100% 15px;
            background-attachment: local, scroll;
        }
        .radi{
            background: -webkit-radial-gradient(40% 37%, closest-corner, red, grey);
            width: 200px;
            height: 100px;
        }
        .radi02{
            margin-top: 10px;
            background: -webkit-radial-gradient(40% 37%, farthest-corner, red, grey);
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul class="wrap" >
        <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>
    <div class="radi"></div>
    <div class="radi02"></div>
</body>

七、图片对比控件

  • 利用resize这个css3属性,可以设置none(不可改变)、horizontal(水平)、vertical(垂直)、both(所有)三个值。
  • both时,会在右下角有一个可改提示,其他没有。
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            position: relative;
            display: inline-block;
        }
        .wrap > div{
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 50%;
            resize: horizontal;
            overflow: hidden;  
        }
        .wrap > div::after{
            position: absolute;
            content: '';
            bottom: 0; right: 0;
            width: 12px;
            height: 12px;
            cursor: ew-resize;
            padding: 5px;
            background: linear-gradient(-45deg,white 50%, transparent 0);
            background-clip: content-box;
        }
        .wrap img{
            display: block;
            user-select: none;
        } 
    </style>
</head>
<body>
    <div class="wrap">
        <div>
            <img src="../img/cat-alpha.png" alt="">
        </div>
        <img src="../img/cat.png" alt="">
    </div>  
</body>
  • 利用h5的range标签实现,需要Js的配合,使用其oninput事件监听range组件改变的值。
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            position: relative;
            display: inline-block;
        }
        .wrap > div{
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 50%; 
            overflow: hidden;
        } 
        .wrap img{
            display: block;
            user-select: none;
        } 
        input[type="range"]{
            position: absolute;
            bottom: 10px;   
            width: 100%;
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class ="img">
            <img src="../img/cat-alpha.png" alt="">
        </div>
        <img id="destImg" src="../img/cat.png" alt=""> 
    </div>   
    <script>
        window.onload = function(){ 
            var rang = document.createElement('input');
            rang.type='range';  
            rang.min="0";
            rang.max="100";
            var div = document.getElementsByClassName('img')[0];
            var wrap = document.getElementsByClassName('wrap')[0]; 
            rang.oninput = function(e){ 
                div.style.width = this.value + '%';
            }
            debugger;
            wrap.appendChild(rang);
        };
    </script>
</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

1041
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-列表的排放与遮罩

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1899
来自专栏AndroidTv

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

952
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2566
来自专栏前端知识分享

第93天:CSS3 中边框详解

其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。

1064
来自专栏向治洪

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3...

2946
来自专栏IMWeb前端团队

重构不完全教程集之一

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 “无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《...

2175
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

622
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

955
来自专栏Micro_awake web

重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”! 1.CSS3边框:border-radius;  box-shadow;  border-image borde...

3488

扫码关注云+社区