リボンを作成できるオンラインジェネレーター『3D Ribbon Generator』

様々な3Dリボンを作成することができる3D Ribbon Generatorの紹介です。

  • 幅
  • 文字色
  • 背景色

などのカスタマイズすることができます。そして、生成されるHTMLとCSSは下記のようになっています。

<div class="ribbon-wrapper">
	<div class="ribbon-front">
		<!-- ribbon text goes here -->
	</div>
	<div class="ribbon-edge-topleft"></div>
	<div class="ribbon-edge-topright"></div>
	<div class="ribbon-edge-bottomleft"></div>
	<div class="ribbon-edge-bottomright"></div>
	<div class="ribbon-back-left"></div>
	<div class="ribbon-back-right"></div>
</div>
/* ribbon style */

 .ribbon-wrapper {
	position: relative;
}
  .ribbon-front {
	background-color: #ccf;	height: 40px;
	width: 140px;
	position: relative;
	left:-20px;
	z-index: 2;
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
	-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);
	-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
	left: -20px;
	border-color: transparent #99c transparent transparent;
}

  .ribbon-edge-topleft {
	top: -10px;
	border-width: 10px 20px 0 0;
}
  .ribbon-edge-bottomleft {
	border-width: 0 20px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
	left: 100px;
	border-color: transparent transparent transparent #99c;
}

  .ribbon-edge-topright {
	top: -10px;
	border-width: 10px 0 0 20px;
}
  .ribbon-edge-bottomright {
	border-width: 0 0 0px 20px;
}

  .ribbon-back-left {
	position: absolute;
	top: -10px;
	left: 0px;
	width: 0px;
	height: 40px;
		z-index: 0;
}

  .ribbon-back-right {
	position: absolute;
	top: -10px;
	right: 0px;
	width: 0px;
	height: 40px;
		z-index: 0;
}

サイトのデザインにアクセントをつけることができると思いますので、デザイン案に取り入れてみてはどうでしょうか。

また、おもしろいのは、下記図を見てもらえば分かると思いますが、Netscapeにも対応していると表記されています。配慮っぷりが本気です。