CSS3で3Dなリボン表示を実現する方法

よく色々なサイトで3Dなリボンが表示されているサイトがありますが、それを実現する方法を紹介しているPV.M Garageというサイトを発見したのでご紹介。

最終的なhtmlとcssは以下のようになるそうです。

CSS3
is really
powerful

by PV.M Garage



3D CSS Ribbon



I Have Used Only CSS, friends!

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 with IE!


Go to the tutorial!

.menu {
	position: relative;
	top:3px;
	left: 50px;
	z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
	-webkit-transform: rotate(-45deg); /* rotate the list item */
	-moz-transform: rotate(-45deg); /* rotate the list item */
	width: 50px;
	overflow: hidden;
	margin: 10px 0px;
	padding: 5px 5px 5px 18px;
	float: left;
	background: #7f9db9;
	text-align: right;
}

.menu ul li a {
	color: #fff;
	text-decoration: none;
	display:block;
}

.menu ul li.l1 {
	background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
	background: rgb(131,178,51);
}

.menu ul li.l2 {
	background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
	background: rgb(196,89,30);
}

.menu ul li.l3 {
	background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
	background: rgb(65,117,160);
}

.menu span {
	margin: 15px 80px 0px 0px;
	float:right;
}

詳しいチュートリアルはぜひサイトを見てみてください。

ちょっとエッセンスが効いたデザインになりますね。