文字に影をつけるスタイルシート

Twitter愛のリレー小説
「セルヴーズの雨傘」

新しいスタイルシートのCSS3を使うと画像を使わないでも簡単に文字に影がつけられます。

ただし、このCSS3は全てのブラウザで対応しているわけではありません。
Internet Explorer 9では上の文字に影がついて見えますが、Internet Explorer 8では
影がついていません。

これはバージョンの問題です。ただし、Windows XPではInternet Explorerは8までしか

インストールできません。

Window7を買わせたいマイクロソフトの意地悪ではなく、ハードウェアに関わる技術的な問題が
原因のようです。

もし、あなたがWindows7をお使いなら、Internet Explorer9が入っています。
でもあなたが自分のブログをお持ちの場合「私はInternet Explorer9だから大丈夫」という考えは間違いです。

あなたには影がついて見えていても、あなたのブログの読者には影がついて見えないかもしれない。いや、影がついて見えない読者も確実にいる。

このことを念頭においてデザインしないと失敗します。

今回の記事はそういう制約があることを承知した上でお読みください。

文字に影をつけるには text-shadow プロパティを使います。

といった指定方法です。
左や上にずらしたい場合はマイナス値を指定します。ゼロを指定することも出来ます。

実際のソースコードは次のようになっています。

HTML

<p id="sample">Twitter愛のリレー小説<br/>
<span>「セルヴーズの雨傘」</span></p>

スタイルシート

p#sample{
	text-align:center;
	font-weight:bold;
	color:#0af;
}

p#sample span{
	color:#08f;
	font-size:150%;
	/* 右へのズレ3ピクセル、下へのズレ3ピクセル */
	/* ボケ具合2ピクセル、色は緑                */
	text-shadow:3px 3px 2px #00ff00;
	font-family:sans-serif,monospace;
}

結果

Twitter愛のリレー小説
「セルヴーズの雨傘」

「自作小説！ブログトーナメント」3回戦、クリック投票受付中

また、text-shadowプロパティは、同じ文字に複数指定できます。その場合は、値と値を,（カンマ）で区切ります。

p#sample_shadow a{
	color:#f00;
	/* 1つ目のデータと2つ目のデータは,で区切る */
	text-shadow:0 0 1px #ffff00,0 0 10px #ff8800;
}
p#sample_shadow a:hover{
	color:#f0f;
	text-decoration:none;
	text-shadow:3px -3px 5px #ffff00;
}

【DMMソーラー】実質8万円でソーラーパネルを設置！

文字の近くを黄色く、遠くを赤くして、太陽の光をイメージしてみました。
ご自由にクリックしてください。（広告です）