たまに、リンクにカーソルを乗せた時、ほんのチョット動くのを見たことがありませんか？
実はコレって非常に簡単なテクニックで、CSSに下記の様に記述するだけです。
a:hover {
position:relative;
top:1px;
left:1px;
}
昔、コレみて感動したのを覚えてます(笑
上記の書き方だと全体に適用されちゃうので、ワンポイントとして使うと良いかも知れません。
チョット前のエントリーの、「サイドの背景画像を本文にあわせてページの最後まで表示する（2カラム）」でも何気に使ってたりします。
http://css-happylife.com/template/02/
該当のCSSはコレ↓
h1 a:hover {
position:relative;
top:1px;
left:1px;
}
部分的に適用させる場合は↑みたいな感じで記述すれば、h1のa:hoverにだけ適用されます。
動きを変えたい場合は、topとleftの値を大きくして上げれば良いのですが、あまり数値を大きくすると挙動が激しすぎてビミョーになってしまうので、1pxぐらいが妥当だと思います。
---- こっから続き
因みにマイナスの値も指定出来るので、
h1 a:hover {
position:relative;
top:-1px;
left:-1px;
}
↑のように記述する事で、浮いた感じにもなります。
- 各種SBMに追加
-
