All Articles Web
CSS3トランジションと一緒に騒ぎましょう
Toby Pitman on Mon, July 25th 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

それは、ブラウザのベンダーが実際にばかりであったことCSS2.1にもかかわらず、かなり速いペースで通過新しいCSS3の機能を推進しているようだ

CSS3で最も近代的なブラウザを終了しているから年離れているにもかかわらず、しばらくそれを実施しています。この簡単なヒントでは病気のあなたに小ぎれいなロールオーバーCSS3トランジションを使用して効果を示す。


ステップ1

私はここにいくつかの非常にシンプルなマークアップを持っている。ちょうどインチいくつかのリンクで順序なしリスト:


IVEは、後方互換性のために純粋に、いくつかのspanタグの内部にリンクタグを置く。私は、その厳密にセマンティックではないが知っているが、これは、( 拳を振る!)IE6で動作する場合、これは理解できないでしょうyoullのがIE6( こぶしを振る!)としてそれをマークアップする必要がある方法ですリンク以外に置くとタグ。 IE7 youllのためのDOCTYPEを宣言することを確認する必要があります:非リンク要素上で動作するようにホバー。哀れな、私は知っている!

IVEは、水平ナビゲーションバーを作成するために簡単なスタイルシートを適用する。


これが結果です:


IVEは、 ディスプレイに適用:インライン;リストタグにIE6( こぶしを振る!)で、いくつかのレイアウト上の問題を防ぐために。


ステップ2

今私のリンクのタグに背景画像を適用しようとIM:


これが結果です:


私はこれは少し奇妙に見えるが、辛抱して知っている。画像は、背景の簡略ルールを使用して配置されている。

背景: ;


ステップ3

今私はスタイルのspanタグをすることができます。


これが結果です。


リンクのタグの背景画像は、今それの上に座っているspanタグの背景色に​​よって隠されていることYoullは予告。 spanタグには、リンクタグに比べて高さが20pxより小さいです。これは重要です!


ステップ4

私のリンクのタグにホバーのルール今病気適用されます。これはときに、リンクにマウスを合わせると、本質的にそれを明らかに、10pxの下方に移動するリンクのタグの背景画像の原因となります。


これが結果です。


この時点では、フォールバックモードでは本質的です。現在のマークアップはすべての既知のブラウザで動作するはずです。私は今から追加するすべてのコードは、CSS3になるとサポートは、ブラウザによって異なります。


ステップ5

今病気のリンクのタグに私のCSS3遷移ルール​​を追加します。


それがどのように機能するかHERESに。

トランジション:

すべて(この要素のすべてのCSSプロパティに適用される)

0.3の(移行のための時間)

線形(トランジションのタイミング曲線)


今すぐリンクのタグのプロパティの変更は(ホバー上)、その新しい値へスムーズに移行します。すなわちバックグラウンドの位置およびテキストの色。

Youllはまた、CSSの推移のためのかなりの数のベンダプレフィックスがあることに気付く。我々は我々は可能な限り多くの人を対象とする必要がありますので、各ブラウザは、現在さまざまな方法でこの効果を実装しています。


の- moz - = Mozilla Firefoxの

の- webkit - =サファリ、クローム

- O - =オペラ


一度これは、それが単純に移行となるファイナライズされる。


ステップ6

最後に、病気のいくつかの簡単な丸みを帯びたコーナーを追加。


これが結果です:


互換性

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


結論

この概念は、ロールオーバー効果の負荷に適用することができます。 youllの下のダウンロードにはアルバムをロールオーバーしたとき、それはあなた素敵なトランジションを持つフォーマットのCD、ビニールを示し、この効果を含むいくつかのより多くの例を見つける。


ここで、特別なCSS3例をダウンロード。

約プレーと一緒に騒ぎましょう



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: