
CSS Sprites to bardzo użyteczna sztuczka, wykorzystywana na stronach z dużą ilością ikonek i małych grafik, których osobne i każdorazowe ładowanie się znacznie spowalnia działanie strony.
Na wstępie szybko wyjaśnię na czym polega ta metoda. Tworzymy jeden plik graficzny, w którym umieścimy ikonki dla naszej strony, jako przykład wezmę te obok. Następnie utworzymy divy które odnosić się będą do pozycji w naszym obrazku. Jest to bardzo użyteczne, gdy korzystamy z zmiany grafiki po najechaniu na nią [ :hover ]. Podczas pospolitego wykorzystania :hover zdarza się, że grafika nie ładuje się natychmiastowo [ jest zbyt duża wagowo ] i wygląda to dość nieatrakcyjnie.
Więc do rzeczy:
W pliku html umieszczamy nasze przykładowe divy:
<div class="img1"></div> <div class="img2"></div> |
A w kodzie CSS wykorzystujemy CSS Sprites:
.img1{background: url(./img.jpg) 0 0 no-repeat; width: 125px; height: 125px;} .img1:hover{background: url(./img.jpg) -128px 0 no-repeat;} .img2{background: url(./img.jpg) -128px 0px no-repeat; width: 125px; height: 125px;} .img2:hover{background: url(./img.jpg) 0 0 no-repeat;} |
W efekcie img1 będzie pierwszą ikonką zmieniającą się na tą obok niej. A img2 będzie ikonką nr2 zmieniającą się na tą pierwszą.
Wszystko to za sprawą części -128px 0px:
.img1{background: url(./img.jpg) 0 0 no-repeat; width: 125px; height: 125px;} |
Jest ona odpowiedzialna za przesunięcie w pliku i trzeba jej nadać wartość ujemną. -128px oznacza przesunięcie w prawo o 125px, więc jest to oś X. 0px oznacza brak przesunięcia na osi Y.