纯CSS3制作的“Ribbons”效果

最新推荐文章于 2022-07-11 17:18:19 发布
最新推荐文章于 2022-07-11 17:18:19 发布
阅读量157 收藏 2
点赞数
原文链接：http://www.cnblogs.com/Better-Me/p/4299336.html
版权

在看具体每个demo之前，我们一起来看下面一个截图：

上图是一个典型的“Ribbons”各部位的示意图，但每一个“Ribbons”并不会都使用上图示意的各个部分，在下面的实例中大家可以明显的看 到或者说感受到。别的我就不多说了，我想上图能示意出“Ribbons”各个部位。那么每个部位我们可以使用一个“html”标签，当然有了CSS3的伪 元素“::before”和“::after”后，我们可以省去一些标签。

效果一：

HTML Markup

	<div class="ribbons" id="ribbon-1">Ribbon-1</div>

CSS Code

		#ribbon-1 {
				font: bold 16px/48px Cambria,Georgia,Times,serif; color: #000; text-shadow: 1px 0 0 hsla(20,50%,30%,0.6); width: 300px; padding: 0 0 0 30px; background: hsla(200, 20%, 80%, 0.8); position: relative; } #ribbon-1::after { content: ""; position: absolute; top: 0; left: 100%; width: 0; height: 0; border: 24px solid hsla(200, 20%, 80%, 0.8); border-right-color: transparent; }

DEMO效果

效果二

HTML Markup

		<div class="ribbons" id="ribbon-2">Ribbon-2</div>

CSS Code

		#ribbon-2 {
			font: bold 16px/48px Cambria,Georgia,Times,sans-serif; color:hsla(25,50%,80%,1); text-shadow: 1px 0 0 hsla(20,50%,30%,0.6); width: 300px; position: relative; background: hsla(255,45%,50%,0.8); } #ribbon-2::before { content:""; position: absolute; top:0; right: 100%; width: 0; height: 0; border: 24px solid hsla(255,45%,50%,0.8); border-left-color:transparent; } #ribbon-2::after { content:""; position:absolute; top:0px; left: 100%; width:0; height:0; border:24px solid transparent; border-left-color: hsla(255,45%,50%,0.8); }

DEMO效果：

效果三

HTML Markup

		<div class="ribbons" id="ribbon-3">Ribbon-3</div>

CSS Code

		#ribbon-3 {
			font: bold 16px/48px Cambria,Georgia,Times,serif; color: hsla(100,80%,20%,0.6); text-shadow: 1px 0 0 hsla(20,50%,30%,0.6); width: 300px; padding: 0 0 0 30px; position: relative; background: hsla(200,80%,50%,0.8); } #ribbon-3::before { content:""; position: absolute; top:100%; left:0px; width:0; height: 0; border: 5px solid transparent; border-color: hsla(200,70%,42%,0.8) hsla(200,70%,42%,0.8) transparent transparent; } #ribbon-3::after { content:""; position: absolute; top:0; left: 100%; width:0; height: 0; border: 24px solid hsla(200,80%,50%,0.8); border-right-color: transparent; }

DEMO效果：

效果四

HTML Markup

		<div class="ribbons" id="ribbon-4">Ribbon-4</div>

CSS Code

		#ribbon-4 {
			font: bold 16px Cambria,Georgia,Times,serif; line-height: 48px; width: 315px; padding: 0 30px; position: relative; text-align: center; color: hsla(180,60%,80%,0.8); text-shadow: 1px 0 0 hsla(20,50%,30%,0.6); background: hsla(20,30%,30%,0.8); } #ribbon-4::before { content:""; position: absolute; top: 100%; left:0; width: 0; height: 0; border: 5px solid transparent; border-color: hsla(20,25%,25%,0.85) hsla(20,25%,25%,0.85) transparent transparent; } #ribbon-4::after { content:""; position: absolute; top: 100%; right: 0; width: 0; height: 0; border: 5px solid transparent; border-color: hsla(20,25%,25%,0.85) transparent transparent hsla(20,25%,25%,0.85); }

DEMO效果：

效果五

HTML Markup

		<div id="ribbon-5-wrap">
			<div class="ribbons" id="ribbon-5"> <div>Ribbon-5</div> </div> </div>

CSS Code

		#ribbon-5-wrap {
			position: relative; z-index: 1; } #ribbon-5 { font: bold 16px Cambria,Georgia,Times,serif; line-height: 48px; width: 300px; padding: 0 30px; position: relative; color: hsla(350,80%,30%,0.8); text-shadow: 1px 0 0 hsla(20,50%,30%,0.6); background: hsla(315,40%,60%,1); text-align: center; } #ribbon-5::before { content:""; position:absolute; top:100%; left:0; width:0; height:0; border: 5px solid transparent; border-color: hsla(315,28%,50%,0.95) hsla(315,28%,50%,0.95) transparent transparent; } #ribbon-5::after { content:""; position:absolute; top:100%; right:0; width:0; height:0; border: 5px solid transparent; border-color: hsla(315,28%,50%,0.95) transparent transparent hsla(315,28%,50%,0.95); } #ribbon-5 > div { width: 100%; } #ribbon-5 > div::before, #ribbon-5 > div::after { content:""; position: absolute; width: 0; height:0; border: 24px solid hsla(315,23%,40%,0.95); top:10px; z-index: -1; } #ribbon-5 > div::before { border-left-color: transparent; right: 100%; margin-right: -10px; } #ribbon-5 > div::after { border-right-color: transparent; left: 100%; margin-left: -10px; }

DEMO效果：

效果六

HTML Markup

		<div class="ribbons" id="ribbon-6">Ribbon-6</div>

CSS Code

		#ribbon-6 {
			font: bold 12px Cambria,Georgia,Times,sans-serif; color:hsla(315,28%,50%,0.95); text-align: center; width: 90px; height: 50px; line-height: 50px; padding:15px 0; position: relative; background: hsla(5,58%,20%,0.95); margin-bottom: 120px; } #ribbon-6::after{ content:""; position: absolute; top: 100%; width: 0; height: 0; border: 45px solid hsla(5,58%,20%,0.95); left: 0; border-bottom-color: transparent; }

DEMO效果：

效果七

HTML Markup

		<div class="ribbons" id="ribbon-7">Ribbon-7</div>

CSS Code

		#ribbon-7 {
			font:bold 12px Cambria,Georgia,Times,Serif; color:#fff; width:100px; text-align:center; padding:15px 0px 15px; height:100px; line-height: 40px; background:#3B5998; position:relative; margin:20px auto 100px; } #ribbon-7:before, #ribbon-7:after { content:""; position:absolute; bottom:-20px; left:-10px; width:0px; height:20px; border-width:20px 60px; border-style:solid; border-color:transparent #3B5998; } #ribbon-7:after { bottom:10px; }

DEMO效果：

效果八

HTML Markup

		<div id="ribbon-8-wrap">
			<div class="ribbons" id="ribbon-8"> <div> <div> <div>Ribbon-8</div> </div> </div> </div> </div>

CSS Code

		#ribbon-8-wrap {
			position: relative; z-index: 1; } #ribbon-8 { font:bold 16px Cambria,Georgia,Times,Serif; color:#fff; width:50%; height:48px; text-align:center; padding:0px 30px; background:#AF3605; position:relative; line-height:48px; margin:50px auto; } #ribbon-8:before { content:""; position:absolute; top:100%; left:0px; width:0px; height:0px; border-width:10px; border-style:solid; border-color:#76290A #76290A transparent transparent; } #ribbon-8:after { content:""; position:absolute; top:100%; right:0px; width:0px; height:0px; border-width:10px; border-style:solid; border-color:#76290A transparent transparent #76290A; } #ribbon-8 div { width:100%; height:100%; } #ribbon-8 div:before, #ribbon-8 div:after { content:""; position:absolute; width:40px; height:100%; background:#983912; top:20px; z-index:-1; } #ribbon-8 div:before { border-left-color:transparent; right:100%; margin-right:-20px; } #ribbon-8 div:after { border-right-color:transparent; left:100%; margin-left:-20px; } #ribbon-8 div div:before, #ribbon-8 div div:after { content:""; position:absolute; width:20px; height:0px; background:transparent; border:25px solid #AF3605; top:10px; z-index:3; } #ribbon-8 div div:before { border-left-color:transparent; margin-right:10px; } #ribbon-8 div div:after { border-right-color:transparent; margin-left:10px; } #ribbon-8 div div div:before, #ribbon-8 div div div:after { content:""; position:absolute; width:0px; height:0px; background:transparent; border:5px solid transparent; top:100%; margin-top:10px; z-index:1; } #ribbon-8 div div div:before { border-top-color:#76290A; border-left-color:#76290A; margin-left:20px; } #ribbon-8 div div div:after { border-top-color:#76290A; border-right-color:#76290A; margin-right:20px; }

DEMO效果：

效果九

HTML Markup

		<div class="ribbons left ribbon-holder" id="ribbon-9"> <a href="#" class="ribbon red"><span class="text">Forke me on GitHub</span></a> </div>

CSS Code

		.ribbon-holder {
			position: relative; } .ribbon-holder { position: absolute; top: 0; overflow: hidden; height: 10em; } .left.ribbon-holder { left: 0; } .ribbon-holder .ribbon, .ribbon-holder .ribbon:hover { text-decoration: none; } .ribbon-holder .ribbon{ font-family: Collegiate, sans-serif; letter-spacing: -.1px; opacity: 0.95; padding: 0.25em 0; position: relative; top: 3.2em; box-shadow: 0 0 13px #888; color: #FFF; display: block; line-height: 1.35em; } .ribbon-holder .ribbon .text { padding: 0.1em 3em; } .left .ribbon { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); left: -2.82em; } .red.ribbon { background-color: #9a0000; background-image: linear-gradient(bottom, #9a0000, #a90000); background-image: -o-linear-gradient(bottom, #9a0000, #a90000); background-image: -moz-linear-gradient(bottom, #9a0000, #a90000); background-image: -webkit-linear-gradient(bottom, #9a0000, #a90000); background-image: -ms-linear-gradient(bottom, #9a0000, #a90000); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(#9a0000), color-stop(#a90000) ); } .red.ribbon .text { border: 1px solid #bf6060; }

DEMO效果：

效果十

HTML Markup

		<div class="ribbons right ribbon-holder" id="ribbon-10"> <a href="#" class="ribbon green"><span class="text">Forke me on GitHub</span></a> </div>

CSS Code

		.ribbon-holder {
			position: relative; } .ribbon-holder { position: absolute; top: 0; overflow: hidden; height: 10em; } .right.ribbon-holder { right: 0; } .ribbon-holder .ribbon, .ribbon-holder .ribbon:hover { text-decoration: none; } .ribbon-holder .ribbon{ font-family: Collegiate, sans-serif; letter-spacing: -.1px; opacity: 0.95; padding: 0.25em 0; position: relative; top: 3.2em; box-shadow: 0 0 13px #888; color: #FFF; display: block; line-height: 1.35em; } .ribbon-holder .ribbon .text { padding: 0.1em 3em; } .right .ribbon { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); right: -2.82em; } .green.ribbon { background-color: #006e00; background-image: linear-gradient(bottom, #006e00, #007200); background-image: -o-linear-gradient(bottom, #006e00, #007200); background-image: -moz-linear-gradient(bottom, #006e00, #007200); background-image: -webkit-linear-gradient(bottom, #006e00, #007200); background-image: -ms-linear-gradient(bottom, #006e00, #007200); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(#006e00), color-stop(#007200) ); } .green.ribbon .text { border: 1px solid #6bac6b; }

DEMO效果：

效果十一

HTML Markup

		<div class="ribbons" id="ribbon-11">Ribbon-11</div>

CSS Code

		#ribbon-11 {
			padding: 0 25px; height: 80px; color: #301607; background-color: #c94700; background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100)); background-image: -webkit-linear-gradient(top, #c94700, #b84100); background-image: -moz-linear-gradient(top, #c94700, #b84100); background-image: -ms-linear-gradient(top, #c94700, #b84100); background-image: -o-linear-gradient(top, #c94700, #b84100); background-image: linear-gradient(top, #c94700, #b84100); border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: relative; float: left; clear: left; font-family: 'Montez', cursive; font-size: 32px; line-height: 80px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3); border-radius: 0 0 20px 0 / 0 0 5px 0; margin-top: 60px; } #ribbon-11::after { content: ""; display: block; width: 40px; height: 0px; position: absolute; right: 0; bottom: 4px; z-index: 20; border-bottom: 80px solid #de6625; border-right: 80px solid transparent; -webkit-transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform: rotate(90deg); -moz-transform-origin: right bottom; -o-transform: rotate(90deg); -o-transform-origin: right bottom; -ms-transform: rotate(90deg); -ms-transform-origin: right bottom; transform: rotate(90deg); transform-origin: right bottom; } #ribbon-11::before { content: ""; display: block; width: 20px; height: 0px; position: absolute; right: 0; bottom: 4px; z-index: 10; border-bottom: 80px solid rgba(0, 0, 0, 0.3); border-right: 80px solid transparent; -webkit-transform: rotate(80deg); -webkit-transform-origin: right bottom; -moz-transform: rotate(80deg); -moz-transform-origin: right bottom; -o-transform: rotate(80deg); -o-transform-origin: right bottom; -ms-transform: rotate(80deg); -ms-transform-origin: right bottom; transform: rotate(80deg); transform-origin: right bottom; }

DEMO效果：

效果十二

HTML Markup

		<div id="ribbon-12" class="ribbons">Ribbon-12</div>

CSS Code

		#ribbon-12  {
			background-color: #999999; box-shadow: 0 2px 4px #888888; color: #555555; font-size: 1.5em; font-weight: bold; padding: 6px 20px 6px 71px; position: relative; text-shadow: 0 1px 2px #BBBBBB; width: 50%; clear: both; } #ribbon-12::before, #ribbon-12::after { content: " "; height: 0; position: absolute; width: 0; } #ribbon-12::before { border-color: #999999 #999999 #999999 transparent; border-style: solid; border-width: 20px 10px; left: -30px; top: 12px; width: 30px; } #ribbon-12::after { border-color: #666666 #666666 transparent transparent; border-style: solid; border-width: 5px 10px; left: 0; top: 100%; }

DEMO效果：

效果十三

HTML Markup

		<div class="ribbons" id="ribbon-13"> <h1 class="ribbon-content"><a>A Pure CSS Ribbon</a></h1> </div>

CSS Code

		#ribbon-13 {
		 width: 300px; position: relative; text-align: center; font-size: 20px!important; background: #d64b4b; background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c)); background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); background: -moz-linear-gradient(top, #d64b4b, #ab2c2c); background: -ms-linear-gradient(top, #d64b4b, #ab2c2c); background: -o-linear-gradient(top, #d64b4b, #ab2c2c); background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%); -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; box-shadow: rgba(000,000,000,0.3) 0 1px 1px; font-family: 'Helvetica Neue',Helvetica, sans-serif; margin: 50px auto; } #ribbon-13 h1 { color: #801111; text-shadow: #d65c5c 0 1px 0; margin:0px; padding: 15px 10px; font-size: 1em; } #ribbon-13::before, #ribbon-13::after { content: ''; position: absolute; display: block; bottom: -1em; border: 1.5em solid #c23a3a; z-index: -1; } #ribbon-13::before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; } #ribbon-13::after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; } #ribbon-13 .ribbon-content:before, #ribbon-13 .ribbon-content:after { border-color: #871616 transparent transparent transparent; position: absolute; display: block; border-style: solid; bottom: -1em; content: ''; } #ribbon-13 .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } #ribbon-13 .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } #ribbon-13 a::before{ content:""; display:block; margin-top:2px; border-top: 1px dashed rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: 0; width: 100%; } #ribbon-13 a::after{ margin-bottom:2px; border-top: 1px dashed rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3); content: ""; display:block; width: 100%; bottom: 0; left: 0; position: absolute; }

DEMO效果：

效果十四

HTML Markup

		<div class="ribbons" id="ribbon-14"> <div class="ribbon-wrapper"> <div class="ribbon">NEWS</div> </div> </div>

CSS Code

		#ribbon-14 {
			margin: 50px auto; width: 280px; height: 100px; background: white; border-radius: 10px; box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } #ribbon-14 .ribbon-wrapper{ width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } #ribbon-14 .ribbon{ font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } #ribbon-14 .ribbon::before, #ribbon-14 .ribbon::after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } #ribbon-14 .ribbon::before { left: 0; } #ribbon-14 .ribbon::after { right: 0; }

DEMO效果：

效果十五

HTML Markup

		<div class="ribbons" id="ribbon-15"> <div class="ribbon-wrap"> <div class="content"> <div class="ribbon"><span>NEWS</span></div> <div class="box">box</div> </div> </div> </div>

CSS Code

		#ribbon-15 {
			margin: 50px aut0; position: relative; width: 400px; } #ribbon-15 .ribbon-wrap { position: absolute; tip: 0; left: 0; width: 100%; padding: 5px; overflow: hidden; } #ribbon-15 .content { box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); color: #444444; font: 12px/14px Arial,Helvetica,Sans-serif; margin: 0 auto 30px; position: relative; border: 1px solid #ccc; border-radius: 5px; background: #fff; min-height: 100px; } #ribbon-15 .ribbon { display: inline; } #ribbon-15 .ribbon span { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background: none repeat scroll 0 0 #D93131; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 5px 30px rgba(255, 255, 255, 0.2) inset; color: #FFFFFF; display: inline-block; font-weight: 900; padding: 3px 10px; position: absolute; left: -29px; text-align: center; text-transform: uppercase; top: 16px; width: 90px; } #ribbon-15 .ribbon::before { border-color: transparent transparent #662121; border-style: solid; border-width: 17px; content: ""; height: 0; position: absolute; left: 54px; top: -23px; width: 0; z-index: -1; } #ribbon-15 .ribbon::after { border-color: #662121 transparent transparent; border-style: solid; border-width: 17px; content: ""; height: 0; position: absolute; left: -10px; top: 67px; width: 0; z-index: -1; } #ribbon-15 .box { margin-left: 50px; padding: 20px; }

DEMO效果：

效果十六

HTML Markup

		<div class="ribbons" id="ribbon-16"><a href=""><span>Ribbon-16</span></a></div>

CSS Code

		#ribbon-16::after, 
		#ribbon-16::before { margin-top:0.5em; content: ""; float:left; border:1.5em solid hsla(20,50%,23%,0.3); } #ribbon-16::after { border-right-color:transparent; } #ribbon-16::before { border-left-color:transparent; } #ribbon-16 a:link, #ribbon-16 a:visited { color:#000; text-decoration:none; float:left; height:3.45em; overflow:hidden; } #ribbon-16 span { background:hsla(20,50%,23%,0.3); display:inline-block; line-height:2.9em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } #ribbon-16 a:hover span { background:#FFD204; margin-top:0; } #ribbon-16 span::before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid hsla(20,50%,23%,0.3); } #ribbon-16 span::after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid hsla(20,50%,23%,0.3); }

DEMO效果：

效果十七

HTML Markup

		<div class="ribbons" id="ribbon-17"> <h1>Ribbon-17</h1> </div>

CSS Code

		#ribbon-17 {
			background-color:#999; background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,.1)); background-image:-moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,.1)); background-image:linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,.1)); height:40px; clear:both; color:#fff; font:bold 12px/40px sans-serif; text-align:center; text-shadow:0 1px #666; position:relative; box-shadow: 0 1px 3px rgba(0,0,0,.3),0 0 0 1px #777,0 1px 0 #bbb inset; } #ribbon-17::before, #ribbon-17::after { content:''; border:6px solid transparent; position:absolute; display:block; width:0; height:0; top:100%; } #ribbon-17::before{ left:0; border-top-color:#666; border-left-width:7px; border-right-width:0; } #ribbon-17::after { right:0; border-top-color:#666; border-right-width:7px; border-left-width:0; } #ribbon-17 h1::after, #ribbon-17 h1::before{ content:""; border:19px solid #999; position:absolute; display:block; width:0; height:0; top:7px; z-index:-1; } #ribbon-17 h1::after{ box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, 1px 0 0 #777; border-left-color:transparent; left:-32px; } #ribbon-17 h1::before { box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, -1px 0 0 #777; border-right-color:transparent; right:-32px; }

DEMO效果：

效果十八

HTML Markup

		<div id="ribbon-18" class="ribbons"> <div class="inset"></div> <div class="container"> <div class="base"></div> <div class="left_corner"></div> <div class="right_corner"></div> </div> </div>

CSS Demo

		#ribbon-18 {
			width: 180px; height: 280px; margin: 50px auto 0; position: relative; overflow: hidden; } #ribbon-18 .inset { width: 200px; height: 55px; position: absolute; top: -50px; left: -10px; z-index: 5; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3); } #ribbon-18 .container { position: relative; width: 100px; height: 250px; overflow: hidden; margin: 0 auto; border-left: 1px solid #631a15; border-right: 1px solid #631a15; } #ribbon-18 .base { height: 200px; width: 100px; background: rgb(199,59,60); background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1))); background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%); background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%); background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%); background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 ); position: relative; z-index: 2; } #ribbon-18 .base:after { content: ''; position: absolute; top: 0; width: 86px; left: 6px; height: 242px; border-left: 1px dashed #631a15; border-right: 1px dashed #631a15; } #ribbon-18 .base:before { content: ''; position: absolute; top: 0; width: 86px; left: 7px; height: 242px; border-left: 1px dashed #da5050; border-right: 1px dashed #da5050; } #ribbon-18 .left_corner { width: 100px; height: 100px; background: #b8201f; position: absolute; bottom: 20px; left: -50px; z-index: 1; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #ribbon-18 .right_corner { width: 100px; height: 100px; background: #b8201f; position: absolute; bottom: 20px; right: -50px; z-index: 1; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

效果：

上面总共收集了十八种CSS3制作的Ribbons，我想这些效果较为齐全了，希望对大家日后的工作有所帮助，或者对您的学习有所帮助，希望大家喜欢。如果您想了解更多，可以点击这里查看所有DEMO效果，也可以下载源码到本地慢慢学习。如果您有更好的实例或者想法可以在下面的评论中给我留言，与我们一起分享。

如需转载烦请注明出处：W3CPLUS

转载于:https://www.cnblogs.com/Better-Me/p/4299336.html

denglangcheng82460
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
12-13
本文将向大家推荐7款设计巧妙的CSS3飘带状菜单和窗口，很多都具有3D立体效果，不多说，一起来看看吧。 1、CSS3立体飘带状菜单（上凸） 在线演示 -源码下载 2、CSS3立体飘带状菜单（下凹） 在线演示 -源码下载 3、...
CSS实现标题样式（自用笔记）
DT_XUE321的博客
04-30 4517
纯CSS实现简单标题样式 说明： ribbon为公用样式，ribbon1-6对应6个样式，：border， ：after 是伪元素 import React from 'react'; import './index.css' const Title = () => { return ( <div> <section> <h2><span>CSS3实现一些标题样式<
ribbon菜单风格
技术成就梦想，知识改变命运 !
03-14 1189
http://jacklmoore.com/notes/css3-ribbon-menu/
Ribbon风格菜单栏
mj348940862的博客
07-11 632
Ribbon风格界面介绍
将ribbon主题应用到对话框中去(转载)
小猿一枚的专栏
10-23 2654
原帖地址：这里 找了N久，终于在无幻大神这里找到了将ribbon sdi主题应用到对话框程序中的方法，好像这是一个开源的项目，google code里有。记录下： 1、下载网页里的资源KofPack0.1，vs里打开工程文件KofFeaturePack; 2、菜单生成-批生成-全部选中-确定 3、将文件夹下lib  include文件夹拷贝到自己的工程目录下，注意是在工程文件sln那个层次
实现Ribbon风格的窗体
genispan的专栏
09-11 6833
随着office2007的兴起，微软让我们看到了Ribbon风格的窗体，现在很多软件也都开始使用Ribbon风格。那么我们如果要自己开发，应当怎么做呢？本文就是为大家解开这个疑团的。首先，Delphi本身并没有Ribbon风格的窗口可以直接拿来使用，而市面上很多类似于Ribbon的风格都是用截图法做出来的，那样做很麻烦，而且对于图片的控制要求非常高。这样无疑是增加了软件的成本，这里
CSS3写的Lavalamp Menu
12-18
Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery...现在我使用CSS3写了一个水平的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然后就是选择器的使用了！
Scarlet Ribbons
10-24
Scarlet Ribbons
ACCESS ribbons 资源
08-27
ACCESS ribbons 标签属性，实例等应用实例
Ribbons.scr
06-13
windows屏保文件
github-fork-ribbon-css:仅CSS，与分辨率无关的“在GitHub上派我”功能区
04-13
在GitHub CSS功能区上分叉我 这是CSS的的重新创建，因此与分辨率无关。 与Bower一起使用 您可以使用安装CSS文件。 bower install github-fork-ribbon-css 与npm一起使用 您也可以使用安装CSS文件。 npm install --save github-fork-ribbon-css 通过CDN使用“在GitHub上将我分叉” CSS功能区 您可以不通过进行安装而使用github-fork-ribbon-css。 将以下代码复制到页面的<head>中： < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css " /> 并将其放入页面
8分钟了解Ribbon的使用|gs-client-side-load-balancing.zip
11-24
这个是Demo，配合文章一起服用效果会更好。使用的时候记住重新导入下maven。没有其他说明了...
ribbonjs使用HTML5canvas生成色带JS库
08-11
ribbon.js：使用HTML5 canvas在你的网站上生成色带的JS库，整个包只有1Kb。
ribbon:淋浴HTML演示引擎的功能区主题
05-07
淋浴的彩带主题 演示引擎的默认主题。 不包括引擎本身。 。 关注以获取支持和更新，如果有任何，请。 用法 获取已经包含功能区的Shower模板。 下载或通过创建幻灯片。 它需要安装 npx @shower/cli create 等待安装，然后在向导中选择功能区选项，一切就绪。 特征 文件中演示了所有主题的功能，。 在构建演示文稿时，可将其用作参考。 查看更多详细。 比率 功能区主题支持您想要的任何幻灯片比例。 但针对最常见的像素进行了优化：16×9和4×3。 这是16×9默认，但您可以通过调整改变它--slide-ratio属性.shower ，见例子中index.html 。 PDF格式 您可以通过基于Chromium的浏览器中的内置对话框或CLI工具将幻灯片打印为PDF，将其导出为PDF。 有关更多选项，请参见打印文档。 发展 如果要根据需要调整主题： 分叉此存储库，并将其
css实现Material Design风格的输入框
weixin_45693257的博客
06-09 400
效果图： html： <div id="inpit-box"> <input class="input-control" placeholder="账号"/> <label class="input-label">账号</label> </div> css： .input-control{ outline: none; height: 35px; border: 1px solid #808
css3 彩带扩散效果_6种精美的纯CSS3丝带效果
weixin_42662171的博客
01-13 1325
这是一组非常精美的纯CSS3丝带设计效果。这组丝带效果分别使用:before和:after伪元素来制作各种丝带，适用于要使用丝带效果的各种不同场景。使用方法HTML结构这些丝带效果的HTML结构：使用一个作为容器，在它里面放置一些元素。元素及其伪元素用于制作各种丝带效果。丝带效果1丝带效果2丝带效果3丝带效果4丝带效果5丝带效果6CSS样式div.ribbon是丝带的容器，丝带放置在它的上面。在例...
css实现左上角飘带效果
qq_43576662的博客
07-29 603
css实现左上角飘带效果效果如下： html代码 <div class='wrap'> <div class='ribbon'> <span>测试1</span> </div> </div> css代码 .wrap { /* 最外层的div容器 */ min-width: 200px; min-height: 200px; text-align: center;
Sharepoint 2010 根据用户权限隐藏Ribbon菜单(利用css)
weixin_30776273的博客
09-19 79
前面两篇文章介绍了，如果根据命令项ID隐藏相关命令项。当然你也可以根据用户权限来隐藏某些命令项或者命令项所在的组了。本文介绍的是根据用户权限隐藏整个Ribbon菜单项。 操作环境：Windows Server 2008 r2+ SharePoint 2010 1.关于SharePoint 权限详细请参考：http://msdn.microsoft.com/zh-cn/library/ms4...
CSS缎带效果
weixin_30732487的博客
11-10 173
1. [代码]ribbon.html <!DOCTYPE HTML><html><head><style type="text/css">.ribbon-content { border: 1px solid #DDD; font-weight: bold; margin: 0 -10px; min-height: 3...
SmartPlant 3D c# ribbon
最新发布
07-25
using Intergraph.SmartPlant.Pdms.UI.Ribbons; namespace SmartPlant3DExample { public class CustomRibbon : Ribbon { public CustomRibbon() { // 创建一个Tab页 RibbonTab tab = new RibbonTab("Custom ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值