Спрайты css

CSS-спрайты

CSS-спрайт – способ объединить много изображений в одно, чтобы:

  1. Сократить количество обращений к серверу.
  2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
  3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Рассмотрим, как это работает, на примере дерева:

  • Раздел 1 В две строки
    • Раздел 1.1 в одну строку
    • Страница 1.2 в две строки
  • Раздел 2
    В две строки

Сейчас «плюс», «минус» и «статья» – три отдельных изображения. Объединим их в спрайт.

Шаг 1. Использовать background

Первый шаг к объединению изображений в «спрайт» – показывать их через background., а не через тег IMG.

В данном случае он уже сделан. Стиль для дерева:

.icon { width: 16px; height: 16px; float: left;
} .open .icon { cursor: pointer; background: url(minus.gif);
} .closed .icon { cursor: pointer; background: url(plus.gif);
} .leaf .icon { cursor: text; background: url(article.gif);
}

Шаг 2. Объединить изображения

Составим из нескольких изображений одно icons.gif, расположив их, например, по вертикали.

Из,иполучится одна картинка:

Шаг 3. Показать часть спрайта в «окошке»

А теперь самое забавное. Размер DIV'а для иконки – жёстко фиксирован:

/*+ no-beautify */
.icon { width: 16px; height: 16px; float: left;
}

Это значит, что если поставить background'ом объединённую картинку, то вся она не поместится, будет видна только верхняя часть:

Если бы высота иконки была больше, например, 16×48, как в примере ниже, то было бы видно и остальное:

…Но так как там всего 16px, то помещается только одно изображение.

Шаг 4. Сдвинуть спрайт

Сдвиг фона background-position позволяет выбирать, какую именно часть спрайта видно.

В спрайте icons.gif изображения объединены так, что сдвиг на 16px покажет следующую иконку:

/*+ no-beautify */
.icon { width: 16px; height: 16px; float: left; background: url(icons.gif) no-repeat;
} .open .icon { background-position: 0 -16px; /* вверх на 16px */ cursor: pointer;
} .closed .icon { background-position: 0 0px; /* по умолчанию */ cursor: pointer;
} .leaf .icon { background-position: 0 -32px; /* вверх на 32px */ cursor: text;
}

Результат:

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

Отступы

Обычно отступы делаются margin/padding, но иногда их бывает удобно предусмотреть в спрайте.

Тогда если элемент немного больше, чем размер изображения, то в «окошке» не появится лишнего.

Пример спрайта с отступами:

Иконка RSS находится в нём на координатах (90px, 40px):

Это значит, что чтобы показать эту иконку, нужно сместить фон:

background-position: -90px -40px;

При этом в левом-верхнем углу фона как раз и будет эта иконка:

Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка.

Его стиль:

/*+ no-beautify */
.rss { width: 35px; /* ширина/высота больше чем размер иконки */ height: 35px; border: 1px solid black; float: left; background-image: url(sprite.png); background-position: -90px -40px;
}

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

Итого

Решение лучше всего принимать, исходя из принципов семантической вёрстки.

Задайте вопрос – что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?

Элемент IMG следует использовать в первом случае, а для оформления у нас есть CSS.

Спрайты позволяют:

  1. Сократить количество обращений к серверу.
  2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
  3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

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

Далее мы встретимся со спрайтами при создании интерфейсов, чтобы кнопка при наведении меняла своё изображение. Один спрайт будет содержать все состояния кнопки, а переключение внешнего вида – осуществляться при помощи сдвига background-position.

Для автоматизированной сборки спрайтов используются специальные инструменты, например SmartSprites.

Источник: https://learn.javascript.ru/css-sprite

Как использовать спрайты 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 с классом «smile«:

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

Перевод статьи «How to use CSS sprites» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/kak-ispolzovat-sprayty-css.html

Создаем CSS спрайты. Примеры

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

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

Что такое 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 пикселей. Спрайтами можно делать изображения с разными разрешениями, не обязательно чтобы разрешение всех картинок совпдало. При разном разрешении картинок чуть усложняется объединени этих картинок в один файл.

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

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

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы.

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

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

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

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

  • Пункт списка
  • Еще один пункт списка
  • Пункт списка
  • Еще один пункт списка, но в две строки
  • Пункт списка
  • Еще один пункт списка

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

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

Что мы тут сделали? Сделали отступ в каждом

  • от левого края в 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 код окошка:

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

    #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 код тела окна отдельно:

    Как видите в тело у нас вложено еще два дива. Первый «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
    В очередной раз продублировал ссылку.

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

    Источник: https://verstaem.com/markup/css-sprites/

    Что такое спрайты CSS: создание, применение — учебник CSS

    До того, как в CSS появился псевдокласс :hover, создание ролловера — элемента, который меняет свой вид при наведении курсора — реализовывалось через язык JavaScript.

    Сейчас это делается намного проще, но есть один недостаток: если в состоянии :hover (т. е.

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

    Из-за этого может возникать небольшая задержка при появлении картинки в первый раз.

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

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

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

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

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

    Преимущества CSS-спрайтов

    • CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
    • Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
    • Еще одно преимущество хранения множества картинок в спрайте заключается в том, что если у них похожая палитра цветов, то одно большое изображение будет весить меньше, чем отдельные маленькие картинки в сумме.
    • Всё это в целом положительно влияет на скорость загрузки сайта.

    Как создать спрайт из картинок

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

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

    Как пользоваться спрайтами CSS

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

    HTML-разметка выглядит следующим образом:

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

    Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

    a { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }

    Первая строка содержит ссылку на спрайт. По факту, мы задали одно фоновое изображение для всех ссылок. Вторая строка отменяет дублирование фона — здесь оно не потребуется.

    Следующие две строки — высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина — 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.

    Читайте также:  Что такое url

    Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/sprites

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

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

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

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

    Совет

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

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

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

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

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

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

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

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

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

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

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

    1. Для начала созданный спрайт с изображениями иконок или кнопок помещается в директорию с остальными картинками, используемыми в шаблоне.
    1. Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:url(«image/sprite.png«).
    1. Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута backgroundposition (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, background—position: -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 спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.

    Источник: http://design-mania.ru/tools/online/sprite-css/

    CSS спрайты. 10+ генераторов

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

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

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

    Я где-то видел статистику (не вспомню, где, поэтому ссылочку не дам) — от 5 до 40% времени составляет собственно загрузка страницы, все остальное — обработка запросов сервером. Логично предположить, если уменьшится количество запросов — скорость загрузки вырастет пропорционально.

    Давайте чуть подробнее рассмотрим плюсы и минусы использования спрайтов:

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

    • нет задержек при использовании :hover
    • меньший объем скачиваемых файлов, как при обычной загрузке, так и при использовании FTP клиента.
    • гораздо меньшее количество запросов к серверу

    Минусы это технологии:

    • при верстке необходимо указывать не только картинку, но и позицию фрагмента, что не совсем удобно и привычно.
    • увеличение нагрузки на сервер. Большая картинка занимает больше оперативной памяти, учитывая «пустышки» между фрагментами.
    • для изменения одной иконки придется ковырять весь файл, что не слишком удобно. Хотя, может оно и к лучшему

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

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

    Где создать спрайты?

    Project Fondue

    Наверное, самый старый инструмент для создания CSS спрайтов. Отличительная черта — есть русский вариант интерфейса, это удобно. Хорошо настраивается, причем не только создание картинки, но и код CSS. В целом — отличный генератор, рекомендую. Кстати, кроме этого, сервис умеет генерировать фавиконы и рассчитывать права доступа для Unix систем.

    CSS Sprites generator

    CSS Sprites Generator

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

    CSS Sprites

    CSS Sprites

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

    Spritebox

    Spritebox

    Обратите внимание

    Этот сервис отличается от остальных представленных тем, что он не создает картинку спрайта. Вы можете создать ее самостоятельно в Фотошопе или еще где-то, загрузить сюда и сервис поможет с кодом CSS. Достаточно наглядный и удобный интерфейс. Рекомендую для любителей все делать самостоятельно, не доверяя машине<\p>

    Canvas

    Canvas

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

    Stitches

    Stitches

    Сервис написан на HTML5, работает только в Chrome и Firefox, но развитие таких сервисов радует. Веб не стоит на месте и это хорошо Очень простой, минимум настроек. Но, если вы хотите быстрое и простое решение — этот генератор подойдет на 100%

    Spritemapper

    Spritemapper

    Генератор спрайтов для настоящих джедаев Установите программу, укажите путь к CSS файлу со старой версткой и этот сервис все сделает за вас. У него куча возможностей — рекомендую почитать документацию на официальном сайте.

    SpriteCow

    SpriteCow

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

    SpriteMe

    SpriteMe

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

    Spritefy

    Spritefy

    Очень простой, но понятный и удобный генератор. Перетащите картинки, который нужно объединить, расположите их как вам хочется и нажмите кнопку — спрайт и код готовы. Минус этого сервиса — работает только в Хроме и Огнелисе.

    SpriteMeister

    SpriteMeister

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

    Важно

    Надеюсь, теперь вам не страшна работа с CSS спрайтами и ваши проекты будут еще быстрее.

    Удачного дня<\p>

    Источник: http://gering111.com/css-sprite-generators/

    Советы по применению CSS спрайтов

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

    Эта технология предусматривает объединение нескольких изображений в общий файл (спрайт) c последующим выделением его отдельного компонента (изображения), путем ограничения и точного позиционирования видимой области соответствующего элемента с помощью стилевого свойства background-position.

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

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

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

    Что касается компоновки визуальной структуры спрайта, то здесь нужно выделить следующие моменты:

    • Если дизайн вашей страницы предусматривает повторение какого-либо отдельного элемента спрайта (картинки) в определенном направлении (допустим для заполнения фона), то при создании спрайта разместите данную картинку таким образом, чтобы в направлении ее предполагаемого распространения у нее не было соседних элементов. Лучше всего, если этот элемент будет размещен на той стороне спрайта, которая является противоположной направлению повторения этого элемента на странице. Это позволит вам избежать ситуации, когда в качестве фона элемента будет отображаться часть соседнего изображения, предназначенного для других целей.
    • Исходя из рекомендаций предыдущего пункта, следует, что картинки, которые вы планируете распространять на фоне элемента страницы в горизонтальном направлении (CSS свойство background-repeat принимает значение repeat-x) целесообразно разместить по вертикали результирующего спрайт файла, а те которые должны будут распространяться в вертикальном направлении ( background-repeat: repeat-y), соответственно, по горизонтали.
    • Размещение элементов спрайта в зависимости от направления их распространения в фоне целевого элемента.

    • Прежде чем начать разработку спрайта, нужно четко определиться с целью и способом применения каждого отдельного рисунка, входящего в его состав. К примеру, если картинку нужно будет разместить в левой верхней части элемента страницы (в качестве пиктограммы для оформления пунктов меню), то для того чтобы избежать нежелательных дефектов, связанных с увеличением размеров элемента, соответствующая ему картинка должна иметь свободное пространство снизу и справа от нее. Это объясняется тем, что при увеличении размеров, элемент расширяется исключительно в двух направлениях – вправо и вниз. Самым удачным способом в этом случае является ступенчатое расположение иконок («лесенкой»). А если отдельный рисунок предполагается использовать как кнопку с фиксированными размерами, то он может занимать любое место в общей структуре спрайта, которое не противоречит условиям размещения других картинок.
    • Ступенчатое расположение элементов спрайта.

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

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

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

    • В процессе позиционирования, когда вы оперируете значениями CSS свойства background-position, не используйте для этого ключевые слова bottom и right, потому что это гарантированно приведет к ошибке отображения фона элемента в случае увеличения размера спрайта (при вставке в него дополнительных элементов). Так как границы спрайта, относительно которых производится позиционирование, сдвигаются. Корректными значениями свойства background-position в этом случае являются top, left и числа с указанием единиц измерения (px).
    • Не следует применять спрайты для оформления элементов страницы, которые могут значительно изменять свои размеры в различных ситуациях. К таким элементам можно отнести списки (
        и

          ), которые являются блочными элементами HTML разметки, ширина которых может динамически изменяться в зависимости от размера окна браузера, а также предусмотренные адаптивным дизайном «резиновые» изображения.
        • Еще одна тонкость, связанная с размерностью элементов. Если допустим такой элемент веб-страницы, как кнопка имеет фиксированный фон, то в случае увеличения размера шрифта, надпись кнопки может быть частично обрезана границами элемента. Это объясняется тем, что из-за жесткой фиксации фона, размер кнопки не увеличивается автоматически. Для решения этой проблемы рекомендуется область фона элемента (кнопки) разбить на четыре части и назначить каждой из них соответствующую картинку в качестве фона. Как альтернативный вариант решения этой проблемы — можно воспользоваться скриптом, позволяющим динамически изменять размер элемента в зависимости от определенных условий.

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

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

      Источник: http://webknowledge.ru/sovety-po-primeneniyu-css-spraitov/

      Как создать CSS спрайт для сайта 18

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

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

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

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

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

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

      В этом вся суть CSS спрайтов.

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

      Ну, конечно же, для ускорения скорости загрузки сайта. В качестве примера будем рассматривать мой блог. Если посмотреть внимательно, то на моём блоге много элементов дизайна, которые представлены отдельными файлами (изображениями).

      Элементы дизайна, которые можно заменить спрайтом

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

      Так и объём загружаемого изображения снижается и количество запросов к серверу. А следовательно повышается скорость загрузки сайта.

      Какие изображения нужно объединять в CSS спрайты

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

      Здесь же вы сможете увидеть и рекомендации по созданию спрайтов. А точнее рекомендация генератора CSS спрайтов SpriteMe. С помощью данного генератора можно легко создать нужные спрайты. Но мне он не помог, и поэтому пришлось делать всё самостоятельно.

      Как создать CSS спрайты

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

      А за этим каркасом сплошное изображение с множеством графических элементов дизайна. И управляется это изображение при помощи CSS стилей.

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

      Шаг 1.

      После того, как сервис GTmetrix подсказал вам или вы сами определились какие файлы необходимо объединить в спрайты, — следует приступить к созданию спрайта (заготовки).

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

      Сохраняем изображения в отдельной папке

      Вот из этих отдельных изображений мы и будем создавать спрайт.

      Шаг 2.

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

      Итак, открываем графический редактор. Я работаю в фотошопе. Но так как не знаю, есть ли у вас фотошоп, покажу весь этот процесс в онлайн редакторе Pixlr Edition.

      Совет

      Создаём новое изображение с прозрачным фоном. Размер выбирайте так чтобы уместить все изображения. Ну, к примеру, если у вас все изображения 32х32 и 16х16 пикселей и есть одно 380х150, — вот и делайте своё изображение, так чтобы уместить все эти изображения в одном.

      Создаём новое изображение

      И обязательно сделайте прозрачный фон.

      Параметры нового изображения

      Но даже если Вы ошиблись с размером это всегда можно подправить через пункт меню «Изображение» — «Размер изображения».

      Теперь поочерёдно выставляйте все изображения, которые вы приготовили ранее.

      Пункт меню «Файл» > «Открыть изображение». Откроется изображение, выделите его CTRL+Aи скопируйте в буфер обмена CTRL+C. Перейдите к заготовке и вставьте изображение CTRL+V. И так со всеми изображениями.

      Должно получиться нечто подобное.

      Предварительный результат

      Теперь следует обрезать всё лишнее. Для этого используйте инструмент «Обрезка».

      Когда заготовка готова, сохраняем её в PNG формате и половина дела готова. Пункт меню «Файл» > «Сохранить». Не забудьте про формат.

      Шаг 3.

      Теперь изображение нужно загрузить на хостинг в папку с изображениями темы:

      http://vashdomen/wp-content/themes/vahatema/images/

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

      Загрузку файла на хостинг можно сделать через файловый менеджер хостинга, в моём случае это Спринтхост. Или через FTP-соединение. Это уже на ваше усмотрение.

      Шаг 4.

      А вот теперь начинается самое сложное, нужно заменить изображения шаблона – спрайтом. В качестве примера, возьмём на моём блоге заголовки блоков в сайтбаре и исследуем код элемента.

      Для этого нужно нажать правую кнопку мыши на нужном элементе и в контекстно-зависимом меню выбрать пункт «Посмотреть код элемента» (для Chrome) или «Исследовать элемент» (для Firefox).

      Примерно так и для других браузеров.

      Исследование элемента в шаблоне

      Обратите внимание

      Здесь Вы можете видеть HTML код и CSS стили. То есть вы видите файл, отвечающий за вывод стилей и номер строки где искать класс, отвечающий за данный фрагмент. Из скриншота понятно, что класс sidebar и именно заголовок h2, расположен в файле style.css на 339 стоке. Вот именно здесь и нужно вводить все необходимые изменения стилей.

      Но уже здесь в окне исследования элемента Вы можете поэкспериментировать со стилями и подобрать нужный. После чего вам нужно будет просто перенести эти стили в файл style.css.

      Пример применения параметров

      Шаг 5.

      Прежде чем приступить к данному шагу, настоятельно рекомендую сделать резервную копию файла style.css.

      Теперь ваша задача открыть файл style.css и внести нужные изменения. Вы можете сделать это при помощи Notepad++ (очень удобный редактор, и отображает номер строки) или через редактор в административной панели WordPress.

      Итак, открываем административную панель WP– «Внешний вид» > «Редактор» > «style.css». Так как здесь нет нумерации строк, следует искать нужное место при помощи поиска CTRL+F и вводите искомый CSS класс (в моём случае — sidebar h2).

      Внесение изменений в код style.css

      Нужно всего лишь изменить название файла изображения и ввести параметры положения относительно оси координат. Если у Вас не так как у меня на скриншоте, то вы должны понимать, что за вывод изображения (фона) отвечает параметр: background: url(‘images/spriteme.png’);

      А за позицию изображения отвечает параметр: background-position: -0px -0px; с отрицательными значениями. Первое число это смещение по оси Х, второе – смещение по оси Y.

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

      Важно

      На этом создание CSS спрайтов для сайта закончено. Следуйте инструкциям и у вас всё получится.

      В ближайшее время запишу видеоурок, в котором постараюсь подробно показать и рассказать о создании CSS спрайов.

      А вот и обещанный видеоурок:

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

      На этом у меня сегодня всё. Друзья, всем желаю удачи!

      С уважением, Максим Зайцев.

      Источник: https://1zaicev.ru/kak-sozdat-css-sprajt-dlya-sajta/

  • Ссылка на основную публикацию