当前位置:主页 > 网页教程 > 网页制作 > Html教程 > 内容欢迎大家投稿

Html5+Css3将带给我们什么

时间:2011-02-01 12:58来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

 

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

 
Html5+Css3将带给我们什么?
 
1.语义化结构
先看一段来自我们139社区的页面代码:

<div class="rightcl_part toggle_box" id="help_guide_3">
    <div class="stretch ac_toggler">我的勋章<span title="点击收起"></span></div>
    <div class="medal clearfix toggle_body">勋章内容</div>
    <div class="paddingleft toggle_body">查看更多</div>
</div>

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

<
section>
    <header>我的勋章<span title="点击收起"></span></header>
    <article>勋章内容</article>
    <footer >查看更多</footer>
</section>

当然在Html5时代想完全和“class”、“id”说拜拜是不可能的,当页面需要同时出现多个“section”、“header”等时,一种方法是分别定义不同的“class”或“id”,另一方法就是借助更强大的css选择器了,这里列举几个“选择器”样例:

body nav+section {}                     定位最外层的 section 元素
section>section {}                       定位下一个 section 元素
section section article {}            定位 article 元素
 
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技术不成熟的情况下开发出GMailGoogle Maps等新型应用,赢得了用户的认可,说明机会和风险是并存的。在又一次新技术浪潮来临的时候,你能占据先机吗?”大家共勉。


附上几个Html5+Css3的精彩应用:
飘动的3D旗帜:http://gyu.que.jp/jscloth/
连连看游戏:http://icefox.net/anigma/

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
  • html语言剖析十六 调色原理

    html 的颜色表示可分两种: 以命名方式定义常用的颜色,如 red 。 以 rgb 值表示,如 ...

  • HTML参考

    基本标签 html/html 创建一个HTML文档 head/head 设置文档标题以及其他不在WEB网页上...

  • HTML文档中小meta标签的大作用

    meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</...

  • HTML中的表格元素

    一,table标签。table标签是表格的标识符,用来界定表格的范围。table标签是成对使用...

赞助商链接
赞助商链接