digital 千里眼 @abp_jp

アナログな日常とデジタルの接点

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