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

新しいスタイルシート、CSS3を使って文字にオシャレな影を簡単につける方法。

スポンサーリンク


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

左の文字は、現在「自作小説!ブログトーナメント」3回戦を対戦中の当ブログエントリー作品、Twitter愛のリレー小説「セルヴーズの雨傘」のタイトル文字です。

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

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

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

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

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

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

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

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

では、古いInternet ExplorerにCSS3を適用させる方法はないのか?
あります。ただし、ほとんどのブログでは出来ません。

適用させるには.htcファイルというものをインクルードすればよいので簡単なのですが、
ひとつ重要な条件があります。

それは.htcファイルとサイトのページは同じドメインで同じサーバーになければならないというものです。

つまり、「ロリポップ!」や「さくらインターネット」にサーバーを借りてWordPressなどでブログをはじめる以外はあきらめるしかありません。

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

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

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万円でソーラーパネルを設置!

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


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください