понедельник, 9 февраля 2009 г.

CSS спрайты

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


«А нахрена это нам?» или «А что это нам даст?» -- возможно спросите вы. А вот ответьте мне на такой вопрос: что быстрее скачается с флешки: «полтыщи» картинок, старательно надерганых из интернет, суммарным объемом 1 гигабайт или те же «полтыщи» картинок, но одним архивом объемом в гиг? Поэкспериментируйте ;).

Ну да таки перейдем качественных рассуждений к количественным.

Список-меню без использования CSS спрайтов


Пример 1. Стили CSS


.list-item {top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none;}
#nav li a {background:none no-repeat left center; display: block; height:85px; width:200px; padding-left:85px;}

#nav li a.fry {background-image:url('images/fry_bw.jpg')}
#nav li a.leela {background-image:url('images/leela_bw.jpg')}
#nav li a.bender {background-image:url('images/bender_bw.jpg')}
#nav li a.zoldberg {background-image:url('images/zoldberg_bw.jpg')}
#nav li a.amy {background-image:url('images/amy_bw.jpg')}

#nav li a:hover.fry {background-image:url('images/fry.jpg')}
#nav li a:hover.leela {background-image:url('images/leela.jpg')}
#nav li a:hover.bender {background-image:url('images/bender.jpg')}
#nav li a:hover.zoldberg {background-image:url('images/zoldberg.jpg')}
#nav li a:hover.amy {background-image:url('images/amy.jpg')}

Пример 1. Код HTML


<ul id="nav">
<li><a class="fry" href="#fry"><div class="list-item">Фрай</div></a></li>
<li><a class="leela" href="#leela"><div class="list-item">Лила</div></a></li>
<li><a class="bender" href="#bender"><div class="list-item">Бендер</div></a></li>
<li><a class="zoldberg" href="#zoldberg"><div class="list-item">Зольдберг</div></a></li>
<li><a class="amy" href="#amy"><div class="list-item">Эми</div></a></li>
</ul>

Результат:
  • Объём страницы: 1.45 Kb
  • Запросов: 6
  • Время загрузки: 0.181 s

Список-меню с использованием CSS спрайтов


Пример 2. Стили CSS


.list-item {left:10px; top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none; clear:both; height:85px; width:200px;}
#nav li a {background:url('images/futurama.jpg') no-repeat; display: block; height:75px; width:75px; float:left;}

#nav li a.fry {background-position:0 0;}
#nav li a.leela {background-position:0 -75px;}
#nav li a.bender {background-position:0 -150px;}
#nav li a.zoldberg {background-position:0 -225px;}
#nav li a.amy {background-position:0 -300px;}

#nav li a:hover.fry {background-position:-75px 0;}
#nav li a:hover.leela {background-position:-75px -75px;}
#nav li a:hover.bender {background-position:-75px -150px;}
#nav li a:hover.zoldberg {background-position:-75px -225px;}
#nav li a:hover.amy {background-position:-75px -300px;}

Пример 2. Код HTML


<ul id="nav">
<li><a class="fry" href="#fry"></a><span class="list-item">Фрай</span></li>
<li><a class="leela" href="#leela"></a><span class="list-item">Лила</span></li>
<li><a class="bender" href="#bender"></a><span class="list-item">Бендер</span></li>
<li><a class="zoldberg" href="#zoldberg"></a><span class="list-item">Зольдберг</span></li>
<li><a class="amy" href="#amy"></a><span class="list-item">Эми</span></li>
</ul>

Результат:
  • Объём страницы: 1.40 Kb
  • Запросов: 2
  • Время загрузки: 0.137 s

Даже при тестировании на локальном сервере видно, что скорость загрузки страницы увеличивается при использовании CSS спрайтов.

4 Комментариев :

Den3er комментирует...

У вас в этом посте, картинка одна сбежала влево, подправите?)).

Croaker комментирует...

Спасибо :) На самом деле так и задумано: CSS: Заметки на полях.

Den3er комментирует...

А ну ясно, тогда нужно подумать к чему это можно приурочить))
И еще, можно в блоге сделать такое, чтобы при обновлении менялось изображение, допустим в фоне?

Croaker комментирует...

Это несложно реализовать с помощью Javascript. Другое дело – не совсем понятно, для чего это нужно :). Кроме как для «красивостей» – разумеется.

Хотя, недавно пришла на ум небольшая модификация этого «эффекта». Так или иначе, – добавил вопрос в “ToDo-лист”.

Отправить комментарий

Жги!