浅谈HTML5+CSS3将给设计师们带来什么-CSDN博客

前言

商业世界有一句话谚语：“千万不要抢占泰坦尼克号的头等航”。于是反而推之，在时间有限的情况下对新技术的了解与研究就显得由为重要了，而如今Web世界最炙手可热的“新技术”非Html5+Css3莫属。

Html5+Css3将带给我们什么？

1. 语义化结构

先看一段来自我们139社区的页面代码：
<div class="rightcl_part toggle_box" id="help_gUIde_3">

</div>
繁多的“class”、“id”等标签令页面越来越臃肿，开发者想爆头脑取名，浏览者不易阅读，无从下手。借助Html5更语义化的结构标签，我们可以如下优化：
<section>

</section>
当然在Html5时代想完全和“class”、“id”说拜拜是不可能的，当页面需要同时出现多个“section”、“header”等时，一种方法是分别定义不同的“class”或“id”，另一方法就是借助更强大的css选择器了，这里列举几个“选择器”样例：
body nav+section {} 定位最外层的 section 元素

section>section {} 定位下一个 section 元素

section section article {} 定位 article 元素

更详细选择器攻略，可以参考：http://www.qianduan.net/taming-advanced-css-selectors.html

2. 自由透明度

139说客“皮肤”功能费了WD不少脑油，特别是在处理透明度方面，性能与效果弹性不大，但在Css3时代我们终于可以抛弃长长的透明滤镜，在同一个样式里分别为“背景”、“文字”、“边框”定义不同的透明度了，css样式如下：

.box {

color: rgba(255,255,255,0.9); /*文字透明度*/

background-color: rgba(0,0,0,0.2); /*背景透明度*/

border:3px solid rgba(0,0,0,0.5); /*边框透明度*/

height:100px;

width:100px;

}

但发现奇怪的一点边框的透明度会与背景的透明度相叠加，具体更好的分离透明度方法还在尝试中。

3. 尽情圆角吧

昔日当碰到应对不同宽度的圆角结构，不得不分两段或三段来处理，现在也可以通过一句样式来完成了！圆角样式： border-radius:10px; 可以直接加入上面的样式测试效果：
.box {

color: rgba(255,255,255,0.9); /*文字透明度*/

background-color: rgba(0,0,0,0.2); /*背景透明度*/

border:3px solid rgba(0,0,0,0.5); /*边框透明度*/

border-radius:10px; /*圆角率*/

height:100px;

width:100px;

}

也可分别定义四个角的圆角率，样式如下：
border-top-right-radius:10px; border-bottom-right-radius:10px;

border-bottom-left-radius:10px; border-top-left-radius:10px;

更详细按钮、图片圆角攻略，可以参考：http://wsd.tencent.com/2010/07/css3-combat1-rounded.html
其实Mozilla(Firefox)、Webkit(Safari和Chrome)内核也早已有自己的圆角样式，具体如下表：

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

4.“文字”、“盒子”阴影

摈弃长长滤镜样式的快感，也只有Css3时代才能感受得到，期待早日到来。

文字阴影：text-shadow: 2px 2px 1px rgba(0,0,0,0.5);

盒子阴影：box-shadow: 0 0 10px rgb(0,0,0);

可继续加入上面的样式测试效果：

.box {

color: rgba(255,255,255,0.9); /*文字透明度*/

background-color: rgba(0,0,0,0.2); /*背景透明度*/

border:3px solid rgba(0,0,0,0.5); /*边框透明度*/

border-radius:10px; /*圆角率*/

text-shadow: 2px 2px 1px rgba(0,0,0,0.5); /*文字阴影*/

box-shadow: 0 0 10px rgb(0,0,0); /*盒子阴影*/

height:100px;

width:100px;

}

甚至看到网上有更疯狂的做法，几个阴影同时添加：

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);

其中盒子阴影滤镜对浏览器版本要求比较高，若使用较低版本的FireFox和Chrome可使用原生样式测试效果：

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

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

5. 同一盒子多背景图

添加多个背景图只需在原来的基础上，中间以逗号隔开即可，样式如下：

background-image: url(testBg1.gif) , url(testBg2.gif);

background-repeat: no-repeat;

background-position: bottom left , top right;

各方面的资料继续关注中，享受超明星待遇的“Html5+Css3”炒得热火朝天，但匹配适合Webui设计师的相关资料还比较零散，网上一提到Html5首当其冲都在聊“canvas”，canvas标签主要应用于绘制图形功能， WebUI设计可能使用的机会相对不多，具体canvas资料文档可以参考：http://kb.operachina.com/node/190/

后记
Html5+Css3的普及虽然还有很长的一段路要走，以上关注的几点只是我们做为Web UI设计师，可能会接触较多并影响我们工作的内容，其它功能如“绘制图像”、“视频音频”、“本地存储”等杀手锏更是将未来的Html5推至可以与Flash相对抗的高度。借用CSDN上的一句话： “对比十年前，Google也是在AJAX技术不成熟的情况下开发出GMail和Google Maps等新型应用，赢得了用户的认可，说明机会和风险是并存的。在又一次新技术浪潮来临的时候，你能占据先机吗？”大家共勉。

附上几个Html5+Css3的精彩应用：

画图软件：http://mugtug.com/sketchpad/

本地化便签：http://htmlfive.appspot.com/static/stickies.html

反恐精英：http://www.benjoffe.com/code/demos/canvascape/

LOCOROCO：http://www.blobsallad.se/

飘动的3D旗帜：http://gyu.que.jp/jscloth/

连连看游戏：http://icefox.net/anigma/

打鼓机器：http://www.randomthink.net/labs/html5drums/

某动作游戏：http://www.chromeexperiments.com/detail/another-world-js/

分形图：http://onecm.com/projects/canopy/

打砖块：http://billmill.org/static/canvastutorial/

可以旋转的播放器：http://htmlfive.appspot.com/static/video.html