DevToolPal
DE

CSS-Sprite-Generator

Icons zu einem Sprite-Sheet-PNG zusammenfügen und die CSS-Klassen mit background-position für jedes Bild erhalten.

Läuft lokal, wird nie hochgeladen

Optionen

Quellbilder

Bilder (0)

Füge PNG-, SVG-, GIF- oder JPG-Bilder hinzu. Es wird nichts hochgeladen.

Sprite

CSS

Was dieses Tool macht

Der CSS-Sprite-Generator fügt eine Reihe von Icons oder kleinen Bildern zu einem einzigen Sprite Sheet zusammen und schreibt das CSS, um jedes davon anzuzeigen. Füge PNG-, SVG-, GIF- oder JPG-Dateien hinzu, wähle die Anordnung und lade das Sprite-PNG zusammen mit einem Stylesheet herunter, das eine Klasse pro Bild enthält.

Die Klassennamen stammen aus den Dateinamen: Aus Home Icon.png wird .icon-home-icon, doppelte Namen bekommen eine Nummer. Die Anordnung Gepackt nutzt Bin Packing, um Bilder unterschiedlicher Größe auf dem kleinstmöglichen Sheet zu platzieren; Vertikal, Horizontal und Raster liefern vorhersehbare Positionen.

So funktioniert es

  1. Klicke auf Bilder hinzufügen… und wähle deine Icons aus (oder starte mit dem Beispielset).
  2. Wähle eine Anordnung und einen Abstand. Etwas Abstand verhindert, dass benachbarte Icons ineinanderlaufen, wenn der Browser sie skaliert.
  3. Lege das Klassenpräfix und den Sprite-Dateinamen fest, der in background-image verwendet wird.
  4. Wähle @2x, wenn deine Bilder für Retina-Displays in doppelter Größe gezeichnet sind.
  5. Klicke auf PNG herunterladen und CSS herunterladen (oder Bild kopieren, um das Sprite in ein Design-Tool oder einen Chat einzufügen), lade beide auf deinen Server hoch und verwende die Klassen: <span class="icon icon-home"></span>.

Beispiel

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Tipps

  • Halte Icons, die sich gemeinsam ändern, in einem Sprite; wird das Sheet neu erzeugt, ändern sich alle Positionen.
  • Für einfarbige Icons, deren Farbe sich per CSS ändern soll, sind ein SVG-Icon-Font oder Inline-SVG womöglich besser geeignet.

FAQ

› Was ist ein CSS-Sprite?

Ein Bild, das viele kleine Bilder enthält. Jedes Icon wird angezeigt, indem ein Element das Sprite als Hintergrund bekommt und es per background-position verschoben wird – so braucht eine Seite eine Anfrage statt Dutzender.

› Sind Sprites mit HTTP/2 noch sinnvoll?

Weniger als früher, aber sie helfen weiterhin bei vielen winzigen Icons, E-Mail-Templates, Spielen und Legacy-Projekten und vermeiden das Aufblitzen von Icons, die einzeln nachladen.

› Was bewirkt die Option @2x?

Wenn deine Quellbilder in doppelter Anzeigegröße gezeichnet sind, halbiert das CSS alle Breiten, Höhen und Positionen und ergänzt background-size, damit Icons auf hochauflösenden Displays scharf bleiben.

› Werden meine Bilder hochgeladen?

Nein. Das Sprite wird in deinem Browser mit einem Canvas gezeichnet, und das CSS wird lokal erzeugt.