CSS спрайты. Создание и использование спрайтов

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

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

О том, как можно создать спрайт и применить его на практике, вы узнаете из данного видеоурока.

Смотреть видеоурок

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (4)

Marina 16 декабря 2015 г. в 12:31

Интересно узнать про сервисы по спрайтам !

Ответить

Наталия 12 марта 2014 г. в 13:15

Спасибо за полезный урок!
Александр, а могли бы вы рассказать, как сделана отметка о том, что статья содержит видеоурок на миниатюре к вашим постам? Интересно, как это можно реализовать с WordPress. Может быть это специальный плагин?
Поделитесь, пожалуйста.

Ответить

Геннадий 28 марта 2014 г. в 16:45

Наталия,
Смотрите дальше статьи... Об этом у Александра также есть видеоурок:
Всплывающие подсказки на jQuery... Ну, а миниатюра делается легко в Фотошопе 🙂

Ответить

Наталия 5 апреля 2014 г. в 14:36

Геннадий, мой вопрос был связан именно с реализацией на WordPress, а не с тем, как нарисовать картинку.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

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

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад