CSS HEADLINE DESIGN
※１要素・背景画像不使用。

Style1

/*--default--*/
h2 {
	font-size: 1.4em;
	padding: 0.5em;
	line-height: 1;
	background: #FFFFFF;
	margin: 0 60px 0 0;
}

Style2

h2.s2 {
	border-width: 0px 0px 4px;
	border-style: solid;
}

Style3

h2.s3 {
	border-top: 4px solid #000000;
	border-right: 0px solid #000000;
	border-bottom: 4px solid #000000;
	border-left: 0px solid #000000;
}

Style4

h2.s4 { border: 4px solid #000000; }

Style5

h2.s5 {
	border:solid #000000;
	border-width:1px 1px 1px 8px;
}

Style6

h2.s6 {
	border-width: 0px 0px 0px 8px;
	border-style: solid;
}

Style7

h2.s7  {
	border-width: 1px;
	border-style: dashed;
}

Style8

h2.s8 {
	border-width: 1px 0px;
	border-style: dashed;
}

Style9

h2.s9 {
	border-width: 1px 1px 1px 2px;
	border-style: dashed dashed dashed solid;
}

Style10

h2.s10 {
	border: 6px double;
}

Style11

h2.s11 { border: 6px groove #999; }

Style12

h2.s12 { border: 6px ridge #999; }

Style13

h2.s13 { border: 6px inset #999; }

Style14

h2.s14 { border: 6px outset #999; }

Style15

h2.s15 {
	color: #FFFFFF;
	background: #000000;
}

Style16(css3)

h2.s16 {
	border-width: 1px;
	border-style: solid;
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	box-shadow:2px 2px 5px rgba(0,0,0,0.5);	
}

Style17(for Moz,webkit,and Opera10.50)

h2.s17 {
	border-width: 1px;
	border-style: solid;

	-moz-box-shadow:inset 2px 2px 5px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 2px 2px 5px 0px rgba(0,0,0,0.5);
	box-shadow:inset 2px 2px 5px 0px rgba(0,0,0,0.5);

	text-shadow:2px 2px 5px rgba(0,0,0,0.5);
}

Style18(css3)

h2.s18 {
	border-width: 1px;
	border-style: solid;
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

Style19(css3/※Dangerous code!)

h2.s19 {
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	background: #000;
	text-shadow:0 0 5px #fff,0 0 4px #fff,0 0 3px #fff,0 0 2px #fff;
	border: 2px solid #FFFFFF;
	color: #000;
}

Style20 (for webkit and mozilla)

h2.s20 {
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	box-shadow:2px 2px 5px rgba(0,0,0,0.5);

	-moz-border-radius:24px 32px 24px 32px;
	-webkit-border-top-left-radius:24px;
	-webkit-border-top-right-radius:32px;
	-webkit-border-bottom-right-radius:24px;
	-webkit-border-bottom-left-radius:32px;
	border-radius:24px 32px 24px 32px;

	text-shadow:2px 2px 3px rgba(0,0,100,0.5);
	border: 4px solid #FFF;
	color: #000;
	margin-bottom: 60px;
	margin-top: 50px;
	-moz-transform: matrix(1.05, -0.05, 1, 3, 1pt, 1pt);
	-webkit-transform: matrix(1.05, -0.05, 1, 3, 1, 1);
	transform: matrix(1.05, -0.05, 1, 3, 1, 1);
	background: #e9e6d1;
	background-image: -moz-linear-gradient(left bottom, #fff, #e9e6d1);
	background: -webkit-gradient(linear, left, bottom, from(#fff), to(#e9e6d1));
}

ABOUT CSS3

text-shadowとbox-shadowはIE以外で。グラデーション背景は現行のGeckoブラウザ（Firefox）とWebkitブラウザ（Safari,Chrome）で実装済み。

一つの要素に複数の背景を表示したり、画像の拡大及び拡大方法の指定が出来たり、ボーダーに画像を使用出来るなど、様々な新仕様が実装されつつある。これによりHTMLにDIVやSPANを追加する事無く様々な要素のスタイリングが可能になる。最もCSS3の実装が進んでいるのはWebkit。

記述方法は大きく異なるが、IEでも独自実装のfilterでCSS3の幾つかの視覚表現とほぼ同等の効果が実現できる。

完璧なルックス・文字サイズ可変対応・プレーンテキスト使用となると現在はやはり要素を入れ子にして組まないと難しい気が。ルックスを重視すると画像＋altでの製作が現実的か。IEのCSS3対応が進めば、世界中のhtml文書はよりシンプルなものになっていく筈。正式実装となり接頭辞が消えれば、スタイルシートもシンプルに。不要な画像と冗長的記述の減ったサーバーはすっきり。

ghostpia.com