Co to jest Sprite?
W CSS sprite to jeden plik graficzny, który jest wykorzystywany jako tło do różnych elementów. Odpowiedni obraz, dla danego elementu np przycisku, nagłówka itp. otrzymujemy poprzez odpowiednie ustawienie wymiarów widocznego obszaru (
width,
height,
padding) oraz pozycji tła (
background-position).
Po co stosować sprite?
Przede wszystkim dla wygody, czy wyobrażasz sobie wysyłanie na serwer kilkudziesięciu plików i potem ustawianie ich ścieżek w css? To wszystko może być ciężkie do ogarnięcia przy skomplikowanej grafice strony składającej się z wielu elementów.
Drugim równie ważnym powodem jest szybkość wczytywania, jeden nawet plik wczyta się szybciej i niż kilkanaście mniejszych, dodatkowo w jednej chwili pojawią nam się wszystkie elementy, nie będzie widoczne jak po kolei wczytują się poszczególne pliki.
Jak zrobić pierwszy plik sprites ?
Wystarczy umieścić wszystkie obrazki w jednym pliku w programie graficznym, np. Photoshopie, zapisać je bez tła w pliku .png i umieścić na serwerze.
Można teraz zacząć zabawę w CSS:
.button1 {background: url("http://adres.pl/sprites.png") repeat scroll 0 0 transparent;
width:200px;
height:50px;
display:block;
text-indent:-9999px; /* ukrycie tekstu */}
.button2 {background: url("http://adres.pl/sprites.png") repeat scroll 0 -52px transparent;
width:200px;
height:50px;
display:block;
text-indent:-9999px; /* ukrycie tekstu */}
html:
<a class="button1" href=#">przycisk1</a>
<a class="button2" href="#">przycisk2</a>
Dzięki temu uzyskamy dwa przyciski, tło drugiego jest przesunięte w stosunku do pierwszego o 52px w dół i przyjmie tło, które chcieliśmy mu nadać.
Jak to zrobić szybciej?
Przy dużej ilości spritów, męczące i nie ergonomiczne jest do każdej klasy wklejanie tej samej linijki kodu z
background. Dlatego skorzystamy z dwóch klas, w której jedna będzie określała sam
background a druga jego pozycję.
.sprite { background:url("http://strona.pl/sprites.png");}
.button1 {
background-position:0 0;
width:200px;
height:50px;
display:block;
text-indent:-9999px; /* ukrycie tekstu */}
.button2 {
background-position:0 -52px;
width:200px;
height:50px;
display:block;
text-indent:-9999px; /* ukrycie tekstu */}
Dzięki temu zabiegowi kod staje się bardziej przejrzysty i jeżeli zachodzi potrzeba zmiany adresy sprita, zamieniamy tylko jedną linijkę.
Przykładowe pliki sprites
Tak wygląda przykładowy obrazek, który jest spritem, obrazek ten pochodzi z serwisu themeforest.net
inny przykład ze strony photobucket.com
