≫ ≫ ≫

CSS3で”リボン”の作り方を２つ紹介！ こんなに可愛いリボンが作れちゃいます！

Category:CSS Tag:
ribon

CSS3が満載に使われておりますので、かなり制限がかかるかと思いますが、気にしなければ使用用途はかなりあるかなと思います。

3D Ribbons Only Using CSS3

CSS3でボックスにリボンをかける方法 でも、IEで見るとのっぺりした感じで見えてしまうので。。。 IE以外のブラウザで下のデモを見て頂きたいです。

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer 10　up
DEMO
via　：3D Ribbons Only Using CSS3

※　上記サイトでデモとサンプルがダウンロードできます。

詳細は、上記サイトのほうで確認していただけるといいかと思います。 以下のコードはサンプルで作成したときのものです。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="demo">
 
 
    <div class="menu">
        <ul>
            <li class="l1"><a href="#">WordPress</a></li>
            <li class="l2"><a href="#">JavaScript</a></li>
            <li class="l3"><a href="#">Ajax</a></li>
            <li class="l1"><a href="#">HTML5</a></li>
            <li class="l2"><a href="#">jQuery</a></li>
            <li class="l3"><a href="#">CSS</a></li>
            <li class="l1"><a href="#">CSS3</a></li>
        </ul>
    </div>
 
    <div class="bubble">
        <div class="rectangle">
            <div>InfinityScope</div>
        </div>
        <div class="triangle-l"></div>
        <div class="triangle-r"></div>
        <div class="info-meta">
            <p>Webサイト制作に役立つ実用的なテクニックを解説しています。</p>
    <p>主にCSSやjavaScriptなどの紹介が多いです。</p>
        </div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
.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); }

Create a Swish CSS3 Folded Ribbon

via　：Create a Swish CSS3 Folded Ribbon

※　上記サイトでデモとサンプルがダウンロードできます。

サンプルソースを覗いてみると、:after要素と:before要素を使って作られているようです。

XHTML
1
<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.ribbon {
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);
    -moz-box-shadow:  -7px 7px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
    box-shadow:  -7px 7px 0px rgba(0, 0, 0, 0.3);
    
    border-bottom-right-radius: 20px 5px;
}
.ribbon:after {
content: &quot;&quot;;
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:before {
content: &quot;&quot;;
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;
}

CSS3の登場でかなりいろいろな表現が出来るようになったので、リボンももっと沢山でてくるんでしょうね。

ADVERTISEMENT

Author:

Share this

気に入っていただけましたらこちらから各ソーシャルサービスへシェアーをお願いします

あわせてこちらもどうぞ

よく読まれているもの

おすすめ書籍

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

follow FacebookPage

当ブログがお気に召しましたら是非いいね！をお願いします！

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る

©InfinityScope ,  2012-2023  All Rights Reserved.