CSS3属性使网站设计增强同时不消弱可用性


Posted in HTML / CSS onAugust 29, 2009

层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新属性没有得到官方的确认,但是一些浏览器已经开始支持来自CSS3得新特性了。

但问题是——许多浏览器支持了,唯独最主要的Internet Explorer浏览器仍不支持!

很多人尤其是中国的前端er们会觉得既然IE不支持,那就先不关心CSS3。其实不应这样的,CSS3现在能为我们带来什么好处呢?至少现在我们就能使用那些CSS3的新特性来进行设计增强。

设计增强是指在不影响网站可用性的基础上,使用一些高级样式来提升网站的视觉效果。

其实对于如何区分设计增强与不影响可用性的区别还是有一定的困难的:

  • 设计增强的例子:使用border-radius属性为盒模型添加圆角,让网站更富有吸引力。不过,即使圆角属性不被浏览器支持,它也不会影响网站的正常使用。
  • 设计消弱可用性的例子:在某个元素上面层叠了一个使用了RGBA颜色值背景的元素,上面的元素使用半透明效果,很显然这两个元素都是必须让用户看到的。很显然,有一部分使用旧浏览器的用户想要看到下面的元素内容是很困难的,这种设计就降低了可用性。

下面三水点靠木将带你一同学习5个不同的CSS3属性,如果从现在起你就开始尝试在你的网站中使用它们,那你将让你的网站实现既设计增强又不会消弱可用性

以下是在应用CSS3设计增强之前的普通效果:
CSS3属性使网站设计增强同时不消弱可用性

1.透明颜色

目前支持的浏览器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+

RGBA允许你控制某个特性填充颜色的不透明度,无论是文本、背景、边框还是背景颜色。

设置颜色透明度的时候,你需要使用RGB颜色值,不可以再使用十六进制值,而那个”A”则代表透明度,你可以设置从0(透明)到1(不透明)之间的数值。

1 rgba(0-255,0-255,0-255,0-1)

你还可以单独使用RGB值:

12345678 .topbox {    color: rgb(235,235,235);    color: rgba(255,255,255,0.75);    background-color: rgb(153,153,153);    background-color: rgba(0,0,0,0.5);    border-color: rgb(235,235,235);    border-color: rgba(255,255,255,0.65);}

有个好消息就是至少你可以使用CSS滤镜单独针对IE浏览器设置背景颜色。
CSS3属性使网站设计增强同时不消弱可用性
点击图片查看清晰大图
注:由于Wordpress不能显示以上代码,所以将其弄成图片,所以你需要自行写以上代码了哦。

CSS3属性使网站设计增强同时不消弱可用性

2.圆角

目前支持的浏览器:Apple Safari 3+, Firefox 1+, Google Chrome 1+

边框半径用于设置和模型每个角的曲率,仿佛有一对与特定的角落虚圆半径(r):

1 border-radius: r;

虽然border-radius是未来CSS3的一部分,不过现在无论Mozilla(Firefox)和Webkit(Safari和Chrome)都已经有了自己的圆角版本。

123 -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;

你也可以单独设置某个角的半径:

CSS3 Mozilla WebKit
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

CSS3属性使网站设计增强同时不消弱可用性

3.文字阴影

目前支持的浏览器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+

为文本添加阴影效果,控制阴影左/右和上/下的偏移,还可以设置阴影的颜色。

1 text-shadow: x y blur color;

你可以结合透明颜色值来设置文字阴影的明暗:

1 text-shadow: -2px 2px 10px rgba(0,0,0,.5);

你还可以让文字有多个阴影,每个阴影属性使用逗号分隔:

12 text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);

CSS3属性使网站设计增强同时不消弱可用性

4.盒阴影

目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:

1 box-shadow: x y blur color;

和文本阴影一样,Mozilla 和 Webkit 也有他们自己的盒阴影规则:

123 -webkit-box-shadow: 0 0 10px rgb(0,0,0);-moz-box-shadow: 0 0 10px rgb(0,0,0);box-shadow: 0 0 10px rgb(0,0,0);

你也可以为某个盒元素添加多个阴影,仍然是使用逗号分隔。

123456 -webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);

CSS3属性使网站设计增强同时不消弱可用性

5.多背景图

目前支持的浏览器:Apple Safari 1.3+, Google Chrome 1+

为某个单一元素添加多个背景图的话仅需要为不同的背景图声明之间添加都好来分隔开。当然,你还要为其它浏览器准备一张完整的图片。

12345 background-image: url(astro-127531.png);background-image: url(astro-127531.png),url(Hubble-112993.png);background-repeat: no-repeat;background-position: bottom left;background-position: bottom left, top right;

CSS3属性使网站设计增强同时不消弱可用性

“买五送一”-旋转任何元素

目前支持的浏览器:Apple Safari 4+, Firefox 3.5+, Google Chrome 1+

虽然它目前不算是CSS3中的一部分,但Webkit已经有了它自己的一套变形属性,Mozilla也在效仿。变形包含了很多不同类型的值,不过其中最有意思也是最有用的就是旋转了。

12 -webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);

CSS3属性使网站设计增强同时不消弱可用性

下图为不支持CSS3的浏览器所呈现出来的样子(如Opera 9):
CSS3属性使网站设计增强同时不消弱可用性

查看实例Demo(需要使用Safari 4+, Firefox 3.5+, or Chrome 1+浏览器)

HTML / CSS 相关文章推荐
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 #HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 #HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 #HTML / CSS
CSS3 圆角效果
Jul 15 #HTML / CSS
CSS3 完美实现圆角效果
Jul 13 #HTML / CSS
You might like
解析php中array_merge与array+array的区别
2013/06/21 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Python ljust rjust center输出
2008/09/06 Python
python的Template使用指南
2014/09/11 Python
python基于ID3思想的决策树
2018/01/03 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
python实现简单成绩录入系统
2019/09/19 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python with语句和过程抽取思想
2019/12/23 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
低碳环保倡议书
2014/04/14 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书