タイトル文字列を CSS でいい感じに目立たせる工夫

タイトル文字列（h1）にバックライト

• ノーマル（何もしてない状態）

• 緑（ネオン）

h1 { text-shadow: 0em 0em 0.7em rgba(0, 255, 0, 0.9); }

• 緑青（ネオン）

h1 { text-shadow: 0em 0em 0.7em rgba(0, 255, 255, 0.9); }

• 黒（暗黒な感じ）

h1 { text-shadow: 0em 0em 0.7em rgba(0, 0, 0, 0.9); }

• 青（いまいち）

h1 { text-shadow: 0em 0em 0.7em rgba(0, 0, 255, 0.9); }

• 赤（いまいち）

h1 { text-shadow: 0em 0em 0.7em rgba(255, 0, 0, 0.9); }

何事もやりすぎないのがコツ

マウスオーバーするとイメージが明るくなる効果

• 透過度を 90% -> マウスオーバー時 100%（不透明）にしているだけ

/* Highlight images when hovering */
img
{
  opacity:0.9;
  -moz-opacity:0.90;
  filter: alpha(opacity=90);
  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  -khtml-opacity: 0.9;
}
img:hover
{
  opacity:1.0;
  -moz-opacity:1.00;
  -khtml-opacity: 1.0;
  filter: alpha(opacity=100);
  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}