All Articles Web
Viel Spaß mit CSS3 Transitions
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.

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



Comments (0)

You must be logged in to comment. Login Now

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: