背景画像を利用したリンクの強調表示

スタイルシート 2006年11月23日 14:47

何か忘れたが…検索をしていた時に、こんなTipsが紹介されていた。リンク箇所にカーソルが乗ると、動くアンダーラインで強調表示されるものだ。CSSとアニメーションGIFを組み合わせたもので、簡単だったので早速試してみた。

1. まず表示させるアニメーションGIFを作成。
   
2. スタイルシートに以下を記述して完成

a:hover { background:url(link_line.gif) no-repeat bottom; }

※background：背景全般を指定するプロパティ。
※url：画像へのURL
※no-repeat：繰り返さない
※bottom：下に表示

これでリンク箇所にカーソルを合わせると、オレンジのアンダーラインが左から右へ走ります。

<< 前の記事へ | Home | 次の記事へ >>

｜| コメントする (0) | トラックバック（0） ｜▲TOP