X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

CSS3トランジションと一緒に騒ぎましょう
Google翻訳で翻訳さ

それは、ブラウザのベンダーが実際にばかりであったこと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例をダウンロード。

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



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link