Obwohl die von CSS3 implementierten Änderungen immer noch nicht von allen Browsern unterstützt werden und die Browserübergreifende Funktionalität für diejenigen, die dies unterstützen, sehr schmerzhaft sein kann, ist es trotzdem ein Spaß, zu experimentieren und zu sehen, was möglich ist.
In diesem kurzen Tutorial machen wir uns mit CSS3-Übergängen in Webkit auf den Weg, um eine einfache Webseite zu erstellen, die einige wirklich schöne Farbüberblendeffekte zeigt.
Endeffekt
Damit Sie ein Gefühl dafür bekommen, wohin wir gehen, ist hier eine Demo des Endeffekts.
Wie Sie sehen, verwenden wir Webkit-CSS3-Übergänge, um die Hintergrundfarbe, Textfarbe, Linkfarbe und Hover-Linkfarbe zu ändern, um einer ansonsten einfachen Webseite Leben zu verleihen. Wenn Sie Ihre Maus in das Rechteck bewegen, ändern sich der Hintergrund, die Textfarbe und die Linkfarbe. Wenn Sie den Mauszeiger über einen Link bewegen, wird ein weiterer Farbübergang für den Linktext ausgelöst.
In diesem Fall müssen wir uns an das Webkit halten, da Firefox-Übergänge noch bevorstehen (siehe -moz-transition in Firefox 3.7).
CSS3-Übergänge
Bevor wir beginnen, werfen wir einen Blick auf die grundlegende Syntax der CSS3-Übergänge, die wir verwenden werden. Grundsätzlich funktionieren Webkit-Übergänge durch Angabe von drei Elementen: der zu übergebenden Eigenschaft, der Dauer des Übergangs und der Timing-Funktion. Hier ist ein Beispiel.
Im obigen Beispiel haben wir uns entschieden, die Farbe über einen Zeitraum von einer Sekunde linear zu ändern. Die Timing-Funktion steuert die Geschwindigkeit der Änderung über die Dauer des Übergangs. Durch die Auswahl von linear wird die Änderungsrate konstant gehalten, während die Wahl der Einstiegsgeschwindigkeit den Übergang während des Fortschritts etwas beschleunigt. Ausführliche Informationen zu den Timing-Funktionsoptionen finden Sie im Webkit.org-Artikel zu CSS-Animation.
Im obigen Beispiel wurde nur eine einzige Eigenschaft für den Übergang ausgewählt. Es ist jedoch auch möglich, mehrere Eigenschaften in einem einzigen Befehl zu ändern. Folgendes berücksichtigen:
In diesem Beispiel werden sowohl die Textfarbe als auch die Hintergrundfarbe (durch Kommas getrennt) für einen Übergang von einer Sekunde ausgewählt. Die Timing-Funktion für die? Farbe? Eigenschaft ist linear, während der? Hintergrund? Diese Eigenschaft wird mit der Easy-In-Funktion belegt.
Weitere Informationen zu diesem Beispiel finden Sie im NetTuts-Artikel zu CSS3-Übergängen.
Erste Schritte: Das HTML
Das erste, was wir tun werden, ist eine einfache leere XHTML-Vorlage (wir hätten genauso gut HTML5 verwenden können, aber ich habe beschlossen, mich auf eine neue Technologie zu konzentrieren).
Nachdem Sie Ihre leere Vorlage gelöscht haben, fügen Sie ein einzelnes Div hinzu, um den Text zu speichern. Geben Sie in diesem Bereich alles ein, was Sie möchten. Fügen Sie einfach Links hinzu, damit Sie die Übergänge voll ausnutzen können.
Das ist es! Wie ich bereits sagte, bauen wir ein extrem einfaches Beispiel, das ist also alles, was Sie für HTML benötigen. Ich gab das Div ein Klasse statt eines Ich würde So können Sie problemlos weitere Bereiche zur Seite hinzufügen, die diese Funktion übernehmen.
Basic CSS
Der HTML-Code hat zu diesem Zeitpunkt nur einen einzigen langweiligen Absatz hervorgebracht, sodass wir uns stark auf CSS verlassen, um die Seite attraktiver zu gestalten.
Zu Beginn fügen wir einige grundlegende Stylings direkt in den Körper ein.
Hier haben wir einige grundlegende Stile für den Hintergrund, den Textcontainer und die Links im Textcontainer festgelegt. Wir haben dem Hintergrund eine wirklich dunkelgraue Farbe verliehen, den Text weiß gemacht und mit dem Better Helvetica-Ausschnitt von Chris Coyier einen schönen dünnen Text erhalten.
Zuletzt haben wir die Links so gestaltet, dass sie hellgrau sind und keine Textverzierung haben. Folgendes sollten Sie an dieser Stelle haben:
Als Nächstes erweitern wir den textContainer-Abschnitt, indem Sie ihm einen dünnen Rahmen zuweisen und ihn an der Mitte der Seite ausrichten. Dieser letzte Teil (zentriert alles auf der Seite) wird erreicht, indem dem div eine Breite zugewiesen und der Rand auf auto gesetzt wird. Stellen Sie sicher, dass Sie den Text in der Mitte ausrichten, damit er nicht an der linken Seite des div hängt.
Dies sollte Ihnen das grundlegende Aussehen geben, das Sie in der Demo gesehen haben.
Die Magie hinzufügen
Nun, da wir unsere Seite im Grunde gestaltet haben, möchten wir ein paar Farbübergänge hinzufügen, um die Dinge lebendiger zu gestalten. Die erste Stelle, die wir in einen Übergang werfen wollen, ist im HaupttextContainer. Wir werden den gleichen Code verwenden, den wir bei der Erläuterung der CSS3-Übergänge oben gesehen haben.
Dies wird einen Übergang für jede Änderung an der? Farbe? oder? Hintergrund? Eigenschaften, die einen Übergang von einer Sekunde und zwei verschiedene Zeitsteuerungsfunktionen verwenden: linear und einfach.
Als Nächstes setzen wir einen Übergang zum Linktext, sodass jede Änderung, die wir an dieser Farbe vornehmen, einen zweiten Übergang auslöst.
Wie oben erwähnt, wird dieser Code an sich nichts tun. Es hält einfach nur ein Auge auf Änderungen an den angegebenen Eigenschaften. Wenn eine Änderung aufgrund anderer CSS-Befehle auftritt, wird sie mit diesen Einstellungen geändert.
Der Katalysator
Beim Einrichten von Übergängen benötigen Sie ein Ereignis, um den Übergang auszulösen. In CSS ist das Hover-Ereignis eines der einfachsten und häufigsten Ereignisse, mit dem gearbeitet werden kann. Obwohl Hover-Ereignisse am häufigsten auf Verknüpfungen angewendet werden (was wir tun werden), wenden wir auch einfach eine auf das div als Ganzes an, sodass beim Übergang der Maus der Übergang ausgelöst wird.
Da wir bereits die Übergangsbefehle eingerichtet haben, sind die Hover-Ereignisse sehr einfach und verwenden nur wenige Codezeilen, um die Farben zu ändern. Zuerst werden wir das div-hover-Event angehen.
Dadurch wird die Textfarbe dunkelgrau und der Hintergrund weiß, wenn der Cursor von jemandem in das div eingegeben wird. Unsere Verbindungsfarben bleiben jedoch im Moment so, wie sie vor dem Schwebeflug waren. Fügen Sie den folgenden Code hinzu, um dies zu ändern.
Dadurch wird festgelegt, dass bei einem Hover-Ereignis im .textContainer alle Links hellblau werden. Zum Schluss möchten wir die Farbe des hellblauen Textes so einstellen, dass er allmählich dunkler wird, wenn Sie darüber fahren.
Beachten Sie, dass es einen großen Unterschied gibt .textContainer: hover a und .textContainer a: hover. Ersteres wirkt sich auf die Linkfarbe aus, wenn Ihre Maus irgendwo in das div eintritt, und letzteres beeinflusst die Linkfarbe, wenn Sie nur die Links bewegen.
Damit ist auch unser CSS fertig. Wenn Sie nun das div mit der Maus eingeben, sollte der Hintergrund allmählich weiß werden, der Text sollte dunkelgrau sein und die Links sollten hellblau werden. Wenn Sie dann über einen Link fahren, sollte dieser allmählich dunkler werden.
Fazit
Ich hoffe, dass dieser Artikel ein paar Ideen für ein paar lustige Dinge mit CSS-Übergängen in Ihrem Kopf ausgelöst hat. Lassen Sie mich in den Kommentaren wissen, was Sie über den Gesamteffekt denken und wie Sie ihn verbessern könnten. Stellen Sie außerdem sicher, dass Sie alle Links zu anderen CSS3-Übergangsbeispielen freigeben.