CSS3 Ribbons

随着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几个属性。

  1. CSS3 RGBA:使用CSS3属性中的RGBA来实现不透明度。详情点击《CSS RGBA
  2. CSS3 box-shadow:使用CSS3属性中的box-shadow来制作盒子阴影效果。详情点击《CSS3 Box-shadow
  3. CSS3 border-radius:使用CSS3属性中的border-radius来制作圆角效果。详情点击《CSS3的圆角Border-radius

另外我们此处使用了CSS3的伪类“:before”和“:after”配合“border”来创建三角形(具体如何通过border来制作三角形,大家可以参考的《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-radiusbox-shadowrgba属性进行修饰,具体效果如下:

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

New Balance M530PSB

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-ribbons

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部