2010-02-14

CSSをやりすぎた

a:hoverの際、背景色を変更するようにしているが、丸角を使ってみたくなった。

まてよ、せっかくだから、文字サイズを大きくしてみるのも、面白そうだ。

その結果、こうなった。このブログのリンクにマウスカーソルを当てると、面白いことになる。これは、人によって好みがあると思う。続けるかどうかは未定。border-radiusはともかく、マウスカーソルの当たっている要素の背景色やフォントサイズを変えるのは、別に目新しい機能ではない。そういうサイトが少ないというのは、あまり好まれないのだろうか。わたしは、マウスカーソルを当てているリンクの背景色が変わってくれた方が、分かりやすくていいのだが。

ちなみに、一番上のナビバーは、インラインフレームで実装されているため、変わらない。

5 comments:

  1. 例えば右のwindowsをクリックしようとすると逃げるので,このままでは問題でしょう.
    リンクされた文字列の中心を維持したまま,その場で拡大し,周囲の文字列の上に重なるようにするべきだと思います.
    まあ,マウスカーソルの下にあるオブジェクトを拡大するのはUI設計上のありがちな失敗なのでおすすめしませんが.

    ReplyDelete
  2. 文字が大きくなって配置がずれると結構使いづらいかと思われます。

    ReplyDelete
  3. とりあえず、フォントサイズの変更と、paddingを取りやめ。

    ReplyDelete
  4. outlineってのがありますよ。
    Mozillaなら-moz-outline-radiusで角丸もできます。
    ただ、WebKitはoutlineのradiusには対応してないみたいです。

    ReplyDelete
  5. outline-radiusは、W3Cの規格に見あたらないので、使いたくありません。

    ReplyDelete

You can use some HTML elements, such as <b>, <i>, <a>, also, some characters need to be entity referenced such as <, > and & Your comment may need to be confirmed by blog author. Your comment will be published under GFDL 1.3 or later license with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.