CSS-Sprites - was sie sind und wie man sie verwendet. Erstellen Sie CSS-Sprites. Beispiele Download Sprites png

Gefallen:
27

Abneigungen: 4

Keine Übersetzung verfügbar.

sprite

vor oder nach dem"Vor""nach dem""nach dem"

wütender Vogel wütend.png. index.html

UTF-8 index.html windows-1251 style.css wütender Vogel

http://spritecow.com

wütend.png,

wütender Vogelstyle-Datei style.css imgs /.Es stellte sich so heraus:

Keine Übersetzung verfügbar.

CSS-Sprites sind Grafiken für Ihre Website, die in einer Grafikdatei zusammengefasst sind. "Warum eine Datei?" - du fragst. Tatsache ist, dass dieser Ansatz zum Speichern von Bildern die Leistung von Webseiten verbessern und grafische Bilder organisierter speichern kann. Schauen wir uns einige der Best Practices für die Verwendung von Sprites an. Der Name der Sprites erinnert möglicherweise an Spiel-Sprites, Retro-Spielekonsolen und sogar Browsergames, die heute so beliebt sind:

Also, anwendbar auf Webdesign, sprite ist nur eine große Datei, die mehrere Bilder für Ihre Site enthält. Dies spart Zeit beim Herunterladen und Übertragen der Datei über das Netzwerk. Wenn ein Sprite beispielsweise 20 bis 30 Bilder enthält, kann dies die Belastung des Servers erheblich verringern, da der Server, wenn diese Bilder separat gespeichert würden, 20 bis 30 separate Anforderungen stellen müsste, um jedes dieser Bilder abzurufen. Dank des Sprites wird nur eine HTTP-Anforderung an den Server gesendet - um ein einzelnes Image zu empfangen. Ein Sprite sieht für das Auge möglicherweise optisch nicht ganz "lesbar" aus, da seine Hauptaufgabe darin besteht, nur verschiedene "Teile" Ihres Designs zusammenzubringen. Ein Sprite könnte beispielsweise so aussehen:

Die meisten modernen Websites verwenden Sprites, und die bekannte VKontakte ist keine Ausnahme. Auf diese Weise werden beispielsweise "Teile" der Benutzeroberfläche in einer Datei gespeichert - nämlich die bekannten Symbole:

Der wesentliche Punkt bei der Verwendung von CSS-Sprites besteht darin, dass der Server nur eine Grafikdatei senden muss, die alle Ihre Bilder und nicht viele einzelne Bilder enthält. Über CSS können Sie jedes kleine Segment aus dieser Grafikdatei als Hintergrund für ein Element anzeigen. Einige Leute denken, dass einzelne Bilder schneller geladen werden, aber sie sind es nicht. Durch das Hochladen einer Grafikdatei mit vielen Bildern senden wir nur eine Anfrage an den Server, und beim Hochladen einer großen Anzahl von Bildern senden wir weitere Anfragen an den Server. Durch das Kombinieren von Bildern in einer Datei kann nicht nur die Anzahl der HTTP-Anforderungen erheblich reduziert werden, sondern auchund reduzieren Sie die Gesamtdateigröße des Bildes.

Hier ist ein weiteres Beispiel für ein Sprite. So speichert eine bekannte westliche Website grafische Elemente:

Wann ist der beste Zeitpunkt, um ein Sprite vorzubereiten? Hierfür gibt es zwei verschiedene Ansätze.

Verschiedene Ansätze - Erstellen eines Sprites vor und nach der Website-Erstellung

Beim Erstellen eines Sprite-Blatts gibt es zwei gängige Ansätze: Erstellen Sie esvor oder nach demerstellen Ihrer Website. Sie können alle Bilder in das Sprite-Blatt einfügen, bevor Sie die Site erstellen. Dies nennen wir den Ansatz"Vor"... Darüber hinaus können Sie alle Bilder als separate Dateien erstellen, was die Bearbeitung erleichtert. Sobald die Site erstellt und alle Bilder vorbereitet sind, können Sie schnell und einfach ein Sprite-Blatt erstellen, entweder manuell oder mit einem von mehreren Tools. Dies nennen wir den Ansatz"nach dem"... Wenn Sprite Sheets für Sie neu sind oder Sie noch nicht mit Webdesign vertraut sind, ist der Ansatz für Sie besser geeignet"nach dem"... Es gibt viele Dienstprogramme, Dienste und Programme, mit denen Sie Sprites erstellen können. Die meisten davon werden verteilt und sind kostenlos verfügbar.

Organisierte Anordnung von Bildern in einem Sprite

Wenn Sie ein Sprite in Photoshop erstellen, ist es ratsam, alle Bilder sofort in einer von Ihnen gewählten Reihenfolge und in einer bestimmten Reihenfolge zu platzieren, damit Sie später problemlos mit ihnen arbeiten können. Versuchen Sie, den Abstand für jedes Sprite-Bild immer auf die nächsten 10 Pixel abzurunden, oder lassen Sie mehr Platz um sie herum, wenn alle gleich groß sind. Wenn Sie einen CSS-Stil schreiben, müssen Sie die Koordinatenmessungen nicht aufschreiben, und es ist weniger wahrscheinlich, dass Sie die Koordinaten der Bilder vergessen, die Sie verwenden möchten. Hier ist ein Beispiel für eine gute Platzierung verschiedener Bilder in einem Sprite:

Von der Theorie zur Praxis! So erstellen Sie einen animierten Angry Birds-Vogel mit einem Sprite

Wir haben uns also mit dem Konzept eines Sprites im Webdesign vertraut gemacht, aber Theorie ohne Praxis ist nichts. Daher erstellen wir jetzt mit Ihnen unser erstes Sprite und lernen, wie Sie eine einfache Animation auf einer HTML-Seite erstellen. Unser Beispiel basiert auf einer Figur aus dem Spiel Angry Birds - einem lustigen roten Vogel. Lassen Sie uns zunächst ein PNG-Sprite-Bild vorbereiten, das 4 Phasen der Vogelanimation enthält:

Erstellen Sie irgendwo auf der Festplatte ein Verzeichnis wütender Vogel- Dort werden wir die Dateien unseres Beispiels ablegen. Speichern Sie das Sprite mit Vögeln in diesem Verzeichnis und benennen Sie die Datei wütend.png. Der nächste Schritt besteht darin, eine Datei im selben Verzeichnis mit dem Namen zu erstellen index.html- Dies wird unsere Animationstestseite sein. Als nächstes öffnen wir diese Datei in einem Editor und fügen dort den folgenden Code ein:

Lassen Sie mich ein wenig erklären, was wir jetzt getan haben. Zuerst legen wir die Codierung für unser HTML-Dokument fest UTF-8, was bedeutet, wir müssen unsere behalten index.htmlin dieser Kodierung. Sie können beispielsweise eine andere festlegen windows-1251, - für unsere Aufgabe ist es nicht wichtig. Als Nächstes haben wir die Stildatei mit dem Dokument verbunden style.css (Es ist noch nicht in unserem Katalog wütender Vogel, wir werden es etwas später erstellen). Wir haben auch einen Link zu einem externen Skript hergestellt und die jQuery-Bibliothek verbunden. Mit jQuery werden wir die Bilder unseres Vogels dynamisch ändern und seine "Phasen" vom Sprite aus ändern. Wir haben auch einen internen JavaScript-Block vorbereitet, in dem wir den Code zum Animieren des Vogels platzieren. Schließlich enthält der Hauptteil des Dokuments einen einzelnen Hyperlink, in dem sich ein DIV-Block befindet. Die ID ist als birdImage festgelegt, und die Standardklasse ist Bird-Sleeping. Dies bedeutet, dass unser Vogel beim Öffnen der Seite "schläft" - dies entspricht dem Bild unten links im Sprite - wo seine Augen geschlossen sind. Jetzt ist die Zeit gekommen, unser Sprite zu "schneiden", d.h. Wählen Sie einzelne Bilder aus.

Schneiden eines Sprites mit dem SpriteCow.Com-Dienst

Das "Schneiden" eines Sprites ist ziemlich zeitaufwändig - es erfordert Sorgfalt, um nicht mit den Koordinaten verwechselt zu werden, die jedes Bild im Sprite definieren. Glücklicherweise gibt es heute Dienste, die diese Kopfschmerzen vom Designer und Layoutdesigner vollständig beseitigen. Ich verwende zum Schneiden und empfehle Ihnen den Dienst http://spritecow.com. Die Essenz des Dienstes ist einfach und sehr bequem - wir wählen jedes Vogelbild mit der Maus aus und SpriteCow gibt uns einen vorgefertigten CSS-Code mit Koordinaten. Alles was wir tun müssen, ist nur 4 Stile für jede Vogelphase festzulegen! Nachdem wir die Site betreten haben, sehen wir 2 Schaltflächen - "Open Image" und "Show Example". Wir brauchen den ersten Button, klicken Sie darauf:

Wählen Sie im geöffneten Dialog unsere Sprite-Datei aus wütend.png,danach sehen wir, wie unser Sprite auf die Site hochgeladen wurde. Als nächstes müssen wir die Hintergrundfarbe definieren. Klicken Sie dazu auf die Symbolleiste "Hintergrund auswählen" und zeigen Sie auf den weißen Bereich unseres Sprites. Dadurch können wir jede Phase des Vogels korrekt schneiden:

Wählen Sie das erste Bild aus und erhalten Sie automatisch den CSS-Code dafür:

Jetzt ist es Zeit, in unserem Verzeichnis zu erstellen wütender Vogelstyle-Datei style.css... Dort werden wir 4 generierte Teile des CSS-Codes einfügen, aber anstelle der von SpriteCow angebotenen standard.sprite-Klasse nennen wir unsere Stile klarer. Da das Sprite-Image direkt im Stammverzeichnis des Verzeichnisses gespeichert ist, wird das unnötige Pfadelement aus der Hintergrundeigenschaft entfernt. imgs /.Es stellte sich so heraus:

/ * "normaler" Vogel. Bild oben links in einem Sprite * / .bird-normal (Hintergrund: URL ("wütend.png") keine Wiederholung -12px -16px; Breite: 97px; Höhe: 94px;) / * "Happy" -Vogel. Bild oben rechts in einem Sprite * / .bird-happy (Hintergrund: URL ("wütend.png") keine Wiederholung -118px -17px; Breite: 97px; Höhe: 94px;) / * "Schlafender" Vogel. Bild unten links in Sprite * / .bird-schlafen (Hintergrund: URL ("wütend.png") keine Wiederholung -12px -120px; Breite: 97px; Höhe: 94px;) / * "Angry" Vogel. Bild unten rechts in einem Sprite * / .bird-wütend (Hintergrund: URL ("wütend.png") keine Wiederholung -118px -120px; Breite: 97px; Höhe: 94px;)

Der letzte Schritt besteht darin, den jQuery-Code zu schreiben, um die Animation zu erstellen.

Nachdem wir das Sprite erfolgreich geschnitten und 4 Stile für jedes Bild in unserer Datei platziert haben style.cssWir müssen nur den jQuery-Code schreiben, der eine Animation hinzufügt, wenn wir mit der Maus über unseren Hyperlink fahren und auf den Link klicken. Wie wir uns erinnern, haben wir standardmäßig die Vogelschlafklasse, d.h. Unser roter Vogel "schläft" beim Öffnen eines Dokuments :)

Alle Animationen basieren auf 3 jQuery-Methoden:

• hover ist ein Handler zum Bewegen des Cursors über einen Link und zum "Verlassen" des Cursors vom Link. Wenn wir den Mauszeiger bewegen, "wacht" der Vogel auf - dh. Klasse wird Vogel-normal
• mousedown - Handler zum Klicken mit der linken Maustaste auf einen Link. In diesem Fall wird der Vogel "glücklich" - dh. Dem DIV-Block wird die vogelfreudige Klasse zugewiesen
• mouseup - Handler zum Loslassen der linken Maustaste. Wenn der Vogel freigelassen wird, wird er "wütend" - dh. Dem DIV-Block wird Classbird-Angry zugewiesen

Fügen wir also den folgenden Code an der Stelle ein, die wir im inneren JavaScript-Block auf der Seite vorbereitet haben:

$ (document) .ready (function () (// jQuery-Code hier, um $ ("# birdImage") zu animieren. hover (function () ($ (this) .removeClass ("bird-sleeping"); $ (this) .removeClass ("vogelwütend"); $ (this) .removeClass ("vogelglücklich"); $ (this) .addClass ("vogelnormal");), function () ($ (this) ) .removeClass ("Vogel-normal"); $ (dies) .removeClass ("Vogel-wütend"); $ (dies) .removeClass ("Vogel-glücklich"); $ (dies) .addClass ("Vogel-Schlaf") ");)); $ (" # birdImage "). mousedown (function () ($ (this) .removeClass (" vogelschlafend "); $ (this) .removeClass (" vogelnormal "); $ ( this) .removeClass ("vogelwütend"); $ (this) .addClass ("vogelfreudig");)). mouseup (function () ($ (this) .removeClass ("vogelschlafend"); $ (this) .removeClass ("vogelnormal"); $ (this) .removeClass ("vogelfreudig"); $ (this) .addClass ("vogelwütend");));));

Getan! Animation testen

Das ist es! Unser Vogel ist bereit und hat mit seiner Animation Leben auf die Seite gebracht! :) Sie können die Demo sehen. Laden Sie ein Archiv mit einem Beispiel herunter - am Ende des Artikels.

Sprites sind eine ziemlich interessante und einfache Technologie. Jetzt werde ich Ihnen etwas mehr darüber erzählen.

Was sind CSS-Sprites?

Kurz gesagt, CSS-Sprites sind mehrere Bilder in einer Datei. Es gibt nur eine Datei und mehrere Bilder. Gleichzeitig ist es für den Besucher völlig unsichtbar. Jeder, der die Site betrachtet, glaubt, mehrere separate Bilder zu sehen.

Warum wird das benötigt? Sprites reduzieren die Anzahl der Seitenanforderungen des Benutzers und die Gesamtgröße der Bilder. Dadurch sieht der Besucher die Website schneller.

Wie es gemacht wird? Ein normales Bild nimmt an Breite und Höhe zu, dh mehrere Bilder werden einfach nebeneinander auf einem normalen Bild platziert. Dann wird jedes einzelne Bild aus diesem Satz in den erforderlichen Block mit einer bestimmten Breite oder Höhe eingesetzt, so dass alle anderen Bilder nicht sichtbar sind. Das gesamte Set ist beschnitten und es bleibt nur ein Bild übrig. Ein Sprite. Alle anderen Bilder bleiben außerhalb des jeweiligen Blocks.

Um es klarer zu machen, werde ich eine Analogie geben. Stellen Sie sich vor, Sie schauen durch ein Schlüsselloch. Sie sehen nur ein separates Stück des Raumes auf der anderen Seite der Tür. Wenn Sie sich ein wenig zur Seite bewegen und aus einem anderen Winkel in die Mulde schauen, sehen Sie ein anderes Stück desselben Raums.

Terminologie

Um nicht verwirrt zu werden, definieren wir sofort die Begriffe:
Sprite ist ein Bild aus einer Datei mit mehreren Bildern.
Sprite-Set ist die Datei selbst mit mehreren Bildern.

Funktionen zur Verwendung von Sprites

Wann sollten Sie Sprites verwenden? Im Allgemeinen lautet die Antwort: Sprites sollten verwendet werden, wenn Sie viele kleine Bilder auf Ihrer Seite haben. Es spielt keine Rolle, um welche Art von Bildern es sich handelt. Wenn Sie viele Farbverläufe mit derselben Anordnung, viele Schaltflächen, viele Symbole usw. haben. Wenn sich auf einer bestimmten Seite viele kleine Bilder befinden, können Sie über die Verwendung von Sprites nachdenken.

In der Regel gibt es drei Arten von Bildern auf der Seite - jpg, png und gif. Alle diese Formate verfügen über zwei Download-Modi - regulären und progressiven Download.

Das JPG-Format kann regulär (einfach) und progressiv (progressiv) sein. Im normalen Modus wird das Bild beim Laden zeilenweise und sofort in guter Qualität angezeigt. Im progressiven Modus wird das gesamte JPG-Bild auf einmal geladen, jedoch in schlechter Qualität, und die Qualität nimmt beim Laden zu.

Das GIF und das PNG haben das gleiche Verhalten. GIF kann regulär oder interlaced sein. PNG kann regulär oder interlaced sein. Interlaced-Gifs und PNGs verhalten sich ähnlich wie progressive JPGs. Dieses Verhalten erhöht die Dateigröße geringfügig.

Gesamt. Das Bild wird möglicherweise sofort oder verzögert auf der Seite angezeigt. Dies ist wichtig, um über Sprites Bescheid zu wissen. Es ist wünschenswert, Sprites interlaced oder progressiv zu machen. Der Benutzer sollte die Bilder so schnell wie möglich sehen, wenn auch in schlechter Qualität.

Aber! Wenn die endgültige Datei mit allen Sprites zu groß ist, muss der Besucher trotz aller Progressivität und Interlacing auch auf einen teilweisen Download der Datei warten. Daher empfehle ich nicht, große Sprite-Sets zu verwenden. Wenn die Datei groß ist, geht der gesamte Punkt der Sprites vollständig verloren - um die Site zu beschleunigen. Bei großen Spritesätzen muss der Benutzer genauso lange, wenn nicht sogar länger warten als bei normalen geteilten Bildern.

Dateien über 30 Kilobyte scheinen mir groß zu sein. Das ist subjektiv. Möglicherweise haben Sie einige Ideen zur Größe der Datei. Eine 30-Kilobyte-Datei wird in etwa 7 Sekunden mit einer Internetgeschwindigkeit von 56,6 kbps heruntergeladen.

Beispiele für die Verwendung von Sprites

Sprites mit Symbolen

In einem Sprite habe ich Symbole für:

1. Liste - ein Symbol
2. Links - drei Symbole
3. Suchformulare - Ein Symbol

Das heißt, mein erster Spritesatz enthält fünf Bilder. Alle meine Bilder haben die gleiche Größe - 16 x 16 Pixel. Sie können Bilder mit unterschiedlichen Auflösungen mit Sprites erstellen. Es ist nicht erforderlich, dass die Auflösung aller Bilder gleich ist. Bei unterschiedlichen Bildauflösungen wird es etwas schwieriger, diese Bilder in einer Datei zu kombinieren.

Infolgedessen sieht das erste Beispiel folgendermaßen aus:

Ich habe fünf Symbole gefunden. Dann habe ich sie einfach alle in einer Datei zusammengefasst. Hier ist die Datei, mit der ich gelandet bin:

Aufmerksamkeit gewinnen. In diesem Fall befinden sich die Symbole nicht eng, es befinden sich kleine Einrückungen zwischen ihnen. Wie finden Sie diese Einrückungen? Sie können natürlich alles in Pixel berechnen, aber unser Fall ist recht einfach. Daher ist es hier am besten, diese Ränder im Bild experimentell auszuwählen. Zuerst kombinieren wir die Bilder nur mit dem Auge, dann nehmen wir das oberste Bild und platzieren es an der richtigen Stelle. Wenn das Bild an seinem Platz ist, aber gleichzeitig ein Teil eines anderen Bildes von irgendwo herausragt, muss die Einrückung vergrößert werden.

Noch ein Punkt. Das letzte Symbol für die Liste ist der grüne Pfeil. Warum ist sie die letzte? Die Position der verbleibenden Symbole im Bild ist uns egal, aber jedes Element in der Liste kann mehrere Zeilen einnehmen. Wenn sich der grüne Pfeil irgendwo in der Mitte befindet, ragen andere Bilder in den nächsten Zeilen heraus. Schauen Sie sich das Bild der obigen Liste an, um zu sehen, wovon ich spreche.

So. Ich habe fünf Symbole gefunden und sie zu einer Datei zusammengefasst. Was machen wir als Nächstes? Natürlich schreiben wir den Code:

• Listenpunkt
• Ein weiterer Punkt auf der Liste
• Listenpunkt
• Ein weiterer Punkt auf der Liste,
  aber in zwei Zeilen
• Listenpunkt
• Ein weiterer Punkt auf der Liste

Dies ist der HTML-Code der Liste. Wenden wir nun unser Sprite darauf an:

Ul li (Auffüllen: 0 0 0 21px; Hintergrund: url ("sprites.png") 0 -94px no-repeat;)

Was haben wir hier gemacht? Jeweils einrücken