Jak stworzyć tła elementów za pomocą sprajtów?

Bez zbędnych wstępów:

1 - Przed stworzeniem sprajta, warto zmierzyć, jakie wymiary mają mieć docelowo obrazki. Po jego utworzeniu, będzie to trudne i często kończy się koniecznością dopasowywania obrazków od nowa.

2 - Obrazki przycinamy w ulubionym programie graficznym do odpowiedniego rozmiaru. W Photoshopie rozmiar zdjęcia zmieniamy skrótem ctrl+shift+i.  Najlepiej, jeśli są to pliki PNG z przezroczystym tłem. Wrzuć je do jednego folderu, by nie zapomnieć o żadnym z obrazków.

3 - Nadaj obrazkom odpowiednie nazwy - jeśli nazywają się na przykład img0adfadsadsd.png, będziesz miał potem więcej pracy przy tworzeniu klas.

3 - Wejdź na stronę http://spritegen.website-performance.org/ i załaduj swoje obrazki. W pierwszej kolejności kliknij "clear" by wyczyścić canvas.

4 - W ustawieniach wybrałem ułożenie obrazków w linii i zmniejszyłem padding.

5 - Wybierz eksport i pobierz spritesheet oraz plik CSS. Od tej pory nie powinieneś manipulować rozmiarami spritesheet, bo konieczne będzie jego utworzenie od nowa. Przy ułożeniu liniowym, można jednak łatwiej dodać na przykład jeszcze jedną ikonkę.

6 - Wrzuć plik sprajtów do folderu ze zdjęciami Twojej strony WWW i do Twojego arkusza CSS (SCSS), wklej kod CSS. Warto sobie zaznaczyć, że tego kodu nie powinniśmy zmieniać. Konieczna jest zmiana ścieżki do folderu ze sprajtem.

7 - Plik CSS zawiera zwykle dwa rodzaje klas - jedną ogólną, która wskazuje na plik z backgroundami (np .sp), oraz kilka klas z przedrostkiem (np. sp-dom), które  wskazują na pozycję elementu na sprajcie. Aby dodać obrazek tła do elementu, dodaj do niego jedną i drugą klasę. Podobnie z kolejnymi elementami.

W załączonym penie pokazuje sam HTML, bez arkusza ze sprajtami.

See the Pen wJLObb by Kamil (@KamilNaja) on CodePen.

Achtung!

Jeśli Twój element miał określony background-color przez  właściwość background i dodasz do niego klasę określającą background-image, kolor przestanie się wyświetlać. Aby z tego wybrnąć, określ kolor przez bardziej specyficzną właściwość background-color.

Tak nie zadziała, background nadpisuje background-color

Jeśli chcesz na przykład zmienić kolor wszystkich ikonek, to możesz to zrobić po stworzeniu sprajta, by nie przeprowadzać tej operacji osobno dla każdego pliku.

Attenzione Attenzione!

Gdy Twój element ma duży padding i małe kafelek tła w środku, tło też musi mieć duże obramowanie.

PS - jest jeszcze lepszy przepis na sprity, mianowicie, wykorzystanie Compass (http://compass-style.org/help/tutorials/spriting/), ale to temat na inny wpis.