2013/02/05

見出しスタイルコピペ用

切り取り線

/* 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);

}

投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)