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


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

IT/WEB業界への転職なら求人サイトGreen

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

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;
}

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

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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly