czwartek, 1 kwietnia 2010

Szybki szpil #6 - Sprites CSS - Jak to zrobić? (i to szybciej!)

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

Autor: Marcin Piszczek

Interesuję się designem, internetem i nowinkami technicznymi. Z zamiłowania jestem web developerem i web designerem,a od jakiegoś czasu również blogerem. W wolnych chwilach gram w DotA. Kibicuję Zagłębiu.

Masz jakieś sugestie? Napisz do mnie. Możesz mnie również obserwować na Twitterze.
blog comments powered by Disqus

Wszystko o designie, dużo inspiracji i tutoriali.

Copyright 2009 - 2012 Creatyna. All rights reserved.