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 ...
随机推荐
- 超全面的.NET GDI+图形图像编程教程
本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...
- Linux基础介绍【第八篇】
Linux网络基础 网线 568A 568B 线序:橙白橙 绿白蓝 蓝白绿 棕白棕 交换机.路由器 交换机:DLINK.H3C.CISCO 交换机(Switch)是一种用于电信号转发的网络设备.它可以 ...
- 跟着老男孩教育学Python开发【第五篇】：模块
递归的案例:阶乘 1*2*3*4*5*6*7- def func(num): if num == 1: return 1 return num * func(num - ...
- 【转】ofbiz数据库表结构设计
真心不错的文章,可以加深对企业信息化的设计理解:) http://blog.sina.com.cn/s/blog_a2ca5d8c01017fa0.html http://blog.sina.com. ...
- 我们为什么不能只用O记号来谈论算法？
在刷LeetCode-1TwoSum的时候,有个人在论坛留言,大致意思如下: 我的算法击败了90%的人,O(nlgn)算法比O(n)算法快. 我觉得这个人是不懂算法的.让我一步一步解释. # O的含义 ...
- Nginx 服务器 之Nginx与tomcat实现负载均衡
本文讲解我们如何使用Nginx做反向带服务器,实现nginx与tomcat服务器集群做负载均衡. 一.nginx与tomcat实现负载均衡 1.在/usr/local/ngnix/conf 创建 ...
- JS的Object漫想：从现象到“本质”
转自:http://zzy603.iteye.com/blog/973649 写的挺好,用于记录,把对象分成概念的Object(var f={})和 类的Object(function F(){}) ...
- 基本数据结构(2)——算法导论(12)
1. 引言 这一篇博文主要介绍链表(linked list),指针和对象的实现,以及有根树的表示. 2. 链表(linked list) (1) 链表介绍 我们在上一篇中提过,栈与队 ...
- 前端学HTTP之网络基础
× 目录 [1]网络 [2]OSI [3]TCP/IP 前面的话 HTTP协议对于前端工程师是非常重要的.我们在浏览网站时,访问的每一个WEB页面都需要使用HTTP协议实现.如果不了解HTTP协议,就 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（4）-创建项目解决方案
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 设计中术语,概念这种东西过于模糊,我们必须学习累积才能认识这些概念模型. 我无法用文章来下详细解析此系统的深层概念,需要大 ...