CSS3 Ribbons
作者：大漠 日期：2011-10-03 点击：921
随着Web技术的日新月异，以前一些3D立体效果仅依靠图片来实现，现在我们可以只使用CSS和HTML来实现。今天我们一起来看仅使用CSS3和一些简单的HTML来制作一种“Ribbon”效果，这种效果思路来源于Piervincenzo Madeo介绍使用纯CSS写的“Ribbon”效果——《How To Create Depth And Nice 3D Ribbons Only Using CSS3》。具体效果大家可以点击：
Piervincenzo Madeo在这里主要使用的是CSS来实现的效果。那么我在其基础上使用CSS3来制作这种效果。
使用CSS3制作3D效果
制作3D效果，我们不用在使用图片，只需要使用CSS3的一些属性就可以实现，所以在介绍如何使用CSS3制作Ribbon效果之前，我们有必要先简单的了解一下需要使用的CSS3几个属性。
- CSS3 RGBA:使用CSS3属性中的RGBA来实现不透明度。详情点击《CSS RGBA》
- CSS3 box-shadow:使用CSS3属性中的box-shadow来制作盒子阴影效果。详情点击《CSS3 Box-shadow》
- CSS3 border-radius:使用CSS3属性中的border-radius来制作圆角效果。详情点击《CSS3的圆角Border-radius》
另外我们此处使用了CSS3的伪类“:before”和“:after”配合“border”来创建三角形(具体如何通过border来制作三角形，大家可以参考Matt的《How to Create DIV Shapes Like Triangles and Circles》和CSS库吧的《CSS三角形的方法》)
.triangle {
border: 15px solid #7d90a3;
border-color: transparent #7d90a3 transparent transparent;
height:0px;
width:0px;
}
了解了上面一些属性的使用方法之后，我们就可以具体的来看如何使用CSS3来制作“Ribbon”效果，首先来看看“Ribbon”图片分析图：
如何创建一个基于CSS3的三维布局
在图解这个制作过程前，我们需要先为这个“Ribbon”创建一个HTML结构
HTML Markup
<div class="bubble"> <div class="rectangle"> <h2>3D CSS3 Ribbon</h2> </div> <div class="info"> <h2>I have Used Only Css,friends!</h2> <p>For this tutorial I have used some new properties of the CSS3. You Can realize a nice 3D effect using only CSS, it's really fantastic. It doesn't work width IE</p> <p><a href="#">Go to the tutorial!</a></p> </div> </div>
我们通过下图来理解上面的HTML结构
下面开始我们一步一步用图片来分解如何制作的过程
1、制作面板“bubble”样式
.bubble {
clear:both;
margin: 0 auto;
width: 350px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
此处我们给“div.bubble”制作成一个宽度为“350px”的面板，并且使用了CSS3中的border-radius、box-shadow、rgba属性进行修饰，具体效果如下：
2、制作“ribbon”的矩形（rectangle）
完成整体面板样式设置后，我们在来美化“ribbon”中的顶部向两边伸展的矩形部分“rectangle”效果。
.rectangle {
background: #7f9db9;
height: 50px;
width: 380px;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
position:relative;
left: -15px;
top: 30px;
}
.rectangle h2 {
font-size: 30px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
效果：
3、制作左边三角效果
现在接下来通过“bubble:after”来实现左边三角的效果。这样我们就可以省去一个html的标签。Piervincenzo Madeo在《How To Create Depth And Nice 3D Ribbons Only Using CSS3》中使用单独的html标签来实现三角效果：
<div class="triangle-l"></div> <!-- Left triangle --> <div class="triangle-r"></div> <!-- Right triangle -->
相比之下我们此处少用了这两个标签，但不足之处是，Piervincenzo Madeo制作的能兼容IE下效果，而我们此处的只适合在现代浏览器运行，下面就看看我是如何使用“bubble:after”制作“ribbon”的左边三角形：
.bubble:after {
content:"";
border: 15px solid #7d90a3;
border-color: transparent #7d90a3 transparent transparent;
height: 0px;
width: 0px;
position: absolute;
left: -30px;
top: 65px;
z-index: -1;
}
效果
4、制作右边三角效果
制作右边的三角和制作左边的三角使用的方法是一样的，只不过此处使用的是“bubble:before”来实现
.bubble:before {
content: "";
border: 15px solid #7d90a3;
border-color: transparent transparent transparent #7d90a3;
height: 0;
width: 0;
position: absolute;
right: -30px;
top: 65px;
z-index: -1;
}
效果：
其实完成这一步后，我们使用CSS3制作“ribbon”的效果就出来了，为了让其更具有视觉效果，需要在添加点代码将其内部在修饰一下：
.info {
padding: 60px 25px 35px 25px;
}
.info h2 {
font-size: 20px;
}
.info p {
padding-top: 10px;
font-size: 14px;
line-height: 22px;
}
.info p a {
color: #c4591e;
text-decoration: none;
}
.info p a:hover {
text-decoration: underline;
}
效果：
所有CSS代码
*{
margin: 0;
padding: 0;
}
body {
background: #f4f4f4;
font: 12px/1.6 Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
color: #999;
padding: 20px 100px;
}
.bubble {
clear:both;
margin: 0 auto;
width: 350px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.rectangle {
background: #7f9db9;
height: 50px;
width: 380px;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
position:relative;
left: -15px;
top: 30px;
}
.rectangle h2 {
font-size: 30px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
/*left*/
.bubble:after {
content:"";
border: 15px solid #7d90a3;
border-color: transparent #7d90a3 transparent transparent;
height: 0px;
width: 0px;
position: absolute;
left: -30px;
top: 65px;
z-index: -1;
}
.bubble:before {
content: "";
border: 15px solid #7d90a3;
border-color: transparent transparent transparent #7d90a3;
height: 0;
width: 0;
position: absolute;
right: -30px;
top: 65px;
z-index: -1;
}
.info {
padding: 60px 25px 35px 25px;
}
.info h2 {
font-size: 20px;
}
.info p {
padding-top: 10px;
font-size: 14px;
line-height: 22px;
}
.info p a {
color: #c4591e;
text-decoration: none;
}
.info p a:hover {
text-decoration: underline;
}
上面就是使用CSS3制作“Ribbon”效果的所有步骤，大家可以点击DEMO查看，看看使用CSS3制作的“Ribbon”和Piervincenzo Madeo在《How To Create Depth And Nice 3D Ribbons Only Using CSS3》使用纯CSS制作的效果有什么不同之处。如图所示：
上图就是最终效果，希望你会喜欢。我觉得这种方案是有用的，可以提高你网站的性能。不过在IE下有很大的问题，因为IE6-8都不支持CSS3的属性，但是，这不是一个障碍，因为我们要着眼于未来。因此，如果你的浏览器还在使用IE的话，请重新考虑安装Mozilla Firefox或者Google Chrome或者Safari或者是Opera，你会看到更佳效果。
大家可以用对比一下各浏览器下的效果：
如需转载烦请注明出处：W3CPLUS
