CSS3 の text-shadow で黒背景に光るテキスト

CSS3 では text-shadow という設定ができる。これを使って、黒い背景に青白く光る背景を作ったりできる。

★html 側

<div id="header">headerText</div>

★CSS 側

#header {
  padding: 10px;
/* background */
  background-color: #000000;
/* text */
  font-size: 1.6em;
  color: #ffffff;
  text-shadow: 1px 1px 3px #0066ff, -1px -1px 7px #ffffff;
}

実に簡単にできる。

※Safari 4.0.4、Firefox 3.5.5、Opera 10.0.0 で確認