画像を使わず、CSS3で作る見出し。

CSS3プロパティジェネレーター（日本語）で作成。IE向けフィルターもあり。
http://css-eblog.com/eblog_sample/0912/css3-generator/

見出しsample1

見出しsample2

http://css3.mikeplate.com/のジェネレーターで作成

見出しsample3

見出しsampl14

見出しsample5

↓この7点を作成するのに参考にさせていただいたサイト　http://touch-slide.jp/column/304/

見出しsample6

見出しsample7

見出しsample8

見出しsample9

見出しsample10

見出しsample11

見出しsample12

↓のふたつはfirefox、operaは×だった。

見出しsample1

見出しsample2

そのほかのジェネレーター　http://www.html5-memo.com/webtips/css3-generator/
CSS3リファレンス　http://www.htmq.com/css3/index.shtml

Internet Explorerでの見え方

※CSS3-PIEの使い方にはコツがあるのかもしれなくて、
使ってみたけどあまり良い結果にならなかったので（ドロップシャドウが真っ黒になるなど）ここでは使わないことにした。

【1】IE8以下の見え方。IE向けフィルター記述をした上の二つはそこそこの状態

【2】IE9での見え方。

【memo】
例えば
.aaa {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 20px #000;
}



「border-radius」をサポートしているのはoperaのみ。
冒頭にベンダープレフィックス「-webkit-」と付いているのはsafariとchrome、
「-moz-」と付いているのはfirefoxの為の記述。
Opera用は「-o-」を頭に付ける。
IEは、-ms-filter:〜。 IE用記述をつかえば、ある程度は再現可能。
あるいはCSSを別に用意するか、あきらめて別の見栄えを選択する。

IE用CSSを用意したらheadに条件付きコメントを入れる

【まとめ】
一番上にあるジェネレーターで、ある程度作ってしまってから
後でCSSを微調整したほうが楽。