Css спрайт – CSS спрайты, создание и применение css спрайтов, генераторы css спрайтов, ускорение загрузки сайта

Содержание

основные техники и полезные инструменты / Habr

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.

Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

Применение на практике


Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок позволяет увеличить производительность сайта, но это не так — случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. Пример спрайта на сайте webdesign tuts:

Пример кода для использования спрайтов на странице (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>

<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

 До или после?


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

Более опытные разработчики готовят спрайты на начальном этапе, это позволяет лучше организовать графику будущего дизайна, а также готовить PSD-шаблон к верстке.

 Организация элементов дизайна


При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) — создать сетку, благодаря которой упростится использование спрайтов на сайте:

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

Полезные инструменты


Compass — отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.

Lemonade — инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.

SpriteMe — букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.

Вот как выглядит рабочий слой букмарклета:

Fireworks CS6 — последняя версия включает функцию генерации спрайтов.

 Полезные сервисы


Spritepad — drag-and-drop сервис для создания спрайтов

Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами

Glue — командная строка для генерации спрайтов

CSS Sprites — еще один генератор, с расширенными настройками

SpriteRight — приложение-генератор для Мака

Использованные материалы и полезные ссылки:

habr.com

Как использовать спрайты CSS | CSS


В чем преимущество использования CSS-спрайтов? Представьте, что у вас есть шесть изображений, используемых в макете веб-страницы, и браузер должен загружать их все по отдельности. Если бы они были объединены в одно изображение, вы смогли бы существенно увеличить скорость загрузки. Это уменьшит количество обращений к серверу, необходимых для отображения страницы, что сделает ваш сайт быстрее.

Вместо загрузки шести изображений теперь загружалось бы одно. В этом преимущество CSS спрайтов.

В большинстве веб-страниц используется несколько маленьких изображений. Фоновые изображения, стрелочки, иконки, пункты меню и т.д. Эти крошечные изображения действительно имеют значение, если рассматривать их влияние на скорость загрузки страницы.

Каждое изображение должно быть загружено. Браузер должен запросить на сервере изображение, сервер отправить его, а затем браузер должен его отобразить. Если бы дело касалось одного-двух изображений, особых проблем бы не возникло. Но так как рисунков загружается намного больше — это негативно сказывается на скорости загрузки страницы.

Решение – использование спрайтов, которые в одном изображении сочетают несколько маленьких, поэтому веб-страницы можно загружать значительно быстрее.

Существует два основных этапа создания CSS спрайтов. Сначала вы должны создать изображение и затем поместить его.

Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей):


Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его «sprite.png«. Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.

Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон) расположен в верхних 50 пикселях нового изображения, а второй (смайлик) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS:

В этом примере мы будем использовать рисунки в качестве фоновых изображений, размещенных в элементах div. Мы создадим пустые теги div для отображения изображений. Если на нашей странице нам нужно вывести изображение мегафона, мы используем CSS-класс «megaphone«:

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей), он также вызывает изображение «sprite.png«, которое является объединенным. Часть кода «0 0px» отвечает за отображение спрайта. Указание начинать вывод изображения с «0 0px» означает, что оно должно отображаться с 0 пикселей по оси X и с 0 пикселей по оси Y. Это значит «начинать вывод изображения сверху» и «начинать вывод изображения слева«.

Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта. Мы создадим класс CSS под названием «smile«:

.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: «0 -50px«. Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px). Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.

Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом «megaphone«:

<div></div>

Когда нужно вывести смайлик, мы размещаем div с классом «smile«:

<div></div>

Таков основной принцип, как сделать спрайт CSS. Существует много способов реализовать это, и лучше выбрать тот, который больше подходит вам. В этой статье мы показали, как работают спрайты, но не рассмотрели их углубленно.

Данная публикация представляет собой перевод статьи «How to use CSS sprites» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Как использовать спрайты CSS? | Impuls-Web.ru

Здравствуйте, дорогие друзья и коллеги!

Вы уже используете css спрайты на своих сайтах? Если ещё нет нет, или только начинаете то эта статья для вас. В ней вы узнаете что это такое, зачем они нужны, почему их нужно использовать и как это правильно делать.

Навигация по статье:

Как сделать интернет-магазин?

Что такое спрайты css и зачем они нужны?

Спрайт представляет собой одну большую картинку, на которой объединены несколько других более мелких.

Спрайты CSS

Используется эта картинка для задания фона для элементов на сайте при помощи CSS.

Для того чтобы задать для нужного блока определённую область спрайта используется позиционирование фона.
Например:

Допустим у нас есть 2 ссылки для которых нам нужно указать в качестве фона соответствующие социальные сети.

Вёрстка будет выглядеть так:

<a href=»#»></a> <a href=»#»></a>

<a href=»#»></a>

<a href=»#»></a>

Теперь давайте загрузим спрайт с несколькими изображениями соцсетей на хостинг и в CSS зададим для них фон.

.vk { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ }

.vk {

width:40px; /*ширина блока, равная ширине картинки фона*/

height:40px; /*высота блока, равная высоте картинки фона*/

background:url(images/soc-sprite.png)no-repeat;  /*путь к фоновуму изображению*/

    background-position: -6px -2px;  /*смещение фона по горизонтали и вертикали*/

}

Для задания фона мы используем большое изображение с несколькими картинками и при помощи CSS свойства background-position смещаем фон как нам нужно.

При этом сначала мы указываем смещение по горизонтали и по вертикали.

Отрицательное значение говорит о том что фон смещается вверх и влево. Если нужно сдвинуть вниз или вправо то используем положительные значения.

Для второго блока это будет выглядеть так:

.twitter { width:40px; height:40px; background:url(images/soc-sprite.png)no-repeat; background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

.twitter {

width:40px;

height:40px;

background:url(images/soc-sprite.png)no-repeat;  

           background-position: -105px -2px;  /*смещение фона по горизонтали и вертикали*/

}

По сути всё то же самое, но меняется только значения CSS свойства background-position.

Раз уж мы заговорили об оптимизации, то имеет смысл присвоить всем элементам, для которых мы будем использовать спрайты CSS один общий класс. Это связано с тем что ряд CSS свойств у этих элементов будет повторяться (высота, ширина, фон и т.д.) и чтобы не писать их много раз для каждого элемента можно задать их сразу для всех один раз.

Вёрстка будет выглядеть так:

<a href=»#»></a> <a href=»#»></a>

<a href=»#»></a>

<a href=»#»></a>

А так будет выглядеть CSS:

.soc-button { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ } .vk { background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ } .twitter { background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

.soc-button  {

width:40px; /*ширина блока, равная ширине картинки фона*/

height:40px; /*высота блока, равная высоте картинки фона*/

background:url(images/soc-sprite.png)no-repeat;  /*путь к фоновуму изображению*/

}

.vk {

    background-position: -6px -2px;  /*смещение фона по горизонтали и вертикали*/

}

 

.twitter {

background-position: -105px -2px;  /*смещение фона по горизонтали и вертикали*/

}

Видите разницу?

Зачем использовать CSS спрайты?

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

Преимущества :

Недостатки:

  • Нужно потратить определённое время на создание такого объединённого фонового изображения.
  • Сложнее задавать фон так как нужно вычислять значения для смещения.
  • Для того чтобы добавить, удалить или изменить одно изображение приходится править весь спрайт.

Использование CSS спрайтов для создания эффектов при наведении

Если вы решите создать эффект смены фонового изображения для элемента при наведении, то столкнётесь со следующей проблемой.

При первом наведении на элемент после загрузки страницы фоновая картинка как бы мигает при смене. Данная проблема наблюдается не всегда, но в большинстве случаев.

Как здесь:

Наведи на меня!

Для решения этой проблемы делаем следующее:

  1. 1.Подготавливаем спрайт с двумя картинками Картинка слайлика
  2. 2.Задаем верхнее изображение в качестве фона

    .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

    .smile {

    width:75px; /*ширина блока*/

    height:75px; /*высота блока*/

    background:url(images/smile.png)no-repeat;  /*задаём фоновую картинку*/

    background-position: 0px 0px; /*начальная позиция блока*/

    }

  3. 3.Задаём смещение фона при наведении

    .smile:hover { background-position: 0px -80px; }

    .smile:hover {

    background-position: 0px -80px;

    }

    Получится вот так:

    Наведи на меня!
  4. 4.Для интереса можно ещё задать CSS свойство:

    transition: all 0.5s ease;

    transition: all 0.5s ease;

    Его добавляем и к селекторам .smile и .smile:hover и получаем довольно интересный эффект при наведении, а заодно и наглядно видим как происходит смещение фона.

В итоге получится так:

Наведи на меня!

В общем полезная штука эти CSS спрайты, но готовить и редактировать их довольно сложно!

К счастью, для облегчения этой задачи существуют специальные онлайн генераторы спрайтов.

Удобный генератор спрайтов CSS

Одним из таких сервисов является генератор спрайтов www.toptal.com

Для генерации спрайта нам нужно:

  1. 1.Переходим по ссылке и нажимаем на кнопку «CHOOSE FILE» Генератор спарайтов
  2. 2.Загружаем с компьютера заранее подготовленные изображения, которые нужно объединить в спрайт и наживаем кнопку «Открыть». Загружаем изображение

    Можно выбирать сразу несколько зажав кнопку CTRL на клавиатуре.

  3. 3.Получаем готовый спрайт и фрагменты CSS кода, с указанием параметров смещения для каждого изображения! Скачиваем его себе на компьютер, нажав на кнопку «DOWNLOAD» Скачать спрайт
  4. 4.Далее загружаем полученный спрайт CSS на свой сайт. Это можно сделать через файловый менеджер на вашем хостинге или использовать FTP клиент FileZilla, для которого я недавно писала статью с инструкцией. Вот ссылка: «Как пользоваться FTP-клиентом FileZilla?»
  5. 5.Теперь для блоков, в которых вам нужно задать фоновое изображение, из спрайта используем указанные CSS свойства Установка спрайтов

    Класс вы можете использовать тот же что и здесь или задать свой.

  6. 6.Так же вы в любой момент можете удалить или добавить изображения на созданный спрайт.

    Для этого существуют специальные кнопки:

    Управление спрайтами

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

Конечно же, это не единственный генератор спрайтов, но мне он очень понравился из-за своей простоты. В нём нет ничего лишнего и, в то же время, есть всё что нужно.

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

Как научиться продвигать сайты?

Надеюсь моя статья помогла вам разобраться в теме спрайтов CSS! Оставляйте свои комментарии и делитесь статьёй в соцсетях. Вдруг мы с вами не одни такие сумасшедшие и тема CSS спрайтов будет интересна ещё кому то 🙂

Успехов вам! До скорой встречи в других моих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Как сделать css спрайт для сайта.

как сделать css спрайтДоброго времени суток, сегодня хочу рассказать вам о том, как сделать css спрайт иконок для своего сайта. Да в прочем не только иконок, но и любых других элементов, например, кнопок, меню и т.д. Хоть графику всего лендинга.

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

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

css спрайты

То есть, применительно к вебу – это одна картинка с множеством элементов, каждый из которых показывается в нужном месте сайта за счет позиционирования.

Но вопрос того, на сколько быстрее или медленнее грузится страничка с использованием спрайтов, я затрону в следующей статье, и она уже точно попадет в нужную рубрику. Так что подписывайтесь в Twitter, чтобы не пропустить анонс статьи.

А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.

Скачать исходник

Итак, я создал простенький спрайт иконок в фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.

как сделать css спрайт

Создание css спрайта – html разметка

Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:

<div class=»socseti»>
<p>Подписывайтесь на обновления</p>
<ul>
<li> <a href =»#» class=»tvitter»> </a> </li>
<li> <a href =»#» class=»googlePlus»> </a> </li>
<li> <a href =»#» class=»vk»> </a> </li>
<li> <a href =»#» class=»rss»> </a> </li>
</ul>
</div>

Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте title ссылкам. И переходим к  добавлению стилей!

Создание css спрайта – css разметка

Задаем стили контейнера:

. socseti {
width: 270px;
height: 150px;
margin:200px auto;
background: url(../images/bg-soc.png) no-repeat;
padding: 15px;
}

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов)

. socseti ul {
overflow: hidden;
width: 246px;
margin:20px auto;
}

. socseti ul li {
float: left;
margin-left:2px;
}

. socseti ul li :  last-child{
margin-right: 2px
}

Теперь начинается самое интересное. Зададим общие стили для ссылок:

. socseti ul li a {
display: block;
width: 59px;
height: 59px;
}

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим…
Зададим фоновое изображение первой ссылке.

a.  tvitter {
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
}
a. tvitter : hover{
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
}

На фон ссылки я ставлю большое изображение (спрайт нарисованный в фотошопе). Но за счет того, что у ссылок заданный размер 59х59 px, то показывается лишь часть от общей картинки.

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 59px, то мне необходимо подвинуть фон на -59px. А также, я хочу чтобы цвет менялся с серого на цветной. Для этого мне нужно опустить фон на 59px. Что и показано здесь:

a. tvitter {
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
}

Для того, чтобы при наведении изменялись стили класса, необходимо задать псевдокласс hover. Что я и делаю тут:

a. tvitter : hover{
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
}

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

Аналогичным способом необходимо задать положение для остальных элементов спрайта, двигая его на 118 рх для отображения RSS — иконки, и вернуть в 0 px для отображения иконки «ВК».

Надеюсь статья была вам полезна, и теперь вы будете использовать css спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.

smartlanding.biz

Удобный генератор CSS спрайтов / Habr

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

По большей части моя работа со спрайтами сводилась к следующему:

Итак, начнем с самого начала

Краткая история

Прошлое

Давным-давно я верстал сайты. Начальство требовало ускорить загрузку страниц и поэтому я начал объединять картинки в спрайты.

В Photoshop я резал макет на части и затем объединял их с помощью PHP скрипта. Честно, я был удивлен, что в Photoshop нельзя объединить выделенные области в один файл, но в любом случае ожидать от редактора изображений еще и автоматической генерации стилей — уже явный перебор. Я простил разработчиков за такой скудный функционал и написал php скрипт, который генерировал спрайты и файл со стилями.

Сайтов было много, и скрипт существенно ускорял мою работу. Причем правила группировки я писал один раз для одного сайта. Если менялся макет, а области оставались на том же месте, то я просто подсовывал скрипту новую картинку и он заново все генерировал.

Признаюсь, был один недостаток в таком подходе. Качество картинок, которые выдает PHP мягко говоря «не очень». Поэтому я настраивал скрипт таким образом, чтобы в стилях расширения файлов были jpg, png, gif, а картинки генерировались в BMP формат. И потом я вручную конвертировал в нужный формат с помощью Photoshop.

Настоящее

Спустя много лет мне опять пришлось сверстать макет с помощью спрайтов. И тут мне стало интересно. Что появилось за это время для упрощения процесса?

Photoshop опять меня не порадовал. Зато генератор спрайтов появился в Fireworks CS6. Но просмотрев несколько видео и статей, я понял, что он мне не подходит, так как не выполняет всех моих требований.

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

Каким я вижу генератор спрайтов

Если коротко, то генератор спрайтов должен:
  • Уметь разрезать исходные картинки на части
  • Уметь соединять порезанные части в спрайты
  • Одновременно генерировать стили
  • Главное — иметь удобный графический интерфейс

Ранее соединял картинки и генерировал стили мой PHP скрипт, я лишь прописывал для этого правила. Но сейчас мне показалось этого мало. Как минимум настройка правил в текстовом редакторе уже устарело. Сейчас все должно управляться кнопочками и настраиваться с помощью графического интерфейса.

Но раз уж делать графический интерфейс, то и Photoshop особо не нужен. Выделение областей и разрезание картинки — задача тривиальная для javascript и HTML5.

Все эти четыре пункта явно хотят объединиться в один единственный редактор.

А для редактора очень важно сохранять проект на случай если потом нужно будет что-то подправить.

Как видно, в файл проекта должны сохраняться все исходные картинки и все правила разбивки, объединения картинок и генерации стилей.

Теперь остановимся на графическом интерфейсе. В нем должно быть следующее:

  • Кнопочки для открывания картинок, правил или всего проекта.
  • Кнопочки для сохранения результата и проекта.
  • Настройка правил разбиения картинки на области. То есть: пользователь выделяет области, видит список областей, может их редактировать.
  • Настройка правил группировки областей в спрайт. Тут должна быть возможность указать в каком месте спрайта должна быть картинка
  • Настройка правил генерации стилей. Для каждой картинки в спрайте должны настраиваться способ генерирования стилей: генерировать или нет ширину, высоту, repeate-x, repeate-y, no-repeate, имя класса

Главное — при добавлении картинок в проект должны генерироваться некие стандартные правила, чтобы избавить пользователя от лишних действий по настройке. Например, добавили мы иконку «firefox.png». Программа должна автоматически создать область «firefox» (на всю ширину и высоту) и стиль:
.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }

И потом уже мы можем переместить область в другой спрайт или отредактировать генерацию стилей.
Обзор решений

Теперь кратко, почему мне не подошли существующие решения.

Compass — написан на Ruby. Пишутся стили с особым синтаксисом и программа потом генерирует обычные стили со спрайтами.
Lemonade — суть такая же и на сайте написано что он теперь встроен в тот же Compass.
Glue — командная строка для генерации спрайтов.

Эти инструменты я сравнил с тем что у меня было более пяти лет назад, когда я прописывал правила в php скрипте и он генерировал спрайты. Но сейчас мне уже хотелось именно визуальный редактор.

SpriteMe — перетаскиваем ссылку в букмарклет и потом можно редактировать спрайты на просматриваемом сайте. Но мне не нужно редактировать спрайты на существующем сайте. Мне нужен редактор на этапе, когда сайт еще верстается.

Spritepad — методом drag-and-drop перетаскиваем картинки на спрайт и справа выводятся все стили. Уже ближе к тому что я хотел. Но почему только drag-and-drop? Неужели сайт лишь демонстрирует новую фичу браузеров? Мне не всегда удобно перетаскивать, я хочу добавлять картинки через обычную кнопку «Открыть». Картинки сохраняются только в PNG? Нельзя создавать одновременно несколько спрайтов? Все-таки этот генератор сильно прост.

Sprite Cow — интересная штука. Если у вас уже есть готовый спрайт, то Sprite Cow поможет вам выделить отдельные области и сгенерировать для них css правила. Но css генерируется только для одной выделенной области. То есть если у вас куча иконок, то нужно каждую выделять и копировать css в ваш редактор стилей. В общем, идея хорошая, может сократить время при определении координат и размеров в спрайте, но сильно уж узконаправленная и опять же не решает моих задач.

Еще онлайн сервисы:

  • css-sprit.es,
  • csssprites.com,
  • spritegen.website-performance.org,
  • css.spritegen.com

В них процесс выглядит следующим образом:
  1. загрузка картинок,
  2. настройка параметров,
  3. генерация

Но все равно, мне они показались не удобными и не практичными. Вообще, каждое из рассмотренных выше приложений вызывало у меня чувство дискомфорта из-за того, что не оказывалось нужной опции или был неудобный интерфейс.

Не захотел я мириться с таким положением вещей и сваял свой генератор.

Рад представить

CSS Sprite Generator by Simpreal

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

На главной странице в разделе «Examples» есть несколько проектов-примеров. Надеюсь они помогут разобраться в возможностях программы.

Генератор спрайтов работает онлайн. Собран из Bootstrap, Knockoutjs и само собой Jquery.

Главное, в ходе разработки проекта было получено много опыта особенно по Knockoutjs. Этот опыт вылился в две статьи на хабре:

Canvas в GIF на Javascript
Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

Если у кого-нибудь возникнут еще вопросы связанные с реализацией того, что умеет генератор спрайтов, то я с радостью отвечу.

Так же существует офлайн версия под Windows. Она представляет собой оболочку на Awesomium в которую просто вставляются web-файлы. Но на самом деле мне пришлось поработать чтобы все функции заработали в этой оболочке. Так что могу поделится и этим опытом.

Что дальше

За процессом разработки можно следить на smartprogress

Сейчас я работаю над интеграцией редактора с сервером, для более удобного сохранения результатов. В идеале по нажатию одной кнопки все спрайты и стили будут обновлятся на редактируемом сайте.

К сожалению, за пол года практически никто не стал пользоваться программой. Поэтому демонстрирую программу хабросообществу, чтоб узнать ваше мнение о полезности данного продукта.

Я лишь пока предполагаю, что очень мало людей в принципе пользуются спрайтами. Например, за последние 5 лет я лишь один сайт так делал знакомым. Реальные же заказчики сейчас не обращают на это внимания.

Поэтому сложно сказать, что будет дальше. Если людям понравится идея программы, то она будет развиваться. Если же нет, то она либо останется как есть, либо превратится в нечто другое.

В любом случае опыт бесценен!
И если мне понадобится сверстать сайт спрайтами, то у меня уже будет для этого удобный инструмент!

habr.com

CSS спрайты — создание и использование, генераторы CSS спрайтов

На современных сайтах можно встретить большое число самой разной по типу графики: изображения товаров, аватарки пользователей, картинки, формирующие дизайн страниц, кнопки, иконки, логотипы и т.д. И чем крупнее проект, тем больше графических файлов там используется. При открытии отдельной страницы сайта в браузере происходит загрузка всех ее элементов. Поэтому, когда на ней размещено слишком много графики, скорость загрузки, как правило, значительно снижается. Что, в свою очередь, чревато неудобствами для посетителей вашего проекта.

Чтобы оптимизировать скорость загрузки страниц, содержащих большое количество мелких изображений, и снизить нагрузку на сервер, были придуманы так называемые CSS спрайты. О них сегодня и поговорим: расскажу о преимуществах, приведу простой пример использования css спрайтов и поделюсь ссылкками на сервисы генераторы.

Обычно этим термином обозначают объединение нескольких маленьких картинок в одну большую. Получается своеобразная графическая карта, которую можно разбить на отдельные части. Разбиение файла и вставка отдельных его частей в нужные места страницы осуществляется посредством специальных правил CSS.

Чаще всего создают CSS спрайты для иконок, лейблов, значков и прочих мелких изображений, так как на одной большой картинке может поместиться сразу несколько десятков таких элементов. Да и вставлять их в нужные места страницы поодиночке – весьма неблагодарный труд. Кроме того, с их помощью реализуют css эффект hover при наведении на картинку или пункт меню.

Вот парочка примеров «подобных конструкций»:

У использования CSS спрайтов есть два основных преимущества:

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

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

В качестве недостатков CSS спрайта можно назвать:

  • больше сложностей при написании CSS стилей;
  • дополнительные временные затраты на создание изображения CSS спрайта из комбинации картинок;
  • необходимость изменения всего изображения при смене одной из его составляющих (например, какой-то иконки).

В принципе, все эти недостатки легко преодолеть, тем более, что преимущества метода весьма полезны для вашего проекта.

Создание CSS спрайтов

Давайте разберемся как использовать спрайты CSS. В теории тут все довольно просто.

  1. Для начала созданный спрайт с изображениями иконок или кнопок помещается в директорию с остальными картинками, используемыми в шаблоне.
  1. Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:urlimage/sprite.png«).
  1. Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута backgroundposition (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, backgroundposition: -47px -50px. Здесь задается смешение вправо и вниз.

Если по какой-либо стороне смещение составляет 0 пикселей, то обозначение «px» допускается опустить. Можно также указать сторону явно, если смещение происходит только по ней. К примеру, background-position: left 35px (смещение влево на 35 пикселей).

Залил на Codepen конкретный пример как сделать спрайт CSS для иконки, у которой при наведении меняется стиль оформления:

Генераторы CSS спрайтов

В принципе, создать CSS спрайт можно вручную в фотошопе (это всего лишь картинка). Но зачем «изобретать велосипед», если для реализации этой цели уже придумано большое количество готовых программных решений. В частности, существуют специальные онлайн-сервисы генераторы спрайтов CSS. Один из самых популярных из них — CSS Sprites.

CSS Sprites

На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».

После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.

После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.

Dan’s Tools CSS Sprite Generator

Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.

CSS Sprites

В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).

Итого. В принципе, все нюансы как сделать CSS спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.

design-mania.ru

Создаем CSS спрайты. Примеры | Интересные задачи верстки

Примерный план статьи.

  1. Что такое CSS спрайты?
  2. Терминология
  3. Особенности использования спрайтов
  4. Практические примеры

Спрайты — это довольно интересная и простая технология. Сейчас я расскажу о ней немного подробнее.

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

Если кратко, то CSS спрайты это несколько картинок в одном файле. Файл один, а изображений внутри него несколько. При этом для посетителя это полностью незаметно. Тому кто просматривает сайт кажется, что он видит несколько отдельных картинок.

Зачем это нужно? Спрайты снижают количество запросов к странице от пользователя и уменьшают общий размер изображений. В итоге посетитель быстрее увидит сайт.

Как это делается? Обычная картинка увеличивается в ширину и высоту, то есть просто на обычной картинке размещаются рядом несколько изображений. Потом каждое отдельное изображение из этого набора подставляется в нужный блок с заданной шириной или высотой таким образом, чтобы все остальные изображения не было видно. Весь набор обрезается и остается только одна картинка. Один спрайт. Все остальные картинки остаются за пределами конкретного блока.

Чтобы было понятнее приведу аналогию. Представьте что вы смотрите в замочную скважину. Вы видите только какой то отдельный кусок помещеняи по ту сторону двери. Если вы чуть сдвинетесь в сторону и будете смотреть в скажину под другим углом, то увидите какой то другой кусок того же самого помещения.

Терминология

Чтобы не путаться давайте сразу обозначим термины:
Спрайт — это одна картинка из файла с несколькими изображениями.
Набор спрайтов — это сам файл с несколькими изображениями.

Особенности использования спрайтов

Когда стоит использовать спрайты? Ответ в общем то один — спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок — jpg, png и gif. У всех этих форматов есть два режима загрузки — это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

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

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

Примеры использования спрайтов

Теперь поговорим о практике применения спрайтов. Я приведу два примера спрайтов — спрайты с маленькими иконками и спрайты с градиентами. Рабочие примеры обоих спрайтов можно посмотреть здесь:
https://verstaem.com/examples/sprites/index.html

Спрайты с иконками

В одном спрайте у меня будут иконки для:

  1. Списка — одна иконка
  2. Ссылок — три иконки
  3. Формы поиска — одна иконка

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

В итоге первый пример будет выглядеть так:

Окончательный вид примера с иконками

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

спрайт с иконками

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

Еще один момент. Последней в списке идет иконка для списка — зеленая стрелка. Почему она именно последняя? Расположение остальных иконок на картинке нам безразлично, но в списке любой пункт может занимать несколько строк и если зеленая стрелка будет где-то посередине, то на следующих строках будут торчать другие картинки. Посмотрите на картинку списка выше, чтобы понять о чем я говорю.

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

<ul>
	<li>Пункт списка</li> 
	<li>Еще один пункт списка</li> 
	<li>Пункт списка</li> 
	<li>Еще один пункт списка,<br /> но в две строки</li> 
	<li>Пункт списка</li> 
	<li>Еще один пункт списка</li> 
</ul>

Это html код списка. Теперь применим к нему наш спрайт:

ul li{
	padding:0 0 0 21px; 
	background:url('sprites.png') 0 -94px no-repeat;
}

Что мы тут сделали? Сделали отступ в каждом <li> от левого края в 21 пиксель, чтобы текст не заслонял картинку. Потом в качестве фоновой картинки ставим sprites.png. Высота всей картинки со спрайтами в данном случае 110 пикселей и зеленая стрелка находится в самом конце. Высота зеленой стрелки 16 пикселей, то есть стрелка начинается после 94-го пикселя от верха картинки. Это означает что фон мы должны сдвинуть на 94 пикселя вверх. В css коде это написано так «0 -94px», то есть сдвинули на 0 пикселей вправо и 94px пикселя вверх.

Закончим со списком. Теперь сделаем примерно так же ссылки:

a[href^="http://ru.wikipedia.org/"]{
	padding:0 0 0 20px; 
	background:url('sprites.png') 0 -42px no-repeat;
}
a[href^="http://yandex.ru/"]{
	padding:0 0 0 20px; 
	background:url('sprites.png') 0 0 no-repeat;
}
a[href^="http://verstaem.com/"]{
	padding:0 0 0 20px; 
	background:url('sprites.png') 0 -21px no-repeat;
}

Что означают селекторы a[href^=»http://verstaem.com/»]? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://verstaem.com/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку — ссылку на мой блог.

  1. Определяем нужную ссылку по href. Этот атрибут у рассматриваемой ссылки должен начинаться со строки http://verstaem.com/. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
  2. Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
  3. Указываем в качестве фонового изображения картинку sprites.png
  4. Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»

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

Домашнее задание

Сохраните мой набор спрайтов. Сохраните файл с пятью иконками. После чего попробуйте сделать форму поиска с иконкой самостоятельно. Нужно сделать так, чтобы слева от формы поиска отображался нужный спрайт из набора. Задание довольно простое, но если возникнут сложности, то готовое решение можно посмотреть здесь, в исходном коде:
http://verstaem.com/examples/sprites/index.html

Спрайты с градиентами

Теперь посмотрим второй пример.

На этой картинке изображено окошко. У окна есть заголовок, тело и подвал. У каждого из этих элементов на фоне установлен градиент. Присмотритесь если этого сразу не видно, там есть переход цвета от бледного к насыщенному.

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты — 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Исходя из таких параметров окна я сделал три разных градиента по 30 пикселей в высоту и 1 в ширину. После чего я объединил все три градиента в один файл. Поставил картинки градиентов друг над другом. В итоге получился файл высотой 90 пикселей и шириной в 1 пиксель. Файл слишком мелкий, в статеьй вы его просто не увидите. Вот тут файл можно открыть отдельно http://verstaem.com/examples/sprites/gradients.png.

Теперь напишем html код окошка:

<div>
	<div></div>
	<div>
		<div></div>
		<div></div>
	</div>
	<div></div>
</div>

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{
	height:30px; 
	background:#C0C0FF url('gradients.png') 0 0 repeat-x;
}

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{
	height:30px;
	background: #C0FFC0 url('gradients.png') 0 -60px repeat-x;
}

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{
	position:relative; 
}
	#window-body-gradient{
		position:absolute; 
		left:0; 
		top:0; 
		width:100%; 
		height:30px; 
		background:url('gradients.png') 0 -30px repeat-x;
	}
	#window-body-text{
		position:relative;
	}

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

<div>
	<div></div>
	<div></div>
</div>

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива — 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

Такие длинные пояснения я делаю, чтобы совсем все было понятно. Но на самом деле если вы немного разбираетесь в верстке, то вам наверное будет достаточно посмотреть сами примеры:
http://verstaem.com/examples/sprites/index.html
В очередной раз продублировал ссылку.

На самом деле можно придумать много примеров по использованию спрайтов. Я показал только два примера, но этих примеров должно хватить для понимания принципов работы спрайтов. Если остались какие то вопросы, то задавайте в комментариях.

verstaem.com

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *