另外,用户还可以增加阴影效果。阴影效果一直是图形化设计工具的重要一部分。现在用户通过使用CSS3可以轻松对文本和对象添加阴影效果,以下CSS定义是阴影效果示例代码之一:
font-family: "Segoe UI", Tahoma, Geneva, Verdana;
font-size: medium;
color: #CC3300;
text-shadow: 0.25em 0.25em 2px #999;
}
现在普通的页面已经不能满足用户需求。添加可视化交互元素是必须的。为了解决这个问题,CSS 3包含了对动画的支持。以下HTML和CSS 3样式允许用户在屏幕上增加一个跳动的文本块:
<head>
<title>Bouncing Box example</title>
<style type="text/css" media="screen">
@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 400px;
}
}
.animation {
-webkit-animation-name: bounce;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
position: relative;
left: 0px; }
</style>
</head>
<body>
<p class="animation">
The text bounces back and forth
</p>
</body>
</html>
动画的控制是通过使用样式表完成的。主要从两方面进行控制,首先是动画的类型;其次是动画的对象。
目前该示例代码仅能运行在最新版Safari浏览器和谷歌Chrome浏览器中。
浏览器对HTML 5的支持情况
目前用户使用的Web浏览器大体可化为两类:一是现代Web浏览器,其中包括Mozilla的火狐、苹果的Safari、谷歌的Chrome和Opera浏览器;二是微软的IE浏览器。
火狐建建立在开源Ghecko浏览器引擎之上。同样,Safari和Chrome使用了开源WebKit浏览器引擎。这两类浏览器都使用了第三方开源项目Cairo来展现诸如CANVAS、CSS和HTML 5等可视化元素。这三个浏览器之所以能够快速采用新标准,与它们背后支持开源项目的公司有直接关系,而且这些公司有小部分工程师可以投身于WebKit等项目。令人惊讶的是,像Opera这样的小公司也能够与谷歌和苹果在支持标准方面相媲美。
另一个阵营的代表是微软。自从上世界90年代以来,微软一直统治着Web世界。尽管其浏览器市场份额不断下滑,但依然有超过65%的网民选择使用IE浏览器。更令人吃惊的是,大约有26%用户依然在使用具有8年历史的IE6。问题是微软最新的浏览器版本IE 8不支持任何HTML 5功能,它不支持CANVAS、VIDEO或CSS 3。不过,微软已经开始改变其对HTML 5的态度,2009年夏天微软加入了对HTML 5标准的讨论,而且在2009年PDC大会上演示了一个支持HTML 5功能早期版IE9。
除了桌面计算机之外,另外一个支持HTML 5的领域是手机设备。在苹果iPhone和谷歌Android的带领下,智能手机市场已经呈现爆炸式增长。这两类手机的Web浏览器都是使用WebKit的分支项目,因此完全支持HTML 5。
很明显,HTML 5依然很长的路需要走。它将被越来越多地应用在手机、平板电脑和上网本中。PC市场可能将继续被IE浏览器所垄断,不过下一版本的IE将支持HTML 5。当然,如果你想提前体验HTML 5功能,你可以使用最新版的火狐、Chrome或Safari。