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>

CSS3新特性应用之用户体验的更多相关文章

[转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
css css3新特性
css css3新特性一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

随机推荐

iOS开源项目周报1222
由OpenDigg 出品的iOS开源项目周报第二期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. io ...
Spark-shell和Spark-Submit的使用
Spark-shell有两种使用方式: 1:直接Spark-shell 会启动一个SparkSubmit进程来模拟Spark运行环境,是一个单机版的. 2:Spark-shell --master S ...
项目游戏开发日记 No.0x000001
14软二杨近星(2014551622) 既然已经决定了开发软件, 时不时就要练练手, 还要时不时的去寻找素材, 因为开发的人物设定就是DotA2里面的祈求者, 所以, 就去找了他的相关人物图片和模型, ...
Mono 3.2.7发布，JIT和GC进一步改进
Mono 3.2.7已经发布,带来了很多新特性,如改进的JIT.新的面向LINQ的解释器以及使用了64位原生指令等等. 这是一次主要特性发布,累积了大约5个月的开发工作.看上去大部分改进都是底层的性能 ...
Linux 安装Mono环境运行ASP.NET（一）
1.先看一下Linux环境下面请求的过程,(画的不是很好,简单的了解一下原理.) .NET跨平台其实需要这三个关键:编译器.CLR和基础类库.在.NET下我们编写一个最简单的"Hello W ...
DoraCMS 源码知识点备注
项目需要研究了下DoraCMS这款开源CMS,真心做的不错:).用的框架是常用的express 4 + mongoose,代码也很规范,值得学习. 源码中一些涉及到的小知识点备注下: https:// ...
任意多边形切割/裁剪（附C#代码实现）
本实现主要参考了发表于2003年<软件学报>的<一个有效的多边形裁剪算法>(刘勇奎,高云,黄有群)这篇论文,所使用的理论与算法大都基于本文,对论文中部分阐述进行了详细解释,并提 ...
在多线程编程中lock（string）{...}隐藏的机关
常见误用场景:在订单支付环节中,为了防止用户不小心多次点击支付按钮而导致的订单重复支付问题,我们用 lock(订单号) 来保证对该订单的操作同时只允许一个线程执行. 这样的想法很好,至少比 lock( ...
ASP.NET Web API 过滤器创建、执行过程(二)
ASP.NET Web API 过滤器创建.执行过程(二) 前言前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...
myeclipse 无法启动 java.lang.IllegalStateException: Unable to acquire application service. Ensure that the org.eclipse.core.runtime bundle is resolved and started (see config.ini).
把myeclipse10 按照目录完整拷贝到了另外一台电脑, 另外的目录原安装目录 D\:\soft\i\myeclipse10 新安装目录 E\:\soft\myeclipse10 双击启动失败, ...

CSS3新特性应用之用户体验

目录

一、光标

二、扩大热区

三、自定义复选框

四、通过阴影来弱化背景

五、通过模糊来弱化背景

六、滚动提示

七、图片对比控件

CSS3新特性应用之用户体验的更多相关文章

随机推荐

热门专题