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

Kostenlose Premium-Zugang

Rufen Sie unsere gesamte Bibliothek von Premium-Hub Artikel, Projekt-Dateien und die ersten 10% des jeweiligen Tutorial-Video aus dem Online-Tutorial-Bibliothek .

Erstellen Sie jetzt Ihren kostenlosen Zugang!

Viel Spaß mit CSS3 Transitions
Übersetzt von Google Translate

Es scheint, dass Browser-Anbieter sind wirklich drängen neue CSS3-Funktionen über zu einem ziemlich schnellen Tempo trotz CSS2.1 erst worden

Auch wenn CSS3 ist noch Jahre davon entfernt fertig meisten modernen Browsern umgesetzt haben es für eine Weile. In diesem schnellen Tipp Ill zeigen Ihnen eine nette kleine Roll-Over-Effekt mit CSS3 Transitions.


Schritt 1

Ich habe einige sehr einfache Formatierungen hier. Nur eine ungeordnete Liste mit einigen Links auf:


Ive setzen den Link-Tags innerhalb einiger span tags rein aus Gründen der Rückwärtskompatibilität. Ich weiß, es ist nicht streng semantische aber wenn Sie dies in IE6 Arbeit (Shakes Faust!) Wollen dies, wie youll um sie zu markieren als IE6 (Shakes Faust!) Nicht verstehen werden: hover auf etwas anderes als Link tags. Für IE7 youll müssen sicherstellen, dass ein Doctype erklären: hover auf nicht-link-Elementen zu arbeiten. Pathetic, ich weiß!

Ive angewendet einige einfache Styling, um eine horizontale Navigationsleiste zu machen.


Dies ist das Ergebnis:


Ive angewendet display: inline;, um die Liste tags einige Layout-Probleme in IE6 (Shakes Faust!) Zu verhindern.


Schritt 2

Jetzt Im gehend, ein Hintergrundbild auf meine Link-Tags gelten:


Dies ist das Ergebnis:


Ich weiß, das sieht ein bisschen komisch, aber Geduld mit mir. Das Bild ist positioniert mit dem Hintergrund Kurzschrift Regel.

Hintergrund: ;


Schritt 3

Jetzt kann ich Stil der span-Tags.


Dies ist das Ergebnis.


Youll feststellen, dass die Link-Tags 'background image ist jetzt durch die Hintergrundfarbe der span-Tag, die oben drauf sitzt versteckt. Der span-Tag ist auch 20px geringere Höhe als die Link-Tag. Das ist wichtig!


Schritt 4

Jetzt Ill gelten die: hover-Regel zu meiner Link-Tag. Dadurch wird der Link-Tags Hintergrundbild auf 10px nach unten zu bewegen, im Wesentlichen enthüllen, wenn Sie die Maus über den Link.


Dies ist das Ergebnis.


An diesem Punkt sind Sie im Wesentlichen in Fallback-Modus. Die aktuelle Markup sollte in jedem bekannten Browser. Jeder Code, den ich von nun an add wird CSS3 und Unterstützung von Browser zu Browser variieren.


Schritt 5

Jetzt Ill add my CSS3 Transition Regel auf die Link-Tags.


Heres, wie es funktioniert.

Übergang:

alle (gelten für alle CSS-Eigenschaften dieses Elements)

.3 S (die Zeit für den Übergang)

linear (den zeitlichen Verlauf des Übergangs)


Jetzt eine Veränderung in den Eigenschaften des Link-Tags (auf hover) wird ein weicher Übergang auf den neuen Wert. Nämlich den Hintergrund Position und die Farbe des Textes.

Youll auch, dass es eine ganze Reihe Anbieter Präfixe für CSS Transitions kündigen. Jeder Browser derzeit implementiert diese Wirkung auf verschiedene Weise, so dass wir so viele, wie können wir Ziele brauchen.


-Moz-= Mozilla Firefox

-Webkit-= Safari, Chrome

-O-= Opera


Sobald dies abgeschlossen ist, wird einfach nur Übergang zu werden.


Schritt 6

Schließlich Ill fügen Sie einige schnelle abgerundeten Ecken.


Dies ist das Ergebnis:


Kompatibilität

  • 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!!


Abschluss

Dieses Konzept kann zu Lasten des Roll-over-Effekte angewendet werden. Im Downloadbereich unten youll finden Sie einige weitere Beispiele einschließlich dieser Effekt, bei dem, wenn man über ein Album roll es zeigt Ihnen, das Format CD, Vinyl mit einem schönen Übergang.


DOWNLOAD SPECIAL CSS3 Beispiele.

Play über und Spaß haben



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