切り取り線
/* 01.切り取り線 */
#heading01{
position:relative;
padding:5px;
font:bold 24px/1.6 Arial, Helvetica, sans-serif;
text-align:center;
color:#655;
border-top:1px dashed #aaa;
border-bottom:1px dashed #aaa;
background:#eee;
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
}
テープ
/* 02.テープ */
#heading02{
position:relative;
margin:0 -1px;
font:bold 30px/1.6 Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
background:#f0e800;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
-ms-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
30px 0 0 0 #f0e800,
-30px 0 0 0 #f0e800;
}
リボン
/* 03.リボン */
#heading03{
position:relative;
margin:0 -10px;
padding:5px;
font:normal 28px/1.6 "Times New Roman", Times, serif;
text-align:center;
color:#ffe8e8;
background:#f99;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(0, 0, 0, 0.0)),
color-stop(0.08, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(0, 0, 0, 0.0)),
to( rgba(0, 0, 0, 0.0))
);
background-image: -moz-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: -o-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: linear-gradient(to bottom,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
}
#heading03:before{
content:" ";
position:absolute;
top:-5px;
left:0;
width:0;
height:0;
border-width:0 0 5px 10px;
border-style:solid;
border-color:transparent;
border-bottom-color:#c66;
}
#heading03:after{
content:" ";
position:absolute;
top:100%;
right:0;
width:0;
height:0;
border-width:5px 10px 0 0;
border-style:solid;
border-color:transparent;
border-top-color:#c66;
}
吹き出し
/* 04.吹き出し */
#heading04{
position:relative;
margin:0 15px;
padding:10px 20px;
font:bold 24px/1.6 Arial, Helvetica, sans-serif;
color:#333;
border:#333 solid 3px;
border-radius:18px;
background:#fff;
box-shadow:
-7px -5px 0 0 #e8e8e8 inset,
2px 3px 0 0 #000;
}
#heading04:before{
content:" ";
position:absolute;
top:100%;
left:14px;
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent;
border-top-color:#333;
}
#heading04:after{
content:" ";
position:absolute;
bottom:-27px;
left:18px;
width:0;
height:0;
border-width:14px;
border-style:solid;
border-color:transparent;
border-top-color:#e8e8e8;
}
アメリカン風吹き出し
/* 05.アメリカンな(?)吹き出し */
#heading05{
position:relative;
padding:5px 20px;
font:bold 28px/1.6 Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #999;
border-top:#333 solid 3px;
border-bottom:#333 solid 3px;
background-image: -webkit-gradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
background-image: -webkit-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -moz-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -o-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: linear-gradient(to bottom -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-size:4px 4px;
}
#heading05:before{
content:" ";
position:absolute;
top:100%;
left:24px;
width:0;
height:0;
border-width:12px;
border-style:solid;
border-color:transparent;
border-top-color:#333;
}
#heading05:after{
content:" ";
position:absolute;
top:100%;
left:28px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#f0f0f0;
z-index:1;
}
付箋
/* 06.付箋 */
#heading06{
position:relative;
margin:0 22px 0 10px;
padding:14px 15px 0px 20px;
font:normal 24px/1.3 serif;
color:#009;
background:#ffc;
box-shadow:
12px 0 0 0 #ffc,
0 12px 0 0 #ffc,
1px 15px 4px -3px rgba(0,0,0,0.2);
}
#heading06:before{
content:" ";
position:absolute;
top:100%;
left:100%;
width:0;
height:0;
border-width:12px 12px 0 0;
border-style:solid;
border-color:transparent;
border-top-color:#cc9;
}
#heading06:after{
content:" ";
position:absolute;
padding:0 20px;
bottom:0;
left:10px;
width:120px;
height:20px;
background:rgba(255,182,182,0.4);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
メタリカル
#heading07{
position:relative;
margin:0 10px;
padding:10px 10px 10px 30px;
font:bold 22px/1.2 Arial, Helvetica, sans-serif;
color:#666;
background:#ccc;
border-top:#ccc solid 1px;
border-right:#999 solid 1px;
border-bottom:#999 solid 1px;
border-left:#ccc solid 1px;
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow:
0 0 0 1px rgba(255,255,255,0.5) inset;
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(220, 220, 220, 1.0)),
color-stop(0.25, rgba(240, 240, 240, 1.0)),
color-stop(0.30, rgba(235, 235, 235, 1.0)),
color-stop(0.36, rgba(240, 240, 240, 1.0)),
color-stop(0.50, rgba(235, 235, 235, 1.0)),
color-stop(0.80, rgba(215, 215, 215, 1.0)),
to( rgba(210, 210, 210, 1.0))
);
background-image: -webkit-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
background-image: -moz-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
background-image: -o-linear-gradient(top,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
background-image: linear-gradient(to bottom,
rgba(220, 220, 220, 1.0),
rgba(240, 240, 240, 1.0) 25%,
rgba(235, 235, 235, 1.0) 30%,
rgba(240, 240, 240, 1.0) 36%,
rgba(235, 235, 235, 1.0) 50%,
rgba(215, 215, 215, 1.0) 80%,
rgba(210, 210, 210, 1.0)
);
}
#heading07:before{
content:" ";
position:absolute;
top:0;
left:15px;
width:0;
height:100%;
border-left:#ccc solid 1px;
}
#heading07:after{
content:" ";
position:absolute;
top:0;
left:16px;
width:0;
height:100%;
border-right:#eee solid 1px;
}
モザイク
#heading08{
position:relative;
margin:0 10px;
padding:0 10px 0 55px;
font:bold 22px/40px Arial, Helvetica, sans-serif;
color:#666;
background:#f3f3f3;
z-index:1;
}
#heading08:before{
content:" ";
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
border-right:#fff solid 2px;
background:#f60;
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
background-image: -webkit-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -moz-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -o-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: linear-gradient(to bottom,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
z-index:-1;
}
#heading08:after{
content:" ";
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
background-image: -webkit-gradient(linear, left top, right top,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
background-image: -webkit-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -moz-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -o-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: linear-gradient(to right,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
z-index:-1;
}
旗
/* 09.旗 */
#heading09{
position:relative;
margin:0 20px 0 20px;
padding:10px 15px;
font:bold 22px/1.2 Arial, Helvetica, sans-serif;
color:#fff;
background:#c33;
}
#heading09:before{
content:"<";
position:absolute;
top:middle;
left:-10px;
width:0;
height:0;
font-size:25px;
line-height:1.0;
color:#c96;
}
#heading09:after{
content:" ";
position:absolute;
top:-2px;
left:-10px;
width:0;
height:130%;
border:#600 solid 2px;
border-radius:2px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}