Решил написать статью об спрайтах (Css Sprites). Статью о них вроде бы никто не писал здесь.

Итак. Спрайты - это изображение, на котором изображены другие картинки, например кнопки или иконки. Пример: BB коды в CKEditor'e

Для чего же их используют?
Они позволяют увеличить скорость загрузки тех или иных картинок, которые вы поместили в изображения
Уменьшается объем тех изображений и происходит сжатие.


Я не советую делать весь сайт из спрайтов, так как потом будут большие проблемы.
Пример: Вы потратили кучу времени, чтобы собрать все картинки и поместить их в одно изображение. Вам придется менять множество классов. А если захотите поменять тот или иной объект вам опять придется создавать новый спрайт. Думаю, поняли.


CSS Спрайты нужно использовать у схожих объектов (кнопки, иконки и др).


Перейдем к практике.

Допустим, у нас есть две кнопки соц. сетей (Вк и Twitter). Для уменьшения объема страницы поместим изображения в одну картинку.



Ненужно карячиться в паинте или ФШ, для этого есть специальные сервисы, CSS Sprites Генераторы

Я пользуюсь этим.

Легкий и простой интерфейс. Все что нам нужно.

Берем эти две "кнопки" и загружаем. Можете выбрать для себя подходящие функции, я обычно ничего не меняю.

Теперь качаем полученный спрайт и загружаем на фтп (или куда вам угодно).

Допустим, он (спрайт) располагается по следующему пути: images/sprite.png


Теперь CSS и HTML


Это код кнопок. vk - кнопка Вк; tw - кнопка Твиттер

<a href="vk"><span class="vk">&nbsp;</span></a>
<a href="tw"><span class="tw">&nbsp;</span></a>

CSS

У нас есть два класса:

.vk и .tw

Для них нужно указать бэкграунд (т.е. сам спрайт и расположение расположение фона).

Заново открываем страницу с генератором, смотрим, что нужно указать для каждого элемента:

vk - background-position: 0px 0px;
tw - background-position: 0px -50px;

Я не буду использовать отдельно backgpound-position, а помещу его в background.

.vk {
background: url(images/sprite.png) 0 0px; /* 0 0px это и есть background-position*/
}



.tw {
background: url(images/sprite.png) 0 -50px; /* 0 -50px это и есть background-position*/
}

На этом все

Качественней указывать через background-position, просто по причине того, что название картинки или путь к ней может измениться, тогда придется все менять

Sven добавил 10.10.2013 в 22:17

Originally Posted by Liked

У нас есть два класса:

не классы, а идентификаторы

Originally Posted by Sven

не классы, а идентификаторы

ну да, не знал как назвать по-другому

Originally Posted by Liked

ну да, не знал как назвать по-другому

http://htmlbook.ru/samcss/identifikatory

И раз уж поменял ИД на классы, так и в хтмл коде смени

@Sven, вовремя меня исправляете)

Originally Posted by Liked

Я не советую делать весь сайт из спрайтов, так как потом будут большие проблемы.

Кстати, это не так))
На ютубе сделано на спрайтах http://s.ytimg.com/yts/imgbin/www-hi...-vfl9MM9nN.png
Если делать с головой на плечах, то все выходит очень даже хорошо

Originally Posted by vlady

лучше сделать общий класс, напр. sprite, и задавать там общий background-image. А background-position присваивать уже конкретным классам. Так css будет читабельней, легче и быстрее))

Я об этом и писал, но ТС предпочел сделать так.
Но как совет, лучше добавить пример от @vlady в 1 пост, чтоб пользователям был выбор, как они хотят делать

Sven добавил 10.10.2013 в 23:06

Originally Posted by vlady

<a href="sprite vk"><span>&nbsp;</span></a>
<a href="sprite tw"><span>&nbsp;</span></a>

Боюсь не выйдет т.к. не указан класс))
Везде классы прописаны в href )))

@Sven, ну на самом деле, мой вариант является костылем для приведенного кода. Грамотнее внедрять спрайты иначе, а эту статью вообще не читать.

Originally Posted by vlady

ну на самом деле, мой вариант является костылем для приведенного кода

Я понимаю, но стоит исправить ошибки....если уж согласились написать "дополнение"

Оффтоп

Столько раз делала - теперь хоть буду знать, что это называется спрайт ))))