\ えぬすぴブログ

 #  <<スポンサー広告>>

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 #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)になっています。

▼ 同じカテゴリーの記事

コメント

コメントの投稿

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

  • ※ 必須
  • ※ 必須
  •  → 確認ページ (メールアドレスの記入があっても公開されません)
08 ← 2017年09月 → 10
-----12
3456789
10111213141516
17181920212223
24252627282930



 Google サイト内検索

▼タグ(抜粋)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。