CSS3で”リボン”の作り方を２つ紹介！

CSS3でリボンを作る方法の紹介です。

とても可愛らしいので、是非使って頂きたいw

まずはこちら

CSS3でボックスにリボンをかける方法

でも、IEで見るとのっぺりした感じで見えてしまうので。。。

IE以外のブラウザでデモを見て頂きたいです。

Ribbons Only Using CSS3〔3Dリボン〕

上記のサイトへいくと、デモとサンプルをダウンロード出来ます。

細かく説明がなされていて、かなり参考になります。

こんな感じに出来上がります。

.demo {
    position:relative;
    margin:80px auto 0px auto; padding:0;
    text-align:center;
    width:700px;
}
.bubble {
    clear:both;
    margin:0 auto; padding:0;
    text-align:left;
    width:650px;
    background:#fff;
    position:relative;
    z-index:90; 
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-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);
}
/* リボン */
.rectangle {
    position:relative;
    left:-15px; top:30px;
    width:680px; height:50px;
    margin:0; padding:0;
    background:#7f9db9;
    float:left;
    z-index:100; 
    -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);
}
.rectangle div {
    margin:0; padding:0;
    font-size:30px;
    color:#fff;
    padding-top:6px;
    text-shadow:1px 1px 2px rgba(0,0,0,0.2);
    text-align:center;
}
/* 左右のリボン下 */
.triangle-l {
    border-color:transparent #7d90a3 transparent transparent;
    border-style:solid;
    border-width:15px;
    width:0; height:0;
    position:relative;
    left:-30px;
    top:65px;
    z-index:-1; 
}
.triangle-r {
    border-color:transparent transparent transparent #7d90a3;
    border-style:solid;
    border-width:15px;
    width:0; height:0;
    position:relative;
    left:650px;
    top:35px;
    z-index:-1; 
}
/* ボックス内 */
.info-meta {
    margin:25px 0 0 0; padding:10px 25px 35px 25px;
}
.info-meta p {
    padding-top:10px;
    font-size:14px;
    line-height:1.5;
}
.info-meta p a {
    color:#c4591e;
    text-decoration:none;
}
.info-meta p a:hover {
    text-decoration:underline;
}
/* メニュー */
.menu {
    position:relative;
    top:-11px; left:80px;
    z-index:80; 
}
.menu ul li {
    -webkit-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg); 
    width:140px;
    overflow:hidden;
    margin:0 0 0 -85px;
    padding:5px 5px 5px 5px;
    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); }

次も、これまた可愛いです。

CSS3 Folded Ribbon

こちらもサイトへいくと、デモとサンプルをダウンロード出来ます。

1つ1つ丁寧に解説がされております。

どちらも「border-radius」＋「box-shadow」プロパティ、
「transform: rotate」プロパティを使用して作られています。

画像を使用しなくてもホントいろんなことが出来るようになったものですねw