Наш сайт www.samara.bt.su поможет сориентироваться в мире тендеров. С помощью нашей поисковой системы вы сможете найти тендер и ответ на любой вопрос, связанный с торгами в Самарской области

   Что же такое CSS-спрайты?

   Статья для тех, кто ничего не слышал о спрайтах, слышал, но пока не понял, зачем они нужны, слышал и знает, но хотел бы узнать еще больше. Итак, поехали!

   Что же такое CSS-спрайты? Sprite Sheet – это большущее изображение мелких графических иконок или кнопок сайта. Благодаря CSS каждый из этих элементов можно отобразить отдельно.

   В чем выигрывает веб-мастер и посетители сайта? Использование спрайтов значительно повышает производительность сайта и позволяет грамотно организовать его интерфейс. Объясним, как это происходит на деле. Сервер однократно загружает сразу все элементы в одном файле, тогда как при загрузке отдельных изображений значительно увеличивается число HTTP-запросов. Кроме того, использование спрайта значительно уменьшает вес графики на сайте.

   Спрайты нередко применяются и для создания простого hover-эффекта. При этом веб-мастер может использовать два подхода: либо мелкие картинки компилируются в один файл уже при завершении создания сайта, либо спрайты готовятся на начальном этапе. Во время подготовки все изображения максимально уплотняются и, если они имеют одинаковый размер, создается своеобразная сетка.

   Работать со спрайтами было бы намного сложнее без применения тех или иных инструментов. Перечислим наиболее полезные на наш взгляд фреймворки.

   Compass. Использует Saas, создает спрайты прямо из папки с картинками.

   SpriteMe. Генерирует спрайты и позволяет просматривать их на сайте.

   Lemonade. Помогает создавать спрайты путем добавления строки кода в Saas-файлы.

   Отличным сервисом для создания спрайтов является Spritepad. Для «нарезки» заранее подготовленного файла с CSS спрайтами лучше воспользоваться сервисом Sprite Cow. Среди других полезных модулей стоит отметить Glue (отдельная командная строка, генерирующая спрайты), CSS Sprites (генератор спрайтов с расширенными настройками) и SpriteRight (еще один вариант генератора для Mac).

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика