タイトル文字列を 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); }