\ えぬすぴブログ

 #757  <<お知らせ>>

カーソルを乗せた時に文字をずらします

リンクの上にカーソルを乗せたとき、その文字(画像)がずれて表示されるようにしました。

どのようになるかと言うと、‘ここに書かれている文字’ のようにずれる感じです。 1ピクセルなので見た目にはとても分かりづらいと思います(汗)。

動きに慣れないという方もきっといらっしゃると思いますが、ボク自身はより分かりやすくなった…と言うか、おもしろい感じなので試してみることにしました(笑)。

スタイルシートに追加するのは次のようになります。

a:hover {
  position: relative;
  top: 1px;
  left: 1px;
}

a:hover がリンクの上にカーソルを乗せた時のスタイルです。

position: relative が相対位置を表わしています。 そして、top: 1px で上から1ピクセル、left: 1px で左から1ピクセルずれますので、合わせると右下の斜め方向に1ピクセルずれることになります。

position: fixed にするとページをスクロールさせても同じ位置にずっと表示されるのがおもしろいです。

文字色・背景色

以前からですが、リンクの上にカーソルを乗せたときに分かりやすくなるように、文字色と背景色が変わるようにもしています。

color: #330background: #FF9 という風にしてありますので、文字色はちょっとだけ薄くした黒 (#333300)、背景色は黄色 (#FFFF99)になっています。

▼ 同じカテゴリーの記事

コメント

コメントの投稿

※ 「名前」と「本文」以外は省略できます。

  • ※ 必須
  • ※ 必須
  •  → 確認ページ (メールアドレスの記入があっても公開されません)
10 ← 2017年11月 → 12
---1234
567891011
12131415161718
19202122232425
2627282930--



 Google サイト内検索

▼タグ(抜粋)