DevToolPal
NL

CSS sprite generator

Voeg iconen samen tot één sprite sheet-PNG en krijg de CSS-klassen met background-position voor elke afbeelding.

Draait lokaal, wordt nooit geüpload

Opties

Bronafbeeldingen

Afbeeldingen (0)

Voeg PNG-, SVG-, GIF- of JPG-afbeeldingen toe. Er wordt niets geüpload.

Sprite

CSS

Wat deze tool doet

De CSS sprite generator voegt een set iconen of kleine afbeeldingen samen tot één sprite sheet en schrijft de CSS om elk ervan te tonen. Voeg PNG-, SVG-, GIF- of JPG-bestanden toe, kies hoe ze worden geplaatst en download de sprite-PNG samen met een stylesheet met één klasse per afbeelding.

Klassenamen komen uit de bestandsnamen: Home Icon.png wordt .icon-home-icon, en dubbele namen krijgen een nummer. De indeling Compact gebruikt bin packing om afbeeldingen van verschillende formaten op het kleinste vel te plaatsen; Verticaal, Horizontaal en Raster geven voorspelbare posities.

Zo gebruik je het

  1. Klik op Afbeeldingen toevoegen… en selecteer je iconen (of begin met de voorbeeldset).
  2. Kies een Indeling en Padding. Een beetje padding voorkomt dat naburige iconen in elkaar overlopen wanneer de browser ze schaalt.
  3. Stel het Klasse-prefix en de Bestandsnaam sprite in die in background-image wordt gebruikt.
  4. Kies @2x als je afbeeldingen op dubbele grootte getekend zijn voor retinaschermen.
  5. Klik op PNG downloaden en CSS downloaden (of Afbeelding kopiëren om de sprite in een designtool of chat te plakken), upload beide en gebruik de klassen: <span class="icon icon-home"></span>.

Voorbeeld

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

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

Tips

  • Houd iconen die samen veranderen in één sprite; als je het vel opnieuw genereert, verandert elke positie.
  • Voor eenkleurige iconen die met CSS van kleur moeten wisselen, is een SVG-iconfont of inline SVG misschien een betere keuze.

Veelgestelde vragen

› Wat is een CSS-sprite?

Eén afbeelding die veel kleine afbeeldingen bevat. Elk icoon wordt getoond door een element de sprite als achtergrond te geven en die met background-position te verschuiven, zodat een pagina één verzoek nodig heeft in plaats van tientallen.

› Zijn sprites met HTTP/2 nog nuttig?

Minder dan vroeger, maar ze helpen nog steeds bij veel piepkleine iconen, e-mailtemplates, games en legacyprojecten, en ze voorkomen dat iconen één voor één in beeld flitsen.

› Wat doet de optie @2x?

Als je bronafbeeldingen op twee keer de weergavegrootte getekend zijn, halveert de CSS elke breedte, hoogte en positie en voegt background-size toe, zodat iconen scherp blijven op schermen met hoge pixeldichtheid.

› Worden mijn afbeeldingen geüpload?

Nee. De sprite wordt in je browser met een canvas getekend en de CSS wordt lokaal gegenereerd.