HTMLの肝であるハイパーリンク。文章中にある場合はアンダーラインを入れたり、色を変えたりして目立たせるようにしていると思います。ハイパーリンクにカーソルを近づけると色を変えたりと方法はいろいろ。このウェブログでもハイパーリンクにアンダーラインを入れてマウスが近づけば色を変えるようにしてます。これに、-webkit-transition でタイミングを取ってゆっくり(0.5秒)と色が変わるようにしてみました。簡単にできるので試してみてください。ただ、WebKit レンダリングエンジンを利用するウェブブラウザしか動作しないのであしからず。それ以外のウェブブラウザでは、今まで通りに動作するので問題はないでしょう。
a:link, a:visited { -webkit-transition: color 0.25s ease-in-out; }
a:hover セレクタを設定しているのであればプロパティを追加すればいいし、利用してなければ文字色を指定してこのままを書き入れましょう。
試しに、このウェブログのエントリー一覧でエントリータイトルやその他のハイパーリンクにマウスを近づけて動作を確認してみてください。
追記(2009-06-18): ばびさんからアドバイスをいただき、マウスイン/アウトで動作するように書き換えました。
2 Comments
これさ、マウスカーソルが離れた時もゆっくり色が戻るようにはできないのかしら？
そうするとリンクが並んだとこをマウスカーソルでさーっとなぞると、遅れてその軌跡のようにリンクの色が一旦変化して元に戻る様が気持ち良さそうなんだけど。
実用性はおいといて、だけどw
そうですね。よいアイデアをありがとう。
効果がin/outで1秒と長くなるのはウザくないかと思ってたんだけど、試してみるとそうでもなかったです。なので、そのまま実装してみました。ちょっとした変化なので気づくかなぁ…。
a:link, a:visited { -webkit-transition: color 0.25s ease-in-out; }こんな感じで設定しました。