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

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

A.facebook { background-position: left top; }

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

A.twitter { background-position: -100px top; }

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

A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:

A:hover { background-position-y: bottom; }

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):

A { transition: all 0.2s ease-out; }

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

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

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

CSS спрайт - это комбинированное изображение, в котором находится много различных картинок, и с помощью свойства background-position мы выставляем нужную картинку в нужном месте. Допустим, у нас есть кнопка, и эта кнопка меняет свой вид при наведении на неё курсора мыши. Можно сделать, например, 2 картинки и затем подставлять в качестве фона кнопки ту или иную картинку. Но недостаток данного способа очевиден: в 2 раза больше файлов, примерно в 2 раза больше размер, следовательно, в 2 раза больше время загрузки, чем 1 изображение. И вот техника CSS спрайтов позволяет создать всего лишь одну картинку, в которой будут сразу 2 фона кнопки.

Чтобы стало понятнее, давайте решим эту задачу. У нас имеется изображение, допустим, высотой 20 пикселей и шириной 100 пикселей. Кнопка имеет ширину 50 пикселей и высоту 20 пикселей. В одной картинке мы помещаем изображения обоих состояний (друг за другом). HTML-код будет таким:

Кнопка

И CSS-код :

A {
background: url("button.jpg") no-repeat left top; // Фон кнопки
display: block; // Сделать блочным элементом
height: 20px; // Высота кнопки
width: 50px; // Ширина кнопки
text-decoration: none; // Убрать черту подчёркивания
}
a:hover {
background-position: right top; // Меняем позицию фона, чтобы было смещение изображения
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Зачем нужен спрайт на сайте?

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

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

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

Ну и в-третьих, это просто красиво, упорядоченно и современно.

Принцип работы спрайта на сайте

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

А теперь вспоминаем начальные титры нашего старого советского фильма про Шерлока Холмса и доктора Вастона. Там, если вы помните, на кучу перемешанных букв наводили черный трафарет с прорезями и через них становился виден вполне читаемый текст.

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

Как выбирается? Легко и просто!

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

Button {
width: 180px;
height: 20px;
background: url(sprite.png) no-repeat;
background-position: 0 -80px;
}

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

background-position: 0 -80px;

Она как раз и указывает браузеру координаты нужной части изображения. Координаты задаются для левого верхнего угла выбранной части изображения. Первое число означает расстояние по горизонтали, второе - по вертикали.

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

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

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

Указав в качестве второго значения отрицательное число, мы тем самым как бы «подтягиваем» весь спрайт на 80 пикселей вверх. А так как ранее мы строго задали размер видимого изображения 180х20 пикселей, то будет виден не весь спрайт, а только нужная нам кнопка:

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

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

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

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

Если перед вами компьютерная игра на мониторе, то что вы видите перед собой? Графическую оболочку данного проекта, разнообразные текстуры, составленные из крошечных пикселей. Если вы планируете создавать компьютерную игру, то вам предстоит много работать с графикой. Но если вы пока что не замахиваетесь на крупный проект, то от вас не требуется идеальной работы с графическими 3D-редакторами. Здесь вам помогут спрайты для игр, которые вы можете скачать в интернете. Но что же это такое? Как их можно использовать и чем это облегчит вам задачу? Спрайты для игр - это готовые текстуры персонажей, предметов и так далее, которые вы можете загрузить на свой компьютер, а затем использовать в процессе создания игры. Это значит, что вам не нужно будет отрисовывать каждый объект в игре, а также каждую фазу его движения - все это уже будет у вас в готовом виде. Как видите, спрайты для игр действительно значительно могут облегчить вам жизнь.

Вид спрайтов

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

Использование спрайтов

Как вы прекрасно понимаете, в большинстве случаев вы сможете найти спрайты для игр 2D, так как трехмерные изображения не столь стандартизированы, поэтому понадобится очень много места, чтобы передать все движения одного трехмерного объекта. В то же время работа с двухмерными спрайтами крайне проста. Вам нужно просто загружать спрайты в редактор, в котором вы творите, и склеивать их, создавая эффекты движения. А затем загружать в уровень и наслаждаться результатом.

Переход от спрайтов к графике

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