[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実

CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。 Fade Image Into Another (within a Sprite) デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 最初の方法：妥当 二番目の方法：理想 三番目の方法：現実 デモでは、上から順番に実装されています。 最初の方法：妥当 HTML 元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが、spanを使用せずに疑似要素を使用すると対応ブラウザが限られてしまうのが現状です。 <a href="#" class="arrow">Arrow<span></span></a> 矢印画像はテキストを画像に置換して配置します。 .arrow { display:

[fugashi]

ロールオーバー時のフェード効果

[miso30]

CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。

[me_1230]

みぃ姉 の Google リーダー スター付きアイテム --------------------------- [CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実 ---------------------------------- 3 Mar 2011, 11:35 pm CSSスプライトを使用した画像のロールオーバ

[hidehish]

見てる:

[kkeisuke]

css3

[nors]

http://css-tricks.com/fade-image-within-sprite/

[otchy210]

最近の css3 関連の記事では、こうやったら出来るぜ！ってばかりで、こういう現実までちゃんと解説したものが少ないので、良記事だと思う。

[asiamoth]

いつも思うのだけれど、HTML がシンプルでも、CSS に`-webkit-...; -moz-...; -o-...;` と並ぶのは“クリーンなマークアップ”かな。各ブラウザは、足並みをそろえろよ！

[Donca]

✔ [CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実