Symbole mit CSS recyceln und animieren
In nicht allzu ferner Vergangenheit lernten wir revolutionäre Techniken, um HTTP Request und KBs durch die Verwendung von Image Sprites zu speichern. Diese Sprites bestanden aus Zehnen oder sogar Hunderten von Symbolen, die in einer Bilddatei angeordnet waren, die später auf einer Vielzahl von Arten auf einer Website gespleißt und bedient wurde.
Wir haben die Technik gut genutzt, und praktisch jeder Standort, der mit Skalierbarkeit zu tun hat, nutzt sie.
Dank der neuen Transformations- und Transition-Eigenschaften von CSS3 können wir noch einen Schritt weiter gehen und mit ein paar kurzen Codezeilen die Basis-Icon-Vorlagen in neue Icons für zukünftige Anwendungen verwandeln - und sogar Animationen in den Mix für einen zusätzlichen Bonus schmeißen !
Die Technik ist so einfach und intuitiv wie Bild-Sprites und ermöglicht die schnelle Bereitstellung neuer Symbole, ohne dass die Bild-Sprites geändert werden müssen.
Symbole mit CSS recyceln
Sehen Sie sich dieses Sprite aus der jQuery UI-Bibliothek an. Beim Durchblättern werden Sie feststellen, dass viele der hier aufgelisteten Symbole Variationen der Basisvorlagen darstellen. Ein einzelnes Symbol kann auf ein Dutzend verschiedene Arten dargestellt und in derselben Datei platziert werden. Viele Symbole sind buchstäblich nur Versionen ihrer Eltern gedreht. Die gute Nachricht ist, dass wir bei der Verwendung von CSS die exakt gleiche Technik verwenden können, ohne die Variationen im Bildsprite zu berücksichtigen.
Aus dem obigen Beispiel können wir ein einzelnes Symbol nehmen und es für unsere eigenen Zwecke neu erstellen, sagen wir einen einfachen Chevron aus der zweiten Reihe nach unten. Mit der Transform-Eigenschaft können wir diesen Chevron 45 Grad, 90 Grad, 180 Grad natürlich und unbegrenzt rotieren, um viele verschiedene Formen aus demselben Template zu erstellen.
Basisvorlage (Pfeil nach oben):
Der folgende Code wird den Chevron nach oben vom Bildsprite ziehen und als Basisvorlage dienen.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Erstellen Sie den richtigen Befehl
Wenn Sie unseren Pfeil 90 Grad umwandeln, zeigt der Pfeil nach rechts, wie unten gezeigt:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Erstellen Sie den Pfeil oben rechts
Drehe es nur um 45 Grad und du bekommst einen netten kleinen Pfeil von oben nach rechts:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
So einfach ist das. Mit dieser Methode können wir mit einem einfachen Sprite mit zwei Symbolen beginnen und mit wenig Aufwand sechs Mal so viele Symbole für die Verwendung in unserer Benutzeroberfläche erstellen, was natürlich nur der Anfang dessen ist, was getan werden kann.
Ein paar Transformationen, eine ausgefallene Positionierung und unsere Icon-Familie ist ein ganzes Stück gewachsen!
Hinzufügen von Animationen zum Mix
Für ein Killer-Erlebnis können wir Animationen in den Mix einfügen. Wir werden die Symbole nicht nur transformieren, sondern sie auch übergehen, um die Umwandlung für den Benutzer sichtbar zu machen. Werfen wir einen Blick auf ein anderes Beispiel, beginnend mit dem Pluszeichen oben.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Eine einfache Drehung um 45 Grad verwandelt unser Plus-Symbol in ein praktisches Close-Symbol.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Jetzt, wo unsere Transformation korrekt funktioniert, können wir einen Übergang in den Mix hinzufügen. Stellen Sie sich vor, Sie verfügen über eine Funktion auf Ihrer Website, um die aktuelle Seite über verschiedene soziale Netzwerke zu teilen. Durch Klicken auf das Plus- Symbol wird die Liste der Freigabeoptionen geöffnet, und während die Liste geöffnet wird, wechselt das Pluszeichen durch eine subtile Animation in ein geschlossenes Symbol. Die beste Implementierung, die ich dafür gefunden habe, ist in FontBooks iPad App. Überprüfen Sie ihre Implementierung:
Es ist hervorragend. Schauen wir uns an, wie man diese Schönheit zum Leben erweckt. Beginnen Sie mit dem oben erstellten Plus-Symbol. Um es zu animieren, fügen Sie einfach die Übergangseigenschaft in Ihr Symbol ein. In unserem Übergang spezifizieren wir die Eigenschaft (transform), die Dauer (0.2s) und schließlich welche Zeitfunktion wir benutzen wollen (linear).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Auch das ist so einfach. Wir können nicht nur neue Icons für unsere Bibliothek mit nur CSS erstellen, wir können ein bestimmtes Element animieren und beleben!
Opazität für mehr Vielfalt verwenden
Das letzte Stück Symbolrecycling wird in Form der Opazitätseigenschaft wiedergegeben. Die Duplizierung Ihrer Kernsymbole für Schwarz-Weiß ermöglicht es Ihnen, eine unbegrenzte Anzahl von Schattierungen / Varianten zu generieren, die Sie überall auf Ihrer Website oder in Ihrer Anwendung verwenden können.
Eine Vier-Bild-Variante (siehe unten) des Sprites oben könnte leicht verwendet werden, um ein Dutzend Mal so viele Symbole zu erstellen, und durch Erhöhen oder Verringern der Opazität können Sie sie wo immer nötig platzieren und immer noch gut aussehen lassen.
Es ist Zeit, grün zu werden: Recycling mit CSS
Als CSS3 hat Zugkraft gewonnen, meine Kopie von Photoshop CS5 hat begonnen, Staub zu sammeln, und das aus gutem Grund! Mit dieser Technik zum Recyceln von Symbolen können Sie kontinuierlich neue Versionen und Varianten für Ihre Oberflächen bereitstellen, ohne Quelldateien öffnen und den ständig wachsenden Sprites beschwerliche Symbole hinzufügen zu müssen.
Die Wartungszeit sinkt und die Zeit, in der Sie Bücher wie die 4-Stunden-Woche lesen, steigt! Es ist alles Gold.
Natürlich ist der offensichtlichste Nachteil all dies die Browser-Unterstützung, aber mit dem kürzlichen Vorstoß von, nun ja, jedem , der moderne Browser benutzt, werden wir in der Lage sein, neue und aufregende fortschrittliche Techniken zu nutzen. Fühlen sich frei Durchsuchen Sie einige Beispiele von dieser Technik.
Mit welchen anderen Mitteln können Sie die Assets Ihrer Website recyceln?