Share
Ich habe mich schon immer gefragt, wie es geht CSS Sprites in eigenen Webprojekten? Heute wird Tom Green (unser residenter Adobe-Experte) die Erstellung von CSS-Sprites in Fireworks durchgehen und sie dann in Dreamweaver einsetzen. Wenn Sie noch keine CSS-Sprites verwendet haben oder einfach nur nach einer einfacheren Implementierung suchen, dann suchen Sie nicht weiter!
Vereinfacht ausgedrückt, ist ein Sprite ein Verfahren, bei dem ein einzelnes Bild zum Speichern mehrerer kleinerer Bilder verwendet wird. Sehen Sie sich beispielsweise das bei Webdesigntuts verwendete Sprite an:
Wenn wir mit der Codierung beginnen, können wir einfach die CSS-Positionierung und das Beschneiden des Bildes verwenden, um das gewünschte Sprite-Stück anzuzeigen.
Warum ein CSS-Sprite verwenden?? Geschwindigkeit! Die Verwendung von Sprites zum Speichern von Bildern verringert die Zeit, die zum Laden einer gesamten Webseite benötigt wird. Wenn Bilder auf mehreren Seiten immer wieder verwendet werden, kann dies viel Zeit sparen.
Sprites eignen sich am besten für kleinere Bilder, die immer wieder verwendet werden. Zum Beispiel können die meisten Assets, die an einem gesamten Standort behandelt werden, auf ein Sprite wie das folgende reduziert werden:
In einem einzigen Sprite haben wir bereits den Großteil unserer Designgrafiken für das Codieren vorbereitet. und es ist alles unter 19 kb! Nicht schlecht, richtig?
Um ein eigenes Sprite zu erstellen, erstellen Sie einfach ein leeres Dokument (beginnen Sie mit einer beliebigen Größe, beschneiden Sie diese schließlich nach unten, sodass jedes Element kaum auf das Sprite passt), und fügen Sie dann die Gestaltungselemente mit einem angemessenen Abstand zwischen den Elementen hinzu Element. Hier einige zusätzliche Tricks:
Okay, jetzt, da die Grundlagen nicht im Weg sind, wird Tom uns zeigen, wie man diese in ein paar schnellen Videos erstellt!
Diese Videos werden in HD aufgenommen. Fühlen Sie sich also frei, den HD-Button zu drücken und ihn an Ihren gesamten Bildschirm anzupassen, damit Sie ihn genau verfolgen können.
Ganz einfach richtig? Das Hinzufügen von CSS-Sprites zu Ihren eigenen Projekten ist schnell und einfach? Das macht es zu einem großartigen Werkzeug, das Sie in Ihre Trickkiste stecken können. Besser ist, dass Sie in Fireworks und Dreamweaver (oder in einer beliebigen Codierungs-App) Sprites "by the numbers" verwenden können, was die Vereinfachung noch weiter vereinfacht. Das wars für heute - fügen Sie unten Fragen, Kommentare oder Tricks hinzu!
Accentsconagua