CSS и спрайты. Для чего нужны, какие бывают и как пользоваться спрайтами. Научитесь ставить координаты для составных элементов спрайта и выводить.
Современный веб одним из приоритетов ставит скорость и оптимизацию сайтов.
Так одним из методов оптимизации является использование на сайте изображений называемых спрайтами.
Что такое спрайт, когда, зачем и как их используют, я постараюсь вам объяснить в этой записи.
Спрайт это
Спрайт — это одно изображение, которое объединяет в себе два и более изображений.
Основная идея использование спрайтов — это сократить количество запросов к серверу, тем самым уменьшив время загрузки страницы сайта. А уже при помощи CSS можно вывести любой фрагмент из спрайта в нужном нам месте. При этом размер у объединённого изображения (у спрайта) будет меньше, чем сумма размеров исходных картинок.
Если мы рассмотрим спрайт который я привёл выше в качестве примера, то он состоит из 60-ти иконок. Всего одним запросом спрайт загружается в браузер вместо 60-ти (если загружать каждую иконку по отдельности), а при помощи CSS мы можем вывести любую из иконок входящую в спрайт в нужном нам месте, при чём можем выводит одну и ту же иконку много раз.
Использование спрайтов
Думаю всем понятно, что веб-страница содержащая много изображений, будет загружаться долго, генерируя при этом много запросов к серверу. Использование спрайтов уменьшает количество запросов серверу, в результате снижая время загрузки страницы сайта и сокращая потребляемый пользователем трафик.
Спрайты можно использовать в самых разных местах, но наиболее распространённые случаи когда через спрайт выводят иконки для пунктов меню, разные кнопки и соцсети. Так же спрайты можно использовать в анимациях, играх и ещё много где.
Как пример на этом сайте можно посмотреть форум, где иконки разделов форума это и есть кусочки одного изображения спрайта.
Как работают спрайты
Спрайты работают напрямую через CSS.
Чтобы вывести изображение из спрайта, нужно задать к элементу в HTML class и в CSS задать этому классу стили.
Обязательные для спрайтов стили CSS :
background: url() — задаём путь к изображению (спрайту)
background-position — координаты выводимого фрагмента из спрайта
width и height — задаём размер (ширину и высоту) выводимого фрагмента
Пример вывода иконок из спрайта
Я возьму спрайт который был выше в примере и сделаю из него меню. Чтобы не липить шестьдесят пунктов меню, возьму пять пунктов, иконки которых будут из разных участков спрайта.
Итак, создаём меню у которого HTML следующего вида:
Получится следующий результат:
Теперь добавим к каждому из пунктов класc. В примере я специально назову класс длинным названием demoSpIcon, чтобы у меня в основных стилях сайта такое название больше никогда не вылезло, вы же можете называть классы как вам удобно:
Для заданного класса demoSpIcon пропишем CSS стили, где:
- сразу к имени класса добавим псевдокласс ::before
- бекграундом зададим ссылку на спрайт который выложен выше как примером
- размер я подобрал в консоле браузера, он равен 38px в длину и ширину
Как видно, возле пунктов появилась иконка, но у всех одна и не соответствует названию пунктов меню.
Всё дело в том, что из спрайта был взят фрагмент с нулевыми координатами и поэтому вывелась первая верхняя иконка.
Так как в спрайте все иконки из набора одинаковые по размеру, мы прописали через CSS для класса demoSpIcon те стили, которые будут повторятся для каждой иконки.
Теперь через пробел добавим к каждому пункту по классу с индивидуальным названием, к которым зададим координаты на спрайте:
и добавим стили с соответствующими координатами иконок:
Как видим теперь возле пунктов отображаются нужные иконки из спрайта.
Дальше можем делать всё что захотим. Например, чтобы теперь сделать из нашего вертикального меню горизонтальное, мы к тегу ul добавим класс horizont и в CSS пропишем для него стили.
Получится следующий HTML макет:
А стили CSS теперь будут выглядеть так:
Как видим — получилось горизонтальное меню с иконками.
Единственное что я упустил — это ссылки на пунктах меню. Я их не ставил чтобы они не мешали. Чтобы добавить ссылки, переделываем конструкцию на пунктах меню вот так:
Координаты спрайта
Координаты спрайта подбираются через консоль браузера. Для этого наводим курсор мышки на пункт меню где нужно определить координаты и жмём правую кнопку мышки.
В меню выбираем Исследовать элемент (браузер мазила) или Просмотреть код (в гугл-хром).
В консоле в поле HTML-кода выделяем псевдокласс ::before после чего в поле со стилями видим наш CSS класс отвечающий за вывод координат (background-position). Подбираем координаты — выделяем координату и стрелками вверх/вниз на клавиатуре ищем нашу иконку.
Обратите внимание что для спрайтов принято брать минусовые значения координат. После того как координаты нашли, копируем и вставляем их в CSS
Анимация из спрайта
Так же спрайты используют для анимации.
Например возьмём вот такую картинку-спрайт, которая состоит из шести фрагментов
Теперь в HTML вставим div с айдишником marsch
и пропишем следующие CSS стили:
То в результате получим вот такого идущего человечка:
Знаешь ответ или есть вопрос? Зарабатывай на этом! Зарегистрируйся и получи 45 ₽ прямо сейчас.
Спрайт может содержать в себе один или несколько объектов или эффектов, таким образом, назначение этого объекта – объединение группы объектов в один и применение эффектов сразу же ко всей группе.
Trim the edges – задает способ использования спрайта. Спрайт может использоваться в двух режимах: простая группировка объектов, группировка с возможностью применения эффектов. Во-втором режиме объекты спрайта, выходящие за его границы, не будут отображаться, а также возможно применение различных эффектов к спрайту.
Show effects – опция действует только в режиме редактирования и включает/отключает эффекты при редактировании спрайта. Доступна только, когда включен режим «Trim the edges».
Fill background – свойство указывает надо ли закрашивать задний фон спрайта каким либо цветом. Если вам нет необходимости использовать прозрачность в спрайте, то рекомендуется выставлять это свойство, т.к. это значительно повысить скорость обработки видео.
Компания Флэш-Интегро объявляет о выходе новой версии любимой пользователями программы редактирования видео VSDC Free Video Editor 3.3. В обновлении улучшена работа с видео и аудио, что позволило добиться великолепного качества эффектов и отрисовки. Работать с приложением стало проще, благодаря многочисленным изменениям в интерфейсе программы. Добавлено множество новых спецэффектов.
В новой версии VSDC Free Video Editor, выпущенной компанией Флэш-Интегро, парадигма нелинейного редактирования видео получила серьезное количественное и качественное улучшение. Во-первых, значительно переработан сам редактор и визуальный редактор параметров объектов. Во-вторых, появилась возможность эффективно совмещать объекты спрайта и наложенные на него эффекты, что позволило значительно повысить качество отрисовки. Кроме того, любой объект теперь может быть быстро преобразован в спрайт. Добавлены более функциональные меню, а также введено быстрое переключение между параметрами объекта для моментальных правок во внешнем виде или поведении объектов, и удобный просмотр взаимосвязанных параметров.
В-третьих, программная часть, отвечающая за эффекты, получила пополнение в виде новых и улучшенных спецэффектов: “Порог цветности”, “Уменьшение разрядов цветности”, группа новых телевизионных эффектов, включая различные шумы, старую пленку и царапины на пленке. Улучшена и работа со звуком: VSDC Free Video Editor теперь может нормализовать громкость аудио, а также разбивать видео-файл на два отдельных объекта: видео и аудио.
Традиционно, новая версия VSDC Free Video Editor привнесла множество улучшений пользовательского интерфейса. Добавлена поддержка итальянского и японского языков. Итак, новая версия не просто добавила пару новых эффектов, но вывела редактирование видео в домашних условиях на еще более простой и доступный уровень.
Цена и условия использования
Видеоредактор доступен через веб-сайт компании “Флэш-Интегро” (http://www.videosoftdev.com). Продукт является бесплатным и работает с ОС Microsoft Windows 2000, XP, 2003, Vista, Windows 7, 8 и 10.
ООО “Флэш-Интегро” — это компания, разрабатывающая программное обеспечение и специализирующаяся на разработках продуктов в области аудио и видео редактирования. Среди продвигаемых продуктов компании можно найти такие программы как Видео Редактор, Аудио и Видео Конвертеры, Аудио Граббер и прочие. Все продукты бесплатны.
