4.6 案例实战

本节将以案例形式实战练习CSS3新增的文本属性。

4.6.1 设计黑科技网站首页

本案例将模拟一个黑科技网站的首页，借助text-shadow属性设计阴影效果，通过颜色的搭配，营造一种静谧而又神秘的画面，使用两幅PNG图像对页面效果进行装饰和点缀，最后演示效果如图4.37所示。

案例主要代码如下：

定义页面背景色为黑色，前景色为灰色。设计右上偏移的阴影，适当进行模糊处理，产生色晕效果，阴影色为深色，营造静谧的主观效果。设计一个遮罩层，让其覆盖在页面上，使其满窗口显示，通过前期设计好的一个探照灯背景来营造神秘效果。通过<div id="spotlight">外罩，为页面覆盖一层桌纸，添加特殊的艺术效果。

4.6.2 设计消息提示框

本节将借助CSS3增强的文本特性和相关动画功能，设计一个纯CSS的消息提示框，效果如图4.38所示。

【操作步骤】

第1步，设计消息框基本框架样式。

第2步，以内容生成的方式，设计箭头基本样式。

第3步，设计左侧消息提示框的扩展样式。

第4步，模仿第3步，设计右侧消息提示框的扩展样式。

第5步，模仿第3步，设计顶部消息提示框的扩展样式。

第6步，设计底部消息提示框的扩展样式。

第7步，在文档中插入消息提示框，使用类样式进行定义。bubble定义消息框，bubble-left、bubbleright、bubble-bottom和bubble-top定义不同方向显示。代码如下：