CSS text-indent: -9999px; の代替え

画像置き換えテクニックの備忘録

今のところ、よく使われているのが

:: スポンサーリンク ::

理屈は似たような感じですが、パフォーマンスが向上?するらしいテクニック

CSS

HTML(XHTML)

上記のCSSで実際にやってみた例 ↓

※上の画像には実際にはテキストが書いてあります。
※画像のオンマウス変換はCSS Spriteでやっています。

元画像

こちらはパディングを上手に使った方法

CSS

HTML(XHTML)

上記のCSSで実際にやってみた例 ↓

※上の画像には実際にはテキストが書いてあります。
※画像のオンマウス変換はCSS Spriteでやっています。

元画像

結果としてどちらも同じ表示になりますが、
個人的には後者の方が良いような感じがしますが、いかがでしょうか ^^;

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)