# Спрайти и картинки | |
## Спрайты | |
Compass может создавать спрайты только из png изображений. | |
1. На сайте используются спрайты. Все изображения оформления должны быть добавлены в один из дефолтных спрайтов, кроме иллюстративных, больших или встречающихся на сайте очень редко. Для некоторых компонентов могут быть созданы отдельные спрайты, чаще всего это касается секвенций. Например, для прелоадера. Дефолтные спрайты | |
1. img/elements — устаревший, в него не надо ничего добавлять | |
2. invariant/elements — для картинок не изменяющихся на различных разрешениях | |
3. responsive/XXXX/elements — для responsive картинок | |
О подготовке responsive картинок будет описано ниже, но пока скажем только, что вручную файлы в папку responsive/XXXX/elements класть не надо. | |
Допустим картинка на месте. Для создания спрайтов используется конструкция | |
$elements: sprite-map( ‘elements/*.png’, $layout: $elements-layout-type ) | |
$elements-layout-type при разработке vertical, при билде smart. Подробнее в документации к compass. | |
Теперь в переменной $elements наш спрайт. Картинку для фона мы можем назначить по её имени | |
background: sprite( $elements, close ) | |
background-position: sprite( $elements, close ) // задаст только позицию | |
Работа со спрайтами занимает у Compass’а много времени, поэтому в целях минимазации его работы со спрайтами, такое прямое обращение использовать нельзя. | |
Вместо этого в проекте генерятся классы расширения на основе спрайтов. | |
В файле extends/elements.sass описаны все elements-спрайты. Допустим мы положили картинку в кукую-либо папку elements, теперь надо добавить её в соответсвующий список генерации. Их всего три: | |
$elements-list – старый, не добавлять ничего | |
$elements-responsive-list — для responsive картинок, в итоге класс сам будет подменять картинку на разных разрешения | |
$elements-invariant-list — для инвариантных к размерам окна картинок | |
Эти переменные это просто сасс списки, где названия картинок перечислены через запятую | |
$elements-responsive-list: logo close arrow-bottom arrow-top arrow-left arrow-right whistle card gate switch | |
Если наша картинка называется icon-social, просто добавляем её в конец списка, допустим она responsive | |
$elements-responsive-list: logo close arrow-bottom arrow-top arrow-left arrow-right whistle card gate switch icon-social | |
Для нас будет сгенерировано два класса | |
%element-responsive-icon-social — естественно задан фон, но дополнительно прописаны width и height равные размерам картинки | |
%element-responsive-icon-social-centered — картинка отцентирована, т. е сдвинута top=left=50% и обратно на половину ширины и высоты. | |
Что же делать, если иконка внутри кнопки, у которой размер другой? Ведь тогда будут видны другие картинки из спрайта. Все просто, используем псевдо-элементы. Например, | |
.social-button | |
width: 100px | |
heigth: 30px | |
position: relative/absoulte/fixed // главное не static, иначе картинка будет позиционироваться относительно одного из родителей, а не кнопки | |
&:after | |
@extend %after-block // класс расширения, задающий пустой content и display: block | |
@extend %element-responsive-icon-social-centered | |
Все, теперь картинка на разных разрешениях будет менятся сама. | |
Аналогично, для инвариантных картинок | |
%element-invariant-icon-social | |
%element-invariant-icon-social-centered | |
P.S. размеры блоков основанные на картинок, должны быть прописаны не врунчую, а на основе размеров картинки. Пример: | |
.illustration | |
width: image-width( ‘invariant/illustration.png’ ) | |
height: image-height( ‘invariant/illustration. png’ ) | |
Путь задается отновительно папки img. | |
## Подготовка адаптивных изображений | |
1. Картинки режутся из макета на 1600. Кладутся в папку img/responsive/originals. Если это отдельная картинка, которой не место в спрайте то просто так или в подпапку соответсвующую, если её стоит добавить в дефолтный спрайт, то в папку elements. | |
2. В консоли выполняется таск | |
grunt responsive_images | |
После этого картинка пропорционально отресайзится и попадет в папки img/responsive/1000, img/responsive/1200, img/responsive/1400, img/responsive/1600, в соответсвующую подпапку. | |
3. Если это был спрайт, осталось добавить название картинок в переменную $elements-responsive-list в файле extends/_elements.sass. И применить её к объекту, через расширение @extend %element-responsive-* | |
> Written with [StackEdit](https://stackedit.io/). |
основные техники и полезные инструменты / Хабр
Использование 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 — приложение-генератор для Мака
Использованные материалы и полезные ссылки:
- CSS Sprite Sheets: Best Practices, Tools and Helpful Applications — tutplus. com
- CSS Image Sprites — w3schools.com
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them — css-tricks.com
- Using CSS Sprites to optimize your website for Retina Displays — Maykel Loomans
Спрайты. Урок 2 курса «Программирование в Scratch»
Слово «спрайт» часто используется в программировании игр для обозначения фигурок героев и предметов. Такие фигурки – это на самом деле рисунки или фотографии, то есть компьютерная графика.
Однако спрайт – не только картинка, это объект, наделенный программным кодом и как следствие свойствами и способностями. Со спрайтом можно взаимодействовать как с виртуальной сущностью, отдавать ей команды и получать от нее данные.
Кот в Scratch – не единственный объект-спрайт. Добавить на сцену другие можно несколькими способами: загрузить картинку с компьютера, нарисовать в самой среде программирования, выбрать из библиотеки. Для всего этого в Scratch предусмотрено специальное меню, которое находится внизу справа на панели спрайтов:
Пока ограничимся тем, что будем выбирать готовые спрайты из библиотеки. Для этого надо нажать лупу. Откроется библиотека, где можно найти подходящего героя.
После клика по нему он появится на сцене. Также на панели спрайтов под свойствами появится его иконка. Рядом с иконкой кота. Свойства объекта, где вы задаете ему имя, положение, размер и поворот, отображаются только для того спрайта, который выделен.
Если вы захотите удалить один из спрайтов, кликните по его иконке под свойствами. Этот спрайт станет выделенным, выбранным, иконка обрамится синим цветом и у нее появится крестик, кликнув по которому можно убрать спрайт из игры.
Когда в Scratch мы собираем блоки в программный код, этот код не существует в прострации сам по себе. Чаще всего он относится к какому-то спрайту. Другими словами, у каждого спрайта свой программный код, своя программа, свое предназначение. Герои могут «общаться» между собой через сигналы, которые посылают друг к другу. Но это другая история.
Сейчас надо запомнить, что когда мы работаем с блоками, следует обращать внимание на то, какой объект выделен. В Scratch появляется подсказка в верхнем правом углу поля редактора кода. Там бледным цветом отображается фигурка выделенного на данный момент спрайта. А значит весь код, который вы видите в рабочей области, относится только к данному герою.
Когда выделяется другой спрайт, то код предыдущего становится невидимым.
Нередко код одного спрайта оказывается похожим на другой. Например, оба героя ходят по сцене, просто с разной скоростью и в разные направления. Собирать два раза почти одинаковую комбинацию блоков – не слишком удачное решение. Проще скопировать программу одного спрайта, добавить ее другому, а потом немного изменить.
В Scratch копировать собранные в программу блоки можно как в пределах одного проекта, так и переносить копию в «рюкзаке» из одного проекта в другой. Рюкзак находится внизу интерфейса среды разработки.
Допустим, у нас есть проект под названием «Проект 1», где мы составили программу движения кота туда-сюда. Мы хотим скопировать этот код в «Проект 2». Тогда мы заходим в первый проект, открываем рюкзак и перетаскиваем сюда конструкцию блоков.
При этом надо помнить правило: переносится участок кода от верхнего блока, за который мы держимся, и блоки, расположенные ниже него. Если вы взялись за блок, расположенный где-то в середине программы, то верхние блоки оторвутся и не будут захвачены.
Положив в рюкзак программу, мы возвращаемся во второй проект. Выделяем спрайт, которому хотим добавить код. Открываем рюкзак и достаем из него нашу программу.
Чтобы скопировать программу одного спрайта на другой в пределах одного проекта, достаточно захватить код и бросить его на иконку другого спрайта, которая расположена под свойствами на панели спрайтов.
Если надо скопировать код в пределах одного спрайта, надо кликнуть по конструкции правой кнопкой мыши и в контекстном меню выбрать «Дублировать».
Также обратите внимание на пункт «Добавить комментарий». Программисты часто пользуются комментариями, чтобы пояснить себе и остальным, что делает та или иная часть программы. Ведь при взгляде на сложный код не всегда сразу можно понять, для чего он, и как все это работает.
Когда на сцене обитают несколько спрайтов, становится важным их положение относительно друг друга, их место на сцене. Как вы уже должны были понять, изучая панель свойств спрайта, положение героя задается координатами, то есть точкой на плоскости.
В Scratch начало отсчета, то есть точка с координатами (0; 0), находится в центре сцены. Общая ширина сцены составляет 480 точек. Это значит, что координата x может принимать значения от -240 до 240. Общая высота сцены составляет 360 точек. Это значит, что координата y может принимать значения от -180 до 180.
Хотя работу с фонами мы будем изучать позже, добавим на сцену координатную сетку. Это поможет нам сориентироваться в системе координат Скретча. Чтобы выбрать фон из библиотеки, надо нажать на лупу в меню сцены, которое находится в нижнем правом углу окна, на панели «Сцена».
Откроется библиотека фонов, прокрутите ее в самый низ и выберите фон «Xy-grid». На сцене появится координатная сетка.
Давайте уменьшим размер наших спрайтов раза в два, то есть примерно до 50%, чтобы они не занимали большую площадь сцены, а больше походили на точку. Теперь поиграем с их координатами. Для этого можно менять значения x и y на панели свойств и смотреть, где после этого окажется герой. Или просто перетаскивать мышью спрайт на сцене и смотреть как меняются x и y в свойствах.
Например, если x = 0, y = 150, спрайт окажется в центре по горизонтали и вверху по вертикали. Если x = 200, y = 0, то спрайт окажется справа по горизонтали и в центре по вертикали.
На самом деле не обязательно до запуска программы устанавливать спрайты в нужное место с помощью мыши или панели свойств. Обычно это делают программно, с помощью специальных блоков кода, находящихся в разделе «Движение». Одним из управляющих местоположением блоков является команда «перейти в x: … y: …». Вместо точек указываются желаемые координаты.
Эта команда быстро перебрасывает спрайт в заданную точку, поэтому ее часто используют в начале программы:
В приведенном примере, где бы ни стоял на сцене спрайт до запуска программы, как только будет нажат зеленый флажок, герой тут же окажется в точке (0; 50).
Отметим напоследок про слои. Наше пространство не двумерное, как плоскость, а трехмерное. У нас есть высота, ширина и длина. Хотя Scratch позволяет создавать только двумерные анимации, на самом деле даже в 2D-анимации есть своего рода третье измерение. Это слои.
Пусть по сцене перемещаются два спрайта. Что будет когда их координаты совпадут? Ничего. Они не столкнуться и не затормозят друг друга. Один спрайт пройдет как бы позади другого, а другой – поверх первого. Каждый живет на своем слое плоскости и ему нет дела до другого.
Однако бывает важно, слой какого спрайта расположен выше, то есть впереди. Посмотрите на рисунок:
Слева слой ракеты расположен выше, слоя кота. Справа, наоборот, кот находится над ракетой.
В Scratch изменить очередность слоев можно как мышкой на сцене, так и с помощью блоков кода. Чтобы это сделать первым способом, надо взять тот спрайт, который должен быть над, и кинуть его на спрайт, чей слой должен быть под.
Блоки изменения очередности слоев находятся в фиолетовой секции «Внешний вид». Это команды «перейти на передний/задний фон» и «перейти вперед/назад на … слоя».
Задание
Составьте программу, в которой один спрайт постоянно ходит за указателем мыши, а второй – находится в центре сцены и, стоя на одном месте, медленно крутится по часовой стрелке. Слой первого объекта должен быть над слоем второго.
Для выполнения задания потребуются две дополнительные команды – «повернуться к указатель мыши», «повернуть по часовой стрелке на … градусов» (вместо слов «по часовой стрелке» на блоке изображена дуговая стрелка).
Как использовать спрайты CSS? | Impuls-Web.
ruКатегория: Сайтостроение, Опубликовано: 2018-02-19
Автор: Юлия Гусарь
Здравствуйте, дорогие друзья и коллеги!
Вы уже используете css спрайты на своих сайтах? Если ещё нет нет, или только начинаете то эта статья для вас. В ней вы узнаете что это такое, зачем они нужны, почему их нужно использовать и как это правильно делать.
Навигация по статье:
- Что такое спрайты css и зачем они нужны?
- Зачем использовать CSS спрайты?
- Использование 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; /*смещение фона по горизонтали и вертикали*/ }
1 2 3 4 5 6 | .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; /*смещение фона по горизонтали и вертикали*/ }
1 2 3 4 5 6 | .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; /*смещение фона по горизонтали и вертикали*/ }
1 2 3 4 5 6 7 8 9 10 11 12 | . 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.Подготавливаем спрайт с двумя картинками
- 2.Задаем верхнее изображение в качестве фона
.smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }
1
2
3
4
5
6
.smile {
width:75px; /*ширина блока*/
height:75px; /*высота блока*/
background:url(images/smile. png)no-repeat; /*задаём фоновую картинку*/
background-position: 0px 0px; /*начальная позиция блока*/
}
- 3.Задаём смещение фона при наведении
.smile:hover { background-position: 0px -80px; }
.smile:hover {
background-position: 0px -80px;
}
Получится вот так:
Наведи на меня! - 4.Для интереса можно ещё задать CSS свойство:
transition: all 0.5s ease;
transition: all 0.5s ease;
Его добавляем и к селекторам .smile и .smile:hover и получаем довольно интересный эффект при наведении, а заодно и наглядно видим как происходит смещение фона.
В итоге получится так:
В общем полезная штука эти CSS спрайты, но готовить и редактировать их довольно сложно!
К счастью, для облегчения этой задачи существуют специальные онлайн генераторы спрайтов.
Удобный генератор спрайтов CSS
Одним из таких сервисов является генератор спрайтов www.toptal.com
Для генерации спрайта нам нужно:
- 1.Переходим по ссылке и нажимаем на кнопку «CHOOSE FILE»
- 2.Загружаем с компьютера заранее подготовленные изображения, которые нужно объединить в спрайт и наживаем кнопку «Открыть».
Можно выбирать сразу несколько зажав кнопку CTRL на клавиатуре.
- 3.Получаем готовый спрайт и фрагменты CSS кода, с указанием параметров смещения для каждого изображения! Скачиваем его себе на компьютер, нажав на кнопку «DOWNLOAD»
- 4.Далее загружаем полученный спрайт CSS на свой сайт. Это можно сделать через файловый менеджер на вашем хостинге или использовать FTP клиент FileZilla, для которого я недавно писала статью с инструкцией. Вот ссылка: «Как пользоваться FTP-клиентом FileZilla?»
- 5.Теперь для блоков, в которых вам нужно задать фоновое изображение, из спрайта используем указанные CSS свойства
Класс вы можете использовать тот же что и здесь или задать свой.
- 6.Так же вы в любой момент можете удалить или добавить изображения на созданный спрайт.
Для этого существуют специальные кнопки:
После редактирования готовый спрайт CSS нужно по новой скачать и загрузить на свой сайт с заменой предыдущей версии файла.
Конечно же, это не единственный генератор спрайтов, но мне он очень понравился из-за своей простоты. В нём нет ничего лишнего и, в то же время, есть всё что нужно.
Если вы используете какие то более удобные генераторы спрайтов пишите их названия в комментариях.
Надеюсь моя статья помогла вам разобраться в теме спрайтов CSS! Оставляйте свои комментарии и делитесь статьёй в соцсетях. Вдруг мы с вами не одни такие сумасшедшие и тема CSS спрайтов будет интересна ещё кому то 🙂
Успехов вам! До скорой встречи в других моих статьях!
С уважением Юлия Гусарь
Примеры спрайтов. Что такое CSS-спрайты? Спрайты с иконками
В разделе новостей мной был анонсирован перевод интерфейса генератора спрайтов – бесплатной браузерной программы, которая предназначена для создания CSS спрайтов, реализующих новую прогрессивную технологию увеличения скорости загрузки веб-страниц. В этом обзоре будут рассмотрены ещё две три программы для автоматического создания (генерации) спрайтов, которые эффективно и эффектно объединяют изображения в спрайты CSS. Описываемые программы позволяют не только легко и просто сделать css спрайты, но и создают сниппеты стилей с координатами спрайтов, что даёт возможность также легко и просто разместить css-спрайты на веб-странице.
Но сначала немного о CSS спрайтах. Их часто также называют веб-спрайтами (web-sprites), html-спрайтами (html-sprites). Первый раз с этой технологией я столкнулся, когда решил проверить скорость загрузки своих страниц. Страницы у меня небольшие, особенно ничем не перегружены и открываются достаточно быстро. И всё же хотелось проверить. Инструмент Page Speed от Google и аналогичный YSlow от Yahoo выдали мне список рекомендаций по увеличению скорости загрузки страниц. В числе этих рекомендаций было пожелание объединить изображения, размещенные на сайте, в спрайты. Так началось моё знакомство с CSS-спрайтами.
Что же это такое – css спрайты, и как их использовать? Основой метода является объединение множества картинок, размещённых на веб-странице в одну составную мозаичную картинку. Главным условием создания и использования css-спрайтов является наличие возможности использования этого множества картинок как фоновых вставок на странице. Как правило, эти картинки представляют собой различные логотипы, иконки, кнопки и другие графические элементы навигации и управления. Если эти картинки можно использовать не только как графику с тегом , но и как фоновые изображения со стилевым оформлением background-image: url (xxxxxxxx…) , то создание и использование css-спрайтов напрашивается само собой (замечу, что упомянутая возможность имеется почти всегда). Некоторые источники (как забугорные, так и отечественные) называют целевую составную картинку мастер-спрайтом, иногда спрайт-листом. Этой терминологии буду придерживаться и я. Дальнейшее использованием конкретной нужной нам картинки из мастер-спрайта на веб-странице осуществляется при помощи позиционирования средствами CSS. Вся фишка этой технологии состоит в значительном уменьшении HTTP-запросов на загрузку изображений. Вместо нескольких (порой десятков и более) запросов на загрузку туевой хучи отдельных картинок остаётся только один запрос на загрузку этой составной мозаичной картинки. Несмотря на больший размер этой картинки, время её загрузки несравненно меньше времени, потребного на множество HTTP-запросов для одиночных картинок и их загрузку. Использование css-спрайтов позволяет увеличить скорость загрузки картинок в разы, соответственно сама страница, где используются спрайты CSS, открывается в браузере намного быстрее. Дополнительной изюминкой этого метода является очень простая реализация rollover-эффекта изображений без применения скриптов (только средствами CSS), что может пригодиться для создания эффектных и стильных меню, кнопок управления и других графических элементов, используемых на веб-сайтах.
Кстати, о CSS. Использование на странице отдельных конкретных картинок, из которых состоит объединённое составное изображение, осуществляется с помощью свойства background-position . Это свойство определяет положение фоновой картинки в элементе, используемом для ее размещения, по горизонтали и вертикали. Значениями свойства могут быть ключевые слова или значения, указанные в пикселях или процентах. При использовании css спрайтов обычно применяются точные значения в пикселях. Первое значение – координата по горизонтали (х), второе – по вертикали (у). Согласно спецификации CSS это свойство применяется для блочных и заменяемых элементов. На практике спрайты часто применяются в строчных элементах , который делают блочным при помощи свойства display:block , чтобы задать ширину и высоту. Для этих элементов и задаётся свойство background c необходимыми координатами (background-position). Если сказать коротко и грубо, то это координаты (месторасположение) нужной нам маленькой картинки на большом холсте общей составной картинки-спрайта. Благодаря этому свойству и жёстко заданным высоте и ширине элемента, в котором применяется спрайт, обеспечивается визуализация нужной нам картинки в этом элементе. Акцентирую внимание на том, что свойство background-position обеспечивает доставку нужной нам картинки (в виде блочного элемента), как-бы вырезанной из мастер-спрайта, на веб-страницу. За размещение же этой самой картинки в нужном месте страницы отвечает либо традиционная HTML-разметка, либо разметка с использованием соответствующих идентификаторов, классов или простых селекторов с нужными свойствами CSS (position, float, margin и прочими) – здесь многое зависит от имеющихся у вас наработок и собственных предпочтений. Если у вас возникает вопрос почему при использовании спрайтов CSS применяется свойство background , то напоминаю, что технология css-спрайтов предполагает их размещение на страницах сайта именно как фоновых вставок. Причём нужны не только свойство background-position, но и background-image с указанием пути до мастер-спрайта и при необходимости другие свойства фона. Некоторые примеры в том числе с использованием сокращённого написания свойства background можно увидеть в нижеприведенных листингах стилей.
Пользователи, хорошо знакомые с CSS, могут заметить, что позиционирование CSS спрайтов намного тоньше и сложнее. Да, это так. Если расположение спрайта задано в точных единицах (рх), то они интерпретируются как смещения от верхнего левого угла области отступа элемента. Точка, относительно которой отсчитываются смещения, – верхний левый угол исходного изображения.
Самое доходчивое объяснение позиционирования фона в случае задания точных значений свойства background-position я нашёл в блоге , откуда взята нижеследующая картинка и описание к ней:
«При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения. Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется объект, до начала координат этого самого изображения. »
Цель этого обзора – ответ на вопросы: как создать css-спрайт, как объединить изображения в css спрайт и знакомство с тремя программами, обеспечивающими простое и лёгкое создание спрайтов CSS (CSS Sprites), поэтому о самой технологии я больше говорить не буду. В интернете сейчас много толковых и подробных материалов на эту тему (одну ссылку я указал выше). Обзор посвящён работе с программами по созданию CSS спрайтов (генераторами спрайтов), где я лишь коротко коснусь некоторых важных (на мой взгляд) моментов при использовании спрайтов. Сразу оговорюсь – применение CSS-спрайтов не панацея и пытаться запихнуть в спрайты большие картинки шапок, заставок и графики, которая используется именно как графика , а не как фоновые картинки , не следует. Использовать спрайты рекомендуется для перманентных, часто повторяющихся на страницах изображений. Если эти изображения будут часто заменяться на другие, возникнет необходимость в создании новых спрайтов и, естественно, правке CSS и HTML.
Подопытные генераторы css спрайтов (css sprite generators) это бесплатные программы CssSpriter-1.2 , DoHTMLSprite и SpriteGenerator 0.2 . Если первая из них кое-где упоминается на русскоязычных ресурсах, то упоминаний о второй и третьей я в Рунете не видел. Почти все генераторы CSS спрайтов, как правило, являются онлайновыми ресурсами (следуя модной ныне тенденции). Причем русскоязычных из них не более двух-трех. Мне нравятся программы и онлайн-сервисы, в которых я могу разобраться, если не с ходу, то с нескольких попыток. Из генераторов спрайтов, перелопаченных мной, больше всех понравился упомянутый уже . За простоту, удобство, возможность настроек, эффективность и предсказуемость. Остальные генераторы (в основном онлайновые) не соответствовали этим критериям (может руки не совсем прямые или не оттуда растут, или голова не так повернута). Опытный пользователь (если вдруг забредет сюда) может усмехнуться – чего огород городить, если спрайты можно сделать в графическом редакторе, а координаты посчитать (ну-ну). Конечно можно, но я предпочитаю пользоваться специализированными инструментами, причём мне больше по душе все же десктопные приложения* . Все три описываемые программы тестировались под Windows XP SP3. Возможности их не так обширны, как у Instant Sprite, но весьма достойны внимания.
Примечание от 22.02.14. Все ссылки в этой статье с упоминанием программы Instant Sprite ведут к достаточно подробному анонсу первого перевода этой программы. После написания отдельной статьи об Instant Sprite я решил дать здесь ссылку и на неё. Вот она – .
Ещё одно примечание. Хочу анонсировать недавно написанную статью, которая освещает несколько иной подход к определению координат и размеров css спрайтов для их размещения на веб-страницах. Вот ссылка на эту статью:
Однако, приступим к нашему обзору…
Генератор спрайтов CssSpriter-1.2
(http://codebrewery.blogspot.ru/p/cssspriter.html)
Небольшая бесплатная программа (zip-архив 150 кб), не требующая инсталляции. Работа с программой по созданию CSS спрайтов не вызывает затруднений, интерфейс прост и понятен. Кнопки панели инструментов дублируют пункты меню и имеют всплывающие подсказки. На левой панели отображаются исходные изображения с их размерами и координатами в будущем спрайте, правая панель отображает результаты работы программы (одна вкладка это выходной css спрайт, вторая – демо-html).
Добавлять изображения для объединения в спрайт можно из системного диалога по одному или сразу множественным выбором из подготовленной папки с изображениями. Точно также можно добавить изображения и методом перетаскивания. Программа поддерживает входные изображения следующих форматов: ico, gif, png, bmp, jpg . Файлы Фотошопа psd не поддерживаются, другие форматы не пробовал – этих хватает с избытком. Не рекомендую использовать последние два формата bmp и jpg . Они не поддерживают прозрачность, что хорошо видно в списке миниатюр на левой панели и в результирующем изображении на правой панели (картинки этих форматов будут иметь в спрайте черный фон или поля, как говорят некоторые пользователи). Чтобы применить такие спрайты на веб-страницах, надо будет уменьшить глубину цвета и вновь установить прозрачность, что не всегда получается корректно. Выходной формат один – png 32бит . Для нормального отображения картинки в старых версиях Internet Explorer, желательно перевести изображение в 8-битовый формат png и снова установить прозрачность. На второй вкладке правой панели можно посмотреть HTML-разметку с вложенными стилями CSS для применения спрайтов.
Нажатием на левую кнопку панели инструментов наш проект экспортируется в HTML. В папке, указанной для сохранения результата появятся три файла:
Программа позволяет также создать спрайт с горизонтальным расположением входных изображений. Кнопка, на которую указывает красная стрелка, реализует эту возможность. Обратите внимание, что координаты изображений, входящих в спрайт изменились (в сравнении с вертикальным расположением).
Результаты, которые нам выдала программа, являются основой для применения спрайтов на своей странице. Конечно, надо увязать уже имеющиеся стили со стилями спрайтов, можно использовать идентификаторы вместо классов, можно оптимизировать сами стили спрайтов, применить нужную вам разметку, вынести стили во внешний файл и т.д. – все будет зависеть от страницы, где вы будете использовать спрайты, а также от ваших предпочтений и навыков.
Однако, не все так хорошо. Программа, на мой взгляд, имеет один серьёзный недостаток. В ней нет возможности задать промежутки (смещения, отступы) между изображениями в спрайте, поэтому при просмотре страницы с увеличенным или уменьшенным масштабом, что иногда случается, могут возникнуть всякие накладки. Второй, но меньший недостаток состоит в невозможности сортировки изображений в программе, поэтому загружать изображения в программу нужно в том порядке, какой вам необходим (на самом деле это вопрос только собственных предпочтений, в конечном счете, использование нужной картинки определяется заданием ее координат).
Генератор спрайтов DoHTMLSprite
Трудно понять, кто автор этой программы, но практически все забугорные софт-архивы в качестве первоисточника приводят ссылку на http://www.downloadinn.com/dohtmlsprite.html. Это тоже файловый архив, где можно найти автора публикации – Stefan Grasutu. Щелчок по этой ссылке приводит на сайт некоего Alexandru Tertisco – http://www. teral-soft.com. Следов этой программы на сайте я не нашел, поэтому скачать программу можно по первой упомянутой ссылке.
Крошечная бесплатная программа (zip-архив 13 кб) имеет сверхаскетичный интерфейс, но дело свое туго знает. Так же не требует инсталляции.
Алгоритм работы таков:
- Указываем папку с исходным файлами (папку надо создать заранее и разместить в ней нужные файлы)
- Задаем папку назначения для сохранения результатов
- Создаем спрайт
Попробуем сделать css спрайт из тех же картинок, которые использовались в обзоре первой программы: 2 файла gif и по одному ico, bmp, jpg, png и psd . Первая программа позволила загрузить все файлы, кроме psd , то есть загрузила 6 файлов из 7. Посмотрим, как поведёт себя DoHTMLSprite.
Программа обнаружила 5 файлов из 7 против 6, обнаруженных CssSpriter-1.2. Какие пока неизвестно.
Задаём папку вывода и нажимаем кнопку Создать спрайт . Программа бодро рапортует о создании спрайта, css-файла и демонстрационного файла HTML.
Посмотрим на содержимое папки вывода. В самом деле, там находятся все упомянутые файлы с какими-то неудобопроизносимыми именами.
Рассмотрим их, начиная со спрайта. Как видим файл спрайта создан в формате png , дополнительно скажу о глубине цвета – те же самые 32 бит, как и в первой программе. Значит, все замечания о прозрачности для старых браузеров тоже актуальны.
Глядя на вертикальную картинку (а изменить её ориентацию нельзя, что, однако, не является существенным недостатком программы), отмечаем, что эта программа не поддерживает форматы ico и psd в качестве входных. Пользователи устаревших браузеров также увидят сероватый фон на спрайте, помимо чёрного фона на картинках, для которых использовались входные файлы bmp и jpg , изначально не поддерживающие прозрачность. При внимательном рассмотрении можно увидеть, что в спрайте есть промежутки (отступы, смещения) между картинками, то есть основного недостатка предыдущей программы здесь нет. Если посмотреть на координаты картинок чуть ниже (в стилевом файле), можно увидеть, что этот промежуток составляет 5px.
Как видно здесь используются не вложенные стили, а созданный внешний стилевой файл, ссылка на который и присутствует в коде.
А вот так выглядит демо-страница (ее кусочек) при просмотре в современном браузере. На этом скриншоте тоже видны промежутки между отдельными картинками, но заданы они уже в стилевом файле (подробности ниже).
Последний файл, созданный программой, это внешний стилевой файл.
Здесь можно увидеть координаты всех наших картинок в спрайте. При внимательном просмотре координат видно, что они учитывают жёстко заданные программой промежутки между изображениями в спрайте в 5px (размеры картинок 32х32px, а разница координат 37px, 37-32=5). Для демонстрационной страницы автор задал в стилях внешние поля сверху и снизу тоже 5px (могло быть задано и другое значение), используя сокращённое свойство margin . При сравнении демонстрационных HTML-страниц, созданных первой и второй программой, видно, как влияют используемые стили на расположение картинок на странице. Некоторые пользователи используют margin «ы как дополнительное средство во избежание неожиданных накладок при масштабировании страницы при просмотре. Наверное, это будет полезным при создании и оптимизации стилей для спрайта, созданного первой программой, где промежутков между изображениями в спрайте вообще не предусмотрено. Создавая и оптимизируя стили для своих спрайтов, вы сами решите какие свойства нужны вам и как их использовать.
Хочется отметить, что программа изначально генерирует компактный однострочный стиль и после нулевой координаты не ставит единицу измерения (px), ноль он и Африке ноль, хоть в пикселях, хоть в килограммах. Такой предусмотрительности нет у некоторых онлайн-сервисов по созданию CSS-спрайтов.
Выводы
Никаких выводов по использованию рассмотренных программ не будет. Вы сделаете их сами. Я достаточно подробно изложил все через чего прошел сам, остальное за вами. Завершая этот затянувшийся обзор, выскажу несколько хаотичных пожеланий и необязательных советов по использованию CSS-спрайтов.
- Не пытайтесь создать только один спрайт на все случаи и запихнуть в него все картинки, используемые на ваших страницах, это в будущем усложнит корректировку HTML и CSS при необходимости
- Создавайте спрайты для часто повторяющихся графических элементов типа логотипов, значков, кнопок и других элементов навигации и управления
- Старайтесь создавать спрайты из картинок одного размера (лучше сделать не один спрайт из разнокалиберных изображений, а несколько спрайтов, но каждый из картинок одного размера), это поможет оптимизировать используемые стили (один пример я покажу ниже)
- Не используйте для создания спрайтов картинки в форматах изначально не поддерживающих прозрачность (правильнее и лучше всего использовать входные изображения в форматах gif и png , а для первой программы и упоминавшегося Instant Sprite можно также использовать ico )
- Для поддержки прозрачности выходных файлов PNG в старых браузерах конвертируйте их в 8-битовый формат или в формат GIF (существуют и css-хаки, позволяющие разрешить эту проблему для png, но это не тема сегодняшнего обзора)
- Оптимизируйте стили (можно использовать онлайн-сервисы, программы , TopStyle, Rapid CSS и т. п. или править вручную)
- Оптимизируйте спрайты – очень удобно и эффективно для этого использовать онлайновый сервис TinyPNG (http://tinypng.org) или программу Riot , рассмотренную в (очень её рекомендую)
- Используйте спрайты для простого и элегантного способа реализации rollover-эффекта изображений на ваших страницах без использования скриптов
- И в дальний путь…, флаг вам в руки…, вперёд и с песней…
P.S. Об упомянутой оптимизации стилей
Рассмотрю только один пример возможной оптимизации при использовании изображений одного и того же размера. Создадим экспериментальный спрайт из картинок одного размера с помощью DoHTMLSprite и посмотрим созданные стили.
Во-первых, мне не нужны дополнительные отступы, потому я уберу их из стилевого файла. Во-вторых, все картинки у меня одинакового размера, поэтому ничто не мешает мне зафиксировать размеры только один раз в стиле для самого мастер-спрайта. Вот что получилось.
Размер файла уменьшился с 1403 байт до 749 байт (почти в 2 раза), и все прекрасно работает. Если вы внимательно посмотрели на эти два скриншота, то, наверное, увидели, что я дополнительно убрал лишние пробелы и необязательные точки с запятой перед закрывающей фигурной скобкой. Для визуального сравнения я также оптимизировал стиль для уже рассмотренного первоначального спрайта. Вот, что получилось при просмотре в браузере.
Если вы сравните скриншоты, то заметите разницу. Исчезли промежутки между картинками на странице, определяемые свойством {margin: 5px 0} . Я посчитал, что они мне не нужны (спрайты будут размещаться в разных местах страницы, а не подряд, как в демо-примере). При этом промежутки на самом спрайте-изображении, созданные программой никуда не исчезли, и будут служить нам подстраховкой при возможном пользовательском масштабировании страницы при просмотре в браузере.
Наконец, последнее
Среди широко разрекламированных сервисов для создания CSS-спрайтов особенно выделяется Sprite Me . Он автоматом находит картинки, которые можно объединить в спрайты, и выдает на-гора рекомендации по реорганизации стилевых файлов и HTML-разметки. Попробуйте. Когда-то я начинал с него, и сервис помог мне вникнуть в суть применения спрайтов. Но, к сожалению, он обнаружил на моих страницах лишь 20% картинок, из которых можно создать спрайты. Поэтому я и перешёл к неоднократно упоминавшемуся , чего и вам желаю. Из множества изображений, размещённых на моих страницах, все фоновые
картинки это спрайты. Кроме того кнопки управления (типа, загрузить файл, прокрутить страницу вверх, просмотреть скриншот или видеоролик) сделаны из спрайтов с применением rollover-эффекта на CSS.
Всё!
Как-то не получается закончить обзор. Только опубликовал его и через день нашёл ещё один генератор css спрайтов.
Генератор спрайтов SpriteGenerator 0.2.
(http://spritegenerator.codeplex.com/releases/view/52139)
Тоже не онлайновый, а Win-приложение. Небольшая программа, вроде с открытым исходным кодом, распространяется по некоей Microsoft Public License. Программа имеет достаточно простой и внятный интерфейс.
Укажем путь к той же папке с подопытными картинками, что и для уже рассмотренных программ. Зададим папку для вывода спрайта, затем укажем ту же папку для вывода CSS-файла.
Программа позволяет выбрать компоновку для будущего спрайта: горизонтальную, вертикальную, прямоугольную и на усмотрение программы (автоматический выбор). Забегая вперед скажу, что когда входных изображений достаточно много, программа сама устанавливает автоматическую компоновку – остальные опции деактивируются, а результирующий спрайт получается прямоугольным. Программа позволяет задать промежуток между изображениями и установить отступы. Выберем параметры, указанные на скриншоте, и нажмем кнопку Создать . Программа куда-то улетает без доклада. Посмотрим папку вывода.
Программа создала два файла: стилевой файл и спрайт в формате PNG 32бит (их имена я указал при задании папки вывода). Демо-страницу эта программа не создала. Посмотрим на спрайт.
Что сразу бросается в глаза: картинок осталось только 4 из 7. Оказывается, программа не воспринимает файлы bmp , на картинке с входным форматом jpg также виден кусочек чёрного фона, и пользователи старых браузеров также увидят сероватый фон у других картинок. Я снова не оптимизировал спрайт и не устанавливал прозрачность. Второе, что можно отметить: промежутки имеются вокруг каждой картинки – этого можно было ожидать, поскольку программа поддерживает прямоугольную компоновку. Но промежутки между картинками и внешней границей явно больше промежутков между самими картинками. Все становится ясно, когда мы взглянем на стилевой файл.
Первое, что здесь можно отметить: программа сохранила имена входных картинок, вместо задания безликих имён в выше рассмотренных программах. Второе, отступов, которые мы задавали, как я считал свойством margin , в стилевом файле нет. Оказывается, что обе опции задания промежутков в программе связаны с самой картинкой: одна (distance between images) задаёт промежутки между самими картинками, вторая (margin width) – между картинками, из которых состоит спрайт и его внешней границей. Если взглянуть на свойства background-position в стилевом файле можно увидеть, что оно учитывает оба упомянутых вида промежутков. Создадим сами демонстрационную веб-страницу, включив для наглядности разные отступы в стилевой файл (речь идет именно об отступах в стилевом файле для наглядности позиционирования картинок на странице).
Я намеренно сделал скриншот при просмотре в IE6, чтобы вы увидели непрозрачный фон у картинок. Как его избежать для старых браузеров, я уже говорил. В современных браузерах все выглядит нормально, кроме входной картинки формата jpg , который изначально не поддерживает прозрачность, здесь фон чёрного цвета.
Заинтересованным привожу скриншоты HTML- и CSS-файлов для последнего примера.
Заключение
Мой обзор не претендует на полноту и подробное освещение многих вопросов, но как пример использования css спрайтов на веб-странице и пример их создания в генераторах спрайтов его можно использовать.
Русифицировать перечисленные в обзоре программы я не стал, они достаточно просты и понятны без перевода. Буду рад, если этот обзор кому-то пригодится. (UPD – Я все таки перевёл попозже самую маленькую и простую, но не менее функциональную программу – DoHTMLSprite. Анонс её русификатора можно найти на странице новостей .)
После опубликования этого обзора я нашел в Интернете ещё несколько программ (не сервисов) для создания css спрайтов. Но все эти программы уступают программам, описанным здесь. Либо по фукциональности, либо по стабильности работы или по другим свойствам. Поэтому дополнять этот обзор я не буду. Рассмотренные в обзоре программы прекрасно справляются со своими обязанностями. Можно рекомендовать любую из них для создания css-спрайтов.
Сейчас, наверное, всё!
Спасибо за то, что вы это всё прочитали.
*) Ранее я несколько скептически относился к созданию CSS-спрайтов при помощи графических редакторов. Но связка бесплатного редактора Gimp с плагинами CSS WebSprites и Save for Web заставила изменить мое мнение. Простота, интуитивная понятность и дополнительные возможности по созданию CSS спрайтов и оптимизации как стилей, так и изображений, подвигли меня на написание ещё одной статьи по этой тематике. Если есть желание, можете ознакомиться с ней на странице .
Рекомендую также ознакомиться с несколько другим подходом к css спрайтам и определению их координат и размеров в статье .
Одной из ключевых задач CSS спрайтов является оптимизация графики загружаемой страницы. Какова задача этой оптимизации и зачем ее необходимо выполнять? Идея заключается в следующем: пока страница не оптимизирована, графические элементы представляют собой отдельные файлы. Количество подобных элементов превышает 5 или 10 штук, следовательно, для того, чтобы загрузить каждую картинку, браузер осуществляет отдельный запрос.
Логично предположить, что ускорить процесс можно за счет объединения графических элементов. Отображение частей настраивается через CSS. После этого браузер будет выполнять только один запрос, чтобы загрузить изображения. Благодаря этому страница будет загружаться в разы быстрее . Вот и весь принцип оптимизации.
Кроме этого спрайты используются для того, чтобы правильно сформировать эффект визуального изменения элемента в момент, когда пользователь наводит на него курсор. Отсутствие этого можно заметить, когда посетитель видит мигающую кнопку: у кнопки есть два состояния — изначальное и в момент наведения, между загрузкой этих состояний при отсутствии организации возникает слишком длинная пауза, из-за чего возникает эффект мигания.
Итак, рассмотрим основные примеры CSS спрайтов:
У нас есть перечень иконок в одном файле. Задача: вывести некоторые картинки в рандомной последовательности.
Картинка (css-sprite-01.png ) ниже — спрайт.
После применения списка стилей иконки остаются выведенными в произвольном порядке.
Давайте более детально разберемся с этим примером. Разрешение первоначальной изображения-спрайта: 200 * 200 px . Главная картинка разделена на 4 куска, каждый из которых имеет разрешение 100*100 px . Нам необходимо создать в документе список с идентификатором css-sprite-ul . Пункты списка пронумеруем как 001, 002, 003 и т.д.
Теперь этот список будет показывать пункты, а необходимо получить части спрайт-изображения. Для этого обращаемся к файлу .css , где вставляем этот код:
#css-sprite-ul li {margin:0;padding:0;list-style:none;position:absolute;top:0;} #css-sprite-ul li, #css-sprite-ul a {height:100px;display:block;} #css-sprite-001 {left:0px;width:100px;heigth:100px;background:url(«/images/css-sprite-01.png») 0 0;} #css-sprite-002 {left:200px;width:100px;heigth:100px;background:url(«/images/css-sprite-01.png») 100px 0;} #css-sprite-003 {left:400px;width:100px;heigth:100px;background:url(«/images/css-sprite-01.png») 0 100px;} #css-sprite-004 {left:600px;width:100px;heigth:100px;background:url(«/images/css-sprite-01.png») 100px 100px;} |
Анализ стилей позволит понять, в каком месте и как именно будет выводиться части этого спрайт-изображения.
Пример 2. Изображение меняется при наведении.
Еще один пример: попробует создать кнопку, которая будет изменяться при наведении курсора. Так, она поменяет цвет и текст. Наша задача — избежать эффекта мигания, который был описан выше. Для этого оба состояния необходимо поместить в один файл.
Как выглядит спрайт:
html-код:
Спрайты — это довольно интересная и простая технология. Сейчас я расскажу о ней немного подробнее.
Что такое CSS спрайты?
Если кратко, то CSS спрайты это несколько картинок в одном файле. Файл один, а изображений внутри него несколько. При этом для посетителя это полностью незаметно. Тому кто просматривает сайт кажется, что он видит несколько отдельных картинок.
Зачем это нужно? Спрайты снижают количество запросов к странице от пользователя и уменьшают общий размер изображений. В итоге посетитель быстрее увидит сайт.
Как это делается? Обычная картинка увеличивается в ширину и высоту, то есть просто на обычной картинке размещаются рядом несколько изображений. Потом каждое отдельное изображение из этого набора подставляется в нужный блок с заданной шириной или высотой таким образом, чтобы все остальные изображения не было видно. Весь набор обрезается и остается только одна картинка. Один спрайт. Все остальные картинки остаются за пределами конкретного блока.
Чтобы было понятнее приведу аналогию. Представьте что вы смотрите в замочную скважину. Вы видите только какой то отдельный кусок помещеняи по ту сторону двери. Если вы чуть сдвинетесь в сторону и будете смотреть в скажину под другим углом, то увидите какой то другой кусок того же самого помещения.
Терминология
Чтобы не путаться давайте сразу обозначим термины:
Спрайт — это одна картинка из файла с несколькими изображениями.
Набор спрайтов — это сам файл с несколькими изображениями.
Особенности использования спрайтов
Когда стоит использовать спрайты? Ответ в общем то один — спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.
На странице как правило бывают три вида картинок — jpg, png и gif. У всех этих форматов есть два режима загрузки — это обычный режим и режим постепенной загрузки.
Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.
Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.
Итого. Изображение может появиться на странице сразу, а может появиться с задержкой. Применительно к спрайтам это важно знать. Спрайты желательно делать черезстрочными или прогрессивными. Пользователь должен как можно быстрее увидеть картинки пусть и в плохом качестве.
Но! Если финальный файл со всеми спрайтами будет слишком большой, то несмотря на всю прогрессивность и черезстрочность посетителю придется ждать даже частичную загрузку файла. Поэтому я не рекомендую использовать большие наборы спрайтов. Если файл большой то полностью теряется весь смысл спрайтов — ускорять работу сайта. С большими наборами спрайтов пользователю придется ждать столько же, если не больше, как и при использовании обычных раздельных изображений.
Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.
Примеры использования спрайтов
Спрайты с иконками
В одном спрайте у меня будут иконки для:
- Списка — одна иконка
- Ссылок — три иконки
- Формы поиска — одна иконка
То есть первый набор спрайтов у меня будет содержать пять картинок. Все картинки у меня будут одинакового размера — 16 на 16 пикселей. Спрайтами можно делать изображения с разными разрешениями, не обязательно чтобы разрешение всех картинок совпдало. При разном разрешении картинок чуть усложняется объединени этих картинок в один файл.
В итоге первый пример будет выглядеть так:
Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:
Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.
Еще один момент. Последней в списке идет иконка для списка — зеленая стрелка. Почему она именно последняя? Расположение остальных иконок на картинке нам безразлично, но в списке любой пункт может занимать несколько строк и если зеленая стрелка будет где-то посередине, то на следующих строках будут торчать другие картинки. Посмотрите на картинку списка выше, чтобы понять о чем я говорю.
И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:
- Пункт списка
- Еще один пункт списка
- Пункт списка
- Еще один пункт списка,
но в две строки - Пункт списка
- Еще один пункт списка
Это html код списка. Теперь применим к нему наш спрайт:
Ul li{ padding:0 0 0 21px; background:url(«sprites.png») 0 -94px no-repeat; }
Что мы тут сделали? Сделали отступ в каждом
Закончим со списком. Теперь сделаем примерно так же ссылки:
A{ padding:0 0 0 20px; background:url(«sprites.png») 0 -42px no-repeat; } a{ padding:0 0 0 20px; background:url(«sprites..png») 0 -21px no-repeat; }
Что означают селекторы a? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://сайт/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку — ссылку на мой блог.
- Определяем нужную ссылку по href.. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
- Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
- Указываем в качестве фонового изображения картинку sprites.png
- Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»
Домашнее задание
Спрайты с градиентами
Теперь посмотрим второй пример.
На этой картинке изображено окошко. У окна есть заголовок, тело и подвал. У каждого из этих элементов на фоне установлен градиент. Присмотритесь если этого сразу не видно, там есть переход цвета от бледного к насыщенному.
Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты — 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.
Теперь напишем 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. После присвоения текст будет поверх градиента.
Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.
Такие длинные пояснения я делаю, чтобы совсем все было понятно. Но на самом деле если вы немного разбираетесь в верстке, то вам наверное будет достаточно посмотреть сами примеры:
В очередной раз продублировал ссылку.
На самом деле можно придумать много примеров по использованию спрайтов. Я показал только два примера, но этих примеров должно хватить для понимания принципов работы спрайтов. Если остались какие то вопросы, то задавайте в комментариях.
Доброго времени суток, сегодня хочу рассказать вам о том, как сделать css спрайт иконок для своего сайта. Да в прочем не только иконок, но и любых других элементов, например, кнопок, меню и т.д. Хоть графику всего лендинга.
Статья должна идти в рубрику ускорение и оптимизация, так как использование спрайтов ускоряет загрузку страницы, за счет того, что одна картинка, даже большего размера, грузиться быстрее, чем несколько — меньшего. Это происходит потому, что создается меньше обращений к серверу.
Для тех, кто не в теме, то спрайт выглядит так:
То есть, применительно к вебу – это одна картинка с множеством элементов, каждый из которых показывается в нужном месте сайта за счет позиционирования.
Но вопрос того, на сколько быстрее или медленнее грузится страничка с использованием спрайтов, я затрону в следующей статье, и она уже точно попадет в нужную рубрику. Так что подписывайтесь в Twitter , чтобы не пропустить анонс статьи.
А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.
Итак, я создал простенький спрайт иконок в фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.
Создание css спрайта – html разметка
Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:
Подписывайтесь на обновления
Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте 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 {
transition: .3s;
}
a. tvitter: hover{
transition: .3s;
}
Для того, чтобы отображался необходимый элемент спрайта, следует его спозиционировать. Для этого, после того, как фон ссылке задан, необходимо задать координаты.
Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 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 спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.
Слово спрайт (англ. sprite — фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и «оживления» мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон — сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников. . эти самые плёнки они и называли спрайтами.
Потом термин спрайт внедрился в компьютерную графику и особо широкое распространение получил в компьютерных играх — но это тоже не совсем то о чем я хочу Вам поведать.. Сегодня я хочу Вам рассказать о так называемых CSS-спрайтах..
Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких «частей», которые показываются как бы по отдельности в зависимости от действий пользователя..
Что слишком много слов.. покажу пример..
Это спрайт который присутствует на каждой странице данного сайта:
Просто в «спокойном» состоянии Вам показывается одна его часть, а при наведении курсора другая.
Как это сделать? На самом деле все достаточно просто.
В данном примере для блока с фиксированными размерами мы в качестве фона загружаем «двойное» изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую «часть» фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.
Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:
Открываем значит фотошоп и рисуем в нём примерно такой рисунок:
Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет «скакать». Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..
Итак, у нас получилась «двойная» картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.
Он у меня получился таким.. смотрим результат и читаем комментарии в коде:
CSS спрайты
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
Думаю, многие читатели задаются вопросом: «А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??»
Во-первых: Скорость загрузки изображений увеличивается в разы!! Несмотря на то что «двойная» картинка весит столько же, сколько и две отдельно взятых маленьких «одинарных», загрузка одной большой картинки происходит быстрее, так как браузером не создаются дополнительные HTTP запросы серверу.
Помните, когда я Вам показывал свой логотип-спрайт, говорил что слукавил? Так вот моё лукавство заключается в том, что данная картинка содержит в себе не две логических части изображения, а восемнадцать!!
И полностью она выглядит так:
То есть практически вся графика, которую Вы видите на этом сайте, на самом деле приходит к Вам в виде одного единственного изображения! CSS файл показывать не буду, я его сам боюсь..)),
Так вот HTTP запросы.. если бы изображений вместо одного было 18ть то диалог браузера с сервером выглядел бы примерно так:
Браузер : Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке «графика».. должна лежать картинка с названием: «картинка1» скинь а?
Сервер : Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер : Спасибо, поймал! Но мне еще нужна «картинка2» в той же папке. .
Сервер : Да и такая есть.. отправляю..
Браузер : Загрузил.. но тут еще «картинка3» указана.
Сервер : И не спится же тебе! Держи свою картинку!!
Браузер : Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще «картинка4» должна быть..
Сервер : Ты меня начинаешь напрягать! На свою картинку!!
Браузер : Извини, но я же не виноват, что здесь столько изображений!!! Нужна «картинка5»!
Сервер : У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
… … …
Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..
К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!
Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт — вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта «жертва трафика» оправдывает себя практически всегда!
Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! — хотя для этого и нужны определённые навыки и привычка. .
Ладно, решайте сами использовать спрайты или нет.. а моё дело маленькое, просто так сказать довести информацию до Вашего сведения.. возникнут дополнительные вопросы жду Вас на
Спрайты в Unity: определение, как их создавать и использовать
Как создать спрайт для Unity? Для этого в игровом движке предусмотрены свои инструменты, о которых мы поговорим чуть ниже.
Спрайт — это графический объект, который используется при создании 2D-игр. Спрайт-технология пришла к нам еще в 80-х годах. Первые игры делались с применением спрайтов. Все знают, что если взять несколько похожих картинок и в определенной последовательности быстро их «прокрутить», то получится анимация или видео. Многие вспомнят о том, что видео — это 24 кадра в секунду, которые видит человек. Именно по такой «прокрутке» кадров и происходит создание спрайт-объектов. К примеру, берется игровой персонаж, а затем создается несколько разных его изображений. Потом эти изображения помещают в контейнер и зацикливают их прокрутку. Таким образом, получается анимация. Если показ картинок «подвязать» к кнопкам управления, тогда появляется полноценный игровой объект, который будет реагировать на нажатие кнопок. Например, при движении вправо показываются одни картинки, влево — другие. А у пользователя создается впечатление, что игровой персонаж анимирован. Повторимся, что по факту происходит только смена картинок в кадре.
В Unity работа со спрайтами внедрена по умолчанию, когда движок настроен на разработку 2D-игр. Если спрайт посмотреть в 3D-режиме, тогда он окажется «плоским», как лист бумаги. Все потому, что спрайт — это 2D-объект и у него нет Z-ширины.
Как создать спрайт для Unity
Когда на Unity создается новый спрайт, ему необходимо задать текстуру. Текстура — это изображение, которое отражает внешний вид спрайта. Такое изображение прикрепляется к спрайту, создавая GameObject, который можно использовать в игре.
Если нет возможности сразу добавить текстуру в проект, но наличие спрайта в игре вам обязательно, тогда можно применить «заполнитель спрайтов» на Unity. Заполнитель — это встроенный инструмент, который создает спрайт в виде простых геометрических фигур типа треугольника, квадрата, круга и заполняет их белым цветом. В дальнейшем всегда будет доступно редактирование «заполнителя».
Чтобы создать спрайт на Unity, пройдите по следующему пути:
Assets → Create → Sprites
Подход с использованием заполнителей для спрайтов актуален в том случае, когда графика для спрайта не готова, но нужно продолжать разработку проекта.
Редактирование спрайтов в Unity
Создать спрайт для Unity несложно, как это делается — описано чуть выше. Вся сложность заключается в редактировании спрайта. Чем сложнее игровой спрайт и сложнее проект, тем труднее будет редактировать спрайт.
Для редактирования спрайтов в Unity есть встроенный инструмент — Sprite Editor. Чтобы запустить редактор спрайтов, нужно:
Открыть 2D-изображение в представлении проекта «Project View». Спрайт, который находится в режиме «Scene View», редактироваться не может.
Найти кнопку «Sprite Editor». Вам откроется редактор спрайтов, в котором будет несколько доступных инструментов. Например: изменение масштаба, изменение расцветки, изменение местоположения спрайта на экране, поворот спрайта, настроить прозрачность, обрезать и др.
Настройка спрайтов может происходить в ручном режиме, если вы являетесь уверенным пользователем Unity. Но можно включить автоматический режим, и движок самостоятельно позаботится о настройках вашего спрайта. Обычно автоматическое редактирование спрайта применяют в качестве «грубой» обработки. Потом все равно придется делать более тонкое редактирование «руками». Но нужно понимать, что редактирование спрайта не будет таким насыщенным, как редактирование 3D-объекта. Спрайт — это картинка.
Средство визуализации спрайтов в Unity
Отобразить спрайт в Unity помогает компонент Sprite Renderer. Его нужно добавлять в GameObject через меню Components:
Components → Rendering → Sprite Renderer
Когда создается 3D-графика, тогда способов отразить объемный объект очень много. Например, внешний вид объекта будет зависеть от его положения на экране, освещенности, перемещения, положения камеры и др. С 2D-объектами этого всего нет.
Однако важно, чтобы соблюдался приоритет между спрайтами. То есть важно определить, какой спрайт может накладываться на другой спрайт в случаях их пересечения. Sprite Renderer как раз отвечает за соблюдение приоритетности. Делается это при помощи применения технологии сортировки слоев. То есть спрайты с низким приоритетом располагаются на низших слоях и могут перекрываться спрайтами с более высоким приоритетом.
Заключение
Как создать спрайт для Unity? Добавить спрайт в Unity несложно. Спрайт — это анимированная картинка, состоящая из множества кадров. О подготовке спрайта для Unity нужно позаботиться заранее. Благо для этого есть много программ. Например:
Paint Net;
Krita;
SAI 2;
GIMP;
Clip Studio Paint;
и др.
Sprite Photos and Premium High Res Pictures
- CREATIVE
- EDITORIAL
- VIDEO
- Best match
- Newest
- Oldest
- Most popular
Any dateLast 24 hoursLast 48 hoursLast 72 hoursLast 7 daysLast 30 daysLast 12 месяцыПользовательский диапазон дат
- Без лицензионных отчислений
- С защитой прав
- РФ и РМ
Выбрать бесплатные коллекции >Выбрать редакционные коллекции >
Встраиваемые изображения
Просмотрите 47 464
sprite доступных стоковых фотографий и изображений или начните поиск sprite sheet или sprite soda, чтобы найти больше отличных стоковых фотографий и изображений. винтажная рождественская кукла перед елками — спрайт стоковые фотографии, лицензионные фото и изображениязеленая и красная эльфийская шапка с колокольчиками на белом фоне — спрайт стоковые картинки, фотографии и изображения без уплаты роялти стоковые картинки, фотографии без лицензионных платежей и изображениямилые рождественские эльфы — спрайт & изображениярождественские эльфы мальчик и девочка — спрайт стоковые иллюстрациимилые рождественские эльфы с подарками — спрайт стоковые иллюстрациидеревянная зимняя рождественская мастерская санта и мастерская эльфов подписывают почерком или написанным от руки текстом — спрайт стоковые иллюстрациипоказывая его более светлую сторону! — спрайт стоковые картинки, фотографии и изображения без уплаты роялти; фея выдувает звездную пыль силуэт — спрайт фотографии и изображенияпомощники Санты — спрайт стоковые иллюстрациитающие женщины — спрайт стоковые картинки, фотографии без лицензионных платежей и изображенияфеи играют с бабочками — спрайт стоковые иллюстрациидва веселых рождественских эльфа — спрайт стоковые иллюстрациипикси щелкает пальцем — спрайт стоковые иллюстрациигрот санта — спрайт стоковые картинки, лицензионные платежи фотографии и изображенияспрайт может на белом — спрайт стоковые картинки, фотографии и изображения без уплаты роялтирождественские эльфы 3 — спрайт стоковые иллюстрациирождественские эльфы танцуют на белом — спрайт стоковые картинки, фото и изображения без уплаты роялти картинки, роялти-ф бесплатные фотографии и изображениярождественский эльф со знаком — спрайт стоковые иллюстрациидва самца «эльфы» тянут большую рождественскую хлопушку (цифровое улучшение) — спрайт стоковые картинки, фото и изображения без уплаты роялти водяная нимфа — спрайт стоковые картинки, фото и изображения без уплаты роялтирождество счастливые дети — спрайт стоковые иллюстрациивинтажное рождество — спрайт стоковые картинки, фотографии без уплаты роялти и изображениявинтажное рождество — спрайт стоковые картинки, фото и изображения без уплаты роялти Рождественский эльф — спрайт стоковые картинки, фотографии без лицензионных платежей и изображенияСтрана грез — спрайт стоковые иллюстрациивикторианские феи, сказка, два пенса солнечного света — спрайт стоковые иллюстрациимилые рождественские эльфы — спрайт сток k картинки, лицензионные фото и изображенияпраздничные эльфы — спрайт стоковые иллюстрацииотдыхающие женщины в туманном кусте — спрайт стоковые картинки, лицензионные фото и изображениявывеска — спрайт стоковые картинки, лицензионные фото и изображенияребенок в рождественских эльфийских новинках тапочки с колокольчиками — спрайт стоковые картинки, фотографии без лицензионных платежей и изображенияпринцесса никто — фея и нимфы — спрайт стоковые иллюстрациималенький декоративный рождественский эльф в красной шляпе — спрайт стоковые картинки, фото и изображения без лицензионных платежейсказочные бассейны, глен брайтл, остров скай, шотландия, великобритания — спрайт сток картинки, лицензионные фото и изображениязагадочная открытая дверь люка в лесу — спрайт стоковые картинки, лицензионные фото и изображениязеленая шапка санта на белом фоне — спрайт стоковые картинки, лицензионные фото и изображенияТодд Комарницки, продюсер Эльф кланяется перед плакатом его фильма на специальном показе фильма «Эльф» в пользу фонда TJ Martell в Loews Astor. .. Санта-Клаус и эльфы желают счастливого Рождества — sprite st ock illustrationsfairy moon силуэт — sprite stock illustrationself with Christmas Presents — sprite стоковые картинки, фотографии без лицензионных платежей и изображения список желаний — sprite stock illustrationsurreal night jungle with luminescent plant and flowers — sprite стоковые картинки, фото и изображения без лицензионных платежей Шекспир — сон в летнюю ночь — спрайт стоковые иллюстрациив волшебном лесу — спрайт стоковые иллюстрациисам на зимнем фестивале — спрайт стоковые картинки, фотографии без уплаты роялти и изображениямужчина, одетый как фея, висит в воздухе, портрет — спрайт стоковые фотографии, фотографии и изображения без уплаты роялти из 100Sprite Soda Photos and Premium High Res Pictures
- Creative
- Редакционная статья
- Видео
- Лучший матч
- Новый
- Старейший
- Самый популярный
. 12 месяцевПользовательский диапазон дат
- Без лицензионных отчислений
- С защитой прав
- РФ и РМ
Выбрать бесплатные коллекции >Выбрать редакционные коллекции >
Встраиваемые изображения
Просмотрите 194
sprite soda доступных стоковых фотографий и изображений или начните поиск лимона, лайма, газировки или кока-колы, чтобы найти больше отличных стоковых фотографий и изображений. спрайт может на белом — спрайт содовая стоковые картинки, лицензионные фото и изображения ледяные напитки — спрайт содовая стоковые картинки, лицензионные фото и изображения спрайт банки с копией пространства — спрайт содовая стоковые фотографии, фотографии и изображения без лицензионных платежейрука держит банки спрайт — спрайт содовая стоковые фотографии, лицензионные фотографии и изображенияЛоготип спрайта виден на бутылке на этой иллюстрационной фотографии, сделанной в Кракове, Польша, в ноябре 9, 2019. спрайт на льду — спрайт стоковые фотографии, фотографии и изображения без лицензионных платежейБутылки безалкогольного напитка Sprite от компании Coca-Cola видны в магазине. Бутылки спрайта Coca-Cola Co. движутся вдоль конвейерной ленты на завод по розливу Swire компании в Солт-Лейк-Сити, штат Юта, США, вторник, апрель… Полки с безалкогольными напитками для продажи в Carrefour Express. На этом рекламном изображении от корпорации Coca-Cola показан их новый продукт под названием «Remix» от 25 февраля. , 2003 год, Атланта, Джорджия. И Coca-Cola, и… Coca-Cola безалкогольный напиток самообслуживания торговый автомат. sprite 2-литровая бутылка на изолированном фоне. — сода спрайт стоковые фотографии, лицензионные фото и изображениярука держит банки со спрайтом Сити, штат Юта, США, вторник, апрель… Банки Sprite, Diet Coke и Coca-Cola выставлены на продажу в продуктовом магазине 17 апреля 2012 года в Чикаго, штат Иллинойс. Coca-Cola Co. сообщила, что молодой человек из племени химба пьет Sprite, провинция Кунене, Онкокуа, Ангола, 12 августа 2010 года в Онкокуа, Ангола. Майами-Бич, Флорида, продуктовый магазин Publix, различные продукты Coca Cola. бутылка .sprite изолирована на белом фоне — спрайт стоковые картинки, фотографии и изображения без лицензионных платежейsprite can on glass picnic table with copy space — спрайт содовая стоковые картинки, фотографии и изображения без лицензионных платежей Coca-Cola Co. в магазине в Луисвилле, Кентукки, США, в понедельник, 10 февраля 2020 г. Coca-Cola выросла после … Крупный план фонтанчика с газированной водой с видимыми напитками Sprite и Coca Cola, Уолнат-Крик, Калифорния, 13 декабря 2021 г. Фото предоставлено Sftm.bottles в Майами-Бич. — спрайт стоковые фотографии, фотографии и изображения без лицензионных отчислений. На этой фотоиллюстрации изображена банка спрайта и стакан, поставленные на стол. Бутылки со спрайтом движутся по конвейерной ленте на заводе Coca-Cola Amatil Ltd. в Медане, Северная Суматра. провинция, Индонезия, пятница, 15 февраля 2013 г…. Радужный центр, супермаркет, продуктовый магазин. спрайт — спрайт стоковые фотографии, фотографии без лицензионных платежей и изображениялиттер на пляже фистрал, ньюквей, корнуолл. — спрайт содовая стоковые картинки, лицензионные фото и изображенияспрайт может в ведерке со льдом — спрайт содовая стоковые картинки, лицензионные фото и изображения Фотографии и изображения без лицензионных платежейsprite can on ice — sprite soda стоковые фотографии, фотографии без лицензионных платежей и изображения во вторник, апрель… Бутылки Sprite компании Coca-Cola движутся по конвейерной ленте на заводе по розливу Swire в Солт-Лейк-Сити, штат Юта, США, во вторник, апрель… Бутылки Coca-Cola Co. .’s Sprite имеют этикетки, прикрепленные во время движения по конвейерной ленте на заводе по розливу компании Swire в Солт-Лейк-Сити,… Ангола, Южная Африка, Иона, мухимба, молодой человек с традиционной прической, пьющий спрайт бренды содовой канкока-колы — спрайт содовая стоковые картинки, фото без лицензионных отчислений s & imagesa берберский холодильник — использование водопада таяния снега для охлаждения напитков в бутылках стоковые фотографии, фотографии и изображения без лицензионных отчислений различных марок газированных или безалкогольных напитков. — спрайт стоковые фотографии, фотографии и изображения без уплаты роялтипереработка банок содовой , в пятницу, 15 февраля 2013 г. ….автомат по продаже кокаина — спрайт содовая стоковые картинки, фотографии без лицензионных платежей и изображениягруппа американских нездоровой пищи закуски на белом фоне — спрайт содовая стоковые картинки, фотографии без уплаты роялти и изображения sprite soda стоковые фотографии, фотографии и изображения без уплаты роялти. Холодные напитки, такие как Maaza, Cola Cola, Thumbs-up, Sprite, Real, выставлены на продажу в магазине в Джамму-Сити, Джамму и Кашмир, Индия, 1 ноября… выбор бренда название соды — спрайт содовая стоковые картинки, лицензионные фото и изображения спрайт содовая стоковые картинки, лицензионные фото и изображения автомат по продаже кокаина — спрайт содовая стоковые картинки, фотографии без уплаты роялти и изображения автомат по продаже кокаина — спрайт содовая стоковые картинки, лицензионные платежи бесплатное фото s & images Концепция продаж газированных напитков: груды различных марок безалкогольных напитков в продуктовом магазине, продажи этого продукта замедляются из-за проблем со здоровьем у потребителей. сода стоковые фотографии, фотографии без лицензионных платежей и изображениямальчик эльф сидит на горлышке оранжевой бутылки содовой88. банка спрайта — спрайт стоковые фотографии, фотографии и изображения без лицензионных платежейБутылки со спрайтом движутся по конвейерной ленте на заводе Coca-Cola Amatil Ltd. в Медане, провинция Северная Суматра, Индонезия, в пятницу, 15 февраля 2013 г. …. из 4Sprite Soda — Bilder und stockfotos
164Bilder
- Bilder
- Fotos
- Grafiken
- Vektoren
- Видео 9004
Niedrigster Preis
.0021Durchstöbern Sie 164
sprite soda Stock-Photografie und Bilder. Oder starten Sie eine neuesuche, um noch mehr Stock-Photografie und Bilder zu entdecken. кока-кола, фанта и спрайт — спрайт содовая стоковые фото и изображенияКока-кола, фанта и спрайт
спрайт — спрайт содовая стоковые фото и изображенияSprite
eis kalten getränken — спрайт содовая стоковые фото и изображенияEis kalten Getränken
kunststoff-flaschen sprite — sprite soda стоковые фотографии и изображенияKunststoff-Flaschen Sprite
flasche sprite drink auf eiswürfel dazugeben. — спрайт сода фото и изображенияFlasche Sprite напиток на Eiswürfel dazugeben.
sprite können auf weiß — sprite soda стоковые фото и фотографииSprite können auf Weiß
coca-cola, fanta und sprite können — sprite soda стоковые фото и изображенияCoca-Cola, Fanta und Sprite können
coca-cola, fanta und sprite flaschen aus glas — sprite soda stock-fotos und bilderCoca-Cola, Fanta und Sprite Flaschen aus Glas
coca-cola, fanta und sprite dosen und schweppes — sprite soda stock-fotos und bilderCoca-Cola, Fanta und Sprite Dosen und Schweppes
nahaufnahme des sprite können mit textfreiraum — sprite soda stock-fotos und bilderNahaufnahme des Sprite können mit Textfreiraum
рука, держащая дозу спрайта — стоковые фото и изображения спрайтаРука, держащая дозу спрайта
спрайт на газировке — фото и изображения спрайта на газированной водеSprite auf Eis
кока-кола, фанта и спрайт flaschen auf dem weißen hintergrund. — стоковые фото и изображения спрайтов содыCoca-Cola, Fanta и Sprite Flaschen auf dem weißen Hintergrund.
Доза Coca-Cola, Fanta und Sprite Getränke на льду — sprite soda stock-fotos und bilderDose Coca-Cola, Fanta und Sprite Getränke на льду
Soda-Dosen, die isoliert auf weißem Hintergrund
coca-cola, fanta und sprite kunststoff-flaschen — sprite soda stock-fotos und bilderCoca-Cola, Fanta und Sprite Kunststoff-Flaschen
New Sprite Kunststoff-Flaschen for 2016 Jahr — Sprite Soda Stock-Fotos und BilderNeue Sprite Kunststoff-Flaschen for 2016 Jahr
Coca-Cola Lieferwagen — Sprite Soda Stock-fotos und BilderCoca-Cola Lieferwagen
Sprite 2-Liferwagen flasche auf einem isolierten hintergrund. — спрайт сода стоковые фото и фотографииSprite 2-литровый-Flasche auf einem isolierten Hintergrund.
рука, держащая дозу спрайта — стоковые фото и изображения спрайтаРука, держащая дозу спрайта
mann trinkt mcdonalds soda auf einem der vom backgroun — сода спрайт стоковые фотографии и изображенияMann trinkt McDonalds soda auf einem der vom backgroun
glas-flaschen sprite — sprite soda stock-fotos und bilder Pepsi und Coca-Cola, fanta limo getränke — sprite soda stock-fotos und bilderPepsi und Coca-Cola, Fanta Limo Getränke
beliebte getränk glas-flaschen limonade — sprite soda stock-fotos und bilderBeliebte Getränk Glas-Flaschen Limonade
eis kalten getränken — sprite soda stock-fotos und bilderEis kalten Getränken
sprite und fanta und coca-cola glas-flaschen — sprite soda stock-fotos and bilderSprite und Fanta und Coca-Cola Glas-Flaschen
sprite drink in kann auf eis isoliert auf weißem hintergrund — sprite soda stock-fotos und bilder фотографии и изображенияSprite расположен на стекле Picknick-Tisch mit Platz für Text
sprite — спрайт газированные фото и изображенияSprite
вспыхивает в Майами-Бич. — фото со спрайтом и фотографияFlaschen в Майами-Бич.
Sprite drink in kann auf eis isoliert auf weißem hintergrund — sprite soda stock-fotos und bilderSprite drink in kann auf eis isoliert auf weißem Hintergrund
coca-cola, fanta und sprite flaschen aus glas — sprite soda stock-fotos und bilderCoca-Cola, Fanta и Sprite Flaschen aus Glas
flaschenverschlüsse of coca-cola-produkte — sprite soda stock-fotos und bilderflaschenverschlüsse of Coca-Cola-Produkte
abgeflachte sprite können — sprite soda stock-fotos und bilderAbgeflachte Sprite können
spufrite wedannen stock-fotos und bilder фото и фотоSprite können auf Weiß
coca-cola, fanta und sprite und schweppes flaschenverschlüsse — sprite soda stock-fotos und bilderCoca-Cola, Fanta und Sprite und Schweppes Flaschenverschlüsse
coca-cola, fanta und sprite flaschen aus glas — sprite soda stock-fotos und bilderCoca-Cola, Fanta und Sprite Flaschen aus Glas
coca-cola erfrischungsgetränke marken — sprite soda stock-fotos und bilderCoca-Cola Erfrischungsgetränke Marken
Группа оптовых продаж газированных напитков в алюминиевой дозировке на весу — спрайт содовая стоковые фотографии и изображенияГруппа фоновых продаж содовых напитков в алюминиевых дозах на Вайс
drei berühmten — спрайт содовая стоковые фотографии и изображенияDrei berühmten
Всемирная штаб-квартира Coca-Cola — стоковые фотографии и изображения спрайтов с газировкойМировая штаб-квартира Coca-Cola
Coke verkaufsautomat — спрайт содовые стоковые фотографии и изображенияCoke Verkaufsautomat
спрайт — спрайт содовые стоковые фотографии и изображения2 Sprite 1 Напиток спрайта в Канне на озере Изолиерт на Вайсем Хинтергрунд — Напиток спрайт в Канн на озере Изолиерт на Вайсем Хинтергрунд
Напиток Спрайт в Канне на озере Изолиерт на Вайсем Хинтергрунд
Напиток спрайт на Фистрал-Бич, Ньюквей, Корнуолл. — стоковые фото и изображения спрайтов содыEinstreu auf Fistral Beach, Ньюквей, Корнуолл.
Лиферантен — сода спрайт стоковые фото и фотографииЛиферантен
Алкогольные и безалкогольные напитки получают в Мьянме — сода спрайт стоковые фото и изображенияАлкогольные и безалкогольные напитки Получают стоковые фото и изображения в Мьянме
Алюминий изображениеAluminium können von Sprite
isoliert, sprite metallkappe — sprite soda stock-fotos und bilderIsoliert, Sprite Metallkappe
flaschen sprite — стоковые фото и фотографии спрайтов с содовойFlaschen Sprite
винтажное искусство кока-колы в коробке. стеклянная вспышка — спрайт сода стоковые фотографии и изображенияVintage Kunststoff Coca-Cola-Boxen. Glas-Flaschen
Спрайт-напиток в Канне, Изолирт на Weißem Hintergrund — Sprite Soda Stock-Fotos und BilderСпрайт-Напиток в Канн, Isoliert Auf Weißem Hintergrund
Манн гружен лимузин flaschen von lkw — Sprite Soda Фото и ФотоMann Laden Limo Флашен фон LKW
ein berber-kühlschrank — mit einem schnee-schmelze-wasserfall kühlen getränke in flaschen — sprite soda stock-fotos und bilderEin Berber-kühlschrank — mit einem Schnee-Schmelze-Wasserfall kühl
ernährung sprite metallkappe — sprite soda stock-fotos изображениеErnährung Sprite Metallkappe
Kalte getränke zum verkauf — sprite soda stock-fotos und bilderKalte Getränke zum Verkauf
sprite drink in kann auf eis isoliert auf weißem hintergrund — sprite soda stock-fotos und bilderSprite drink in kann auf Eis isoliert auf weißem Hintergrund
Coke verkaufsautomat — sprite soda stock-fotos und bilderCoke Verkaufsautomat
Рука, держащая дозу sprite — sprite soda stock-fotos und bilderРука, держащая Sprite Dosen
фон 3Sprite Bottle — изображения и фото
88 изображения
- изображения
- фотографии
- графика
- вектор
- видео
Beste Qualität
Durchstöbern Sie 88
флакон со спрайтом Stock-Photografie und Bilder. Oder starten Sie eine neuesuche, um noch mehr Stock-Photografie und Bilder zu entdecken. кока-кола, фанта и спрайт — бутылка со спрайтом стоковые фотографии и изображениякока-кола, фанта и спрайт
художественный флакон спрайт — бутылка со спрайтом стоковые фотографии и изображенияKunststoff-Flaschen Sprite
спрайт — бутылка со спрайтом сток- фотографии и изображенияSprite
glas-flaschen sprite — бутылка со спрайтом стоковые фото и изображенияGlas-Flaschen Sprite
кока-кола, фанта и спрайт flaschen aus glas — спрайт бутылка со стоковыми фотографиями и изображениямиCoca-Cola, Fanta и Sprite Flaschen aus Glas
спрайт flaschen isoliert auf weißemhintergrund — бутылка со спрайтом стоковые фото и изображенияSprite Flaschen isoliert auf weißem Hintergrund
coca-cola, fanta und sprite kunststoff-flaschen — бутылка со спрайтом стоковые фотографии и изображенияCoca-Cola, Fanta und Sprite Kunststoff-Flaschen
coca-cola, fanta und sprite flaschen auf dem weißen hintergrund. — бутылка со спрайтом, фото и изображенияCoca-Cola, Fanta и Sprite Flaschen auf dem weißen Hintergrund.
Напиток flasche Sprite, isoliert auf weiss — бутылка спрайта, фото и фотографииНапиток flasche Sprite, isoliert auf Weiss
Einstreu на пляже Фистрал, Ньюквей, Корнуолл. — стоковые фото и изображения бутылок спрайтовEinstreu auf Fistral Beach, Newquay, Cornwall.
coca-cola lieferwagen — бутылка со спрайтом стоковые фото и изображенияCoca-Cola Lieferwagen
стеклянная бутылка со спрайтом, фотографии и изображениястеклянная бутылка со спрайтом, фото и изображения
coca-cola, fanta und sprite, стеклянная бутылка со спрайтом, фотографии и изображенияCoca-Cola , Fanta und Sprite Flaschen aus Glas
pepsi und coca-cola, fanta limo getränke — бутылка спрайта стоковые фотографии и изображенияPepsi und Coca-Cola, Fanta Limo Getränke
flaschen sprite — бутылка спрайта стоковые фотографии и изображенияFlaschen Sprite
Neue Sprite Kunststoff-Flaschen for 2016 Jahr — бутылка Sprite, стоковые фотографии и изображенияNeue Sprite Kunststoff-Flaschen for 2016 Jahr
sprite und fanta und coca-cola glas-flaschen — бутылка Sprite, стоковые фотографии и изображенияSprite und Fanta Coca-Cola Glas-Flaschen
sprite können auf weiß — бутылка спрайта стоковые фотографии и изображенияSprite können auf Weiß
flaschen coca-cola, fanta und sprite und mezzo-mix — бутылка спрайта стоковые фотографии и изображенияFlaschen Coca-Cola , Фанта и Спрайт и Меццо-Микс
coca-cola, fanta und sprite flaschen aus glas — бутылка со спрайтом стоковые фото и изображенияCoca-Cola, Fanta und Sprite Flaschen aus Glas
кока-кола, fanta und sprite und schweppes flaschenverschlüsse — бутылка со спрайтом стоковые фотографии и изображенияCoca-Cola, Fanta и Sprite und Schweppes Flaschenverschlüsse
drei berühmten — бутылка sprite stock-fotos und bilderdrei berühmten
спрайт 2-литровая бутылка на изолированном фоне. — бутылка со спрайтом стоковые фото и изображенияSprite 2-литровый-Flasche auf einem isolierten Hintergrund.
Lieferanten — Спрайт бутылка Сток -Фотос и БилдерLieferanten
Alkoholische und alkoholfreie getränke zum verkauf в Myanmar — Спрайт бутылка Стокол -Фотос и Слово -Форс -Флор. Coke Verkaufsautomat coca-cola, fanta und sprite flaschen auf dem pepsi-box-vintage — бутылка со спрайтом сток-фото и фотокока-кола, фанта и спрайт Flaschen auf dem pepsi-box-vintage
isoliert, sprite metallkappe — бутылка спрайта, фотографии и изображенияIsoliert, Sprite Metallkappe
вспыхивают в Майами-Бич. — бутылка со спрайтом сток-фото и изображениеFlaschen в Майами-Бич.
Coke verkaufsautomat — бутылка со спрайтом, фото и фотографии illustratives redaktionelles bild — бутылка со спрайтом, стоковые фотографии и изображенияБелград, Сербия, 12 мая 2020 г.: Sprite Softdrink Riesenflasche… Sprite Metallkappe
бутылку с алкоголем можно купить в супермаркете einem — бутылки со спрайтом, фото и фотографиибутылку без алкоголя можно получить в супермаркете
World of Coca-Cola в Атланте, Джорджия — бутылки со спрайтом, фото и фотографииWorld of Coca-Cola в Атланте, штат Джорджия
isolierte flasche sprite getränk — стоковые фотографии и изображения бутылок спрайтовIsolierte Flasche Sprite Getränk
coca-cola, sprite flaschen — стоковые фотографии и изображения бутылок спрайтовCoca-Cola, Sprite Flaschen
verkaufsautomat — бутылка со спрайтом, стоковые фотографии и изображенияVerkaufsautomat
смешанный алкогольный напиток eimer für den verkauf – vollmondparty thailand — бутылка со спрайтом, фото и изображениясмешанный алкогольный напиток Eimer für den Verkauf – Vollmondparty. ..
Fanta und Sprite flaschen — бутылка спрайта стоковые фото и изображенияFanta und Sprite Flaschen
винтажный художественный кока-кола-бокс. стеклянная бутылка — спрайт стоковые фото и изображенияVintage Kunststoff Coca-Cola-Boxen. Glas-Flaschen
лимузин с грузом человека flaschen von lkw — бутылка со спрайтом стоковые фотографии и изображениялимузин с грузом человека флашенный от LKW
coca-cola, fanta und sprite, cappy schweppes metallkappe — бутылка со спрайтом стоковые фотографии и изображенияCoca-Cola, Fanta und Sprite, Cappy Schweppes Metallkappe
купить в Польше, Европа — бутылка со спрайтом, фото и фотографии Фотографии и изображенияCoke Verkaufsautomat
Газированная бутылка — бутылка со спрайтом стоковые фотографии и изображенияСодовая бутылка
Доза, зажигание и лимонад — бутылка со спрайтом стоковые фотографии и изображенияДоза, Süßigkeiten und Limonade
ein berber-kühlschrank — mit einem schnee-schmelze-wasserfall kühlen getränke in flaschen — бутылка sprite stock-fotos und bilderEin Berber-kühlschrank — mit einem Schnee-Schmelze-Wasserfall kühl
flaschen sprite 8,5 г алюминий — бутылка sprite стоковые фотографии и изображенияFlaschen Sprite 8,5 г алюминий
женщина в бутылке для бутылок со спрайтом стоковые фотографии и изображенияженщина в складских помещениях автоматических стеновых шкафов. ..
бутылка кока-колы — бутылка спрайта стоковые фото и изображениябутылка кока-колы
mit einem besonderen gasgemisch angereicherter soda flaschen sprite — бутылка спрайта стоковые фото и изображенияMit einem besonderen Gasgemisch angereicherter soda Flaschen…
cola, sprite in vietnam — бутылка со спрайтом, фото и фотоКола, спрайт во Вьетнаме
verkaufsautomat im öffentlichen park in tokio, japan — бутылка со спрайтом, фото и фотоVerkaufsautomat в оффентлихен парке в Токио, Япония
sprite — бутылка спрайта стоковые фотографии и изображенияsprite
verkaufsautomat im öffentlichen park in tokio, japan — бутылка спрайта стоковые фотографии и изображенияVerkaufsautomat im öffentlichen park in Tokyo, Japan
verkaufsautomat im öffentlichen park in tokio, japan — бутылка sprite japan стоковые фотографии и изображенияVerkaufsautomat im öffentlichen park в Токио, Япония
palästinensische familie erntet Oliven in Zababdeh, westjordanland — бутылка спрайтов0021 фон 2Sprite (история, ароматизаторы, изображения и реклама)
Sprite — это прозрачная газировка со вкусом лимона и лайма, известная своим зеленым цветом. Sprite не содержит кофеина, имеет освежающий вкус и имеет широкую базу поклонников с момента его появления в 1961 году. Sprite часто считают близким конкурентом 7Up, другого безалкогольного напитка со вкусом лимона и лайма без кофеина. Sprite имеет широкую фан-базу, и демографическая ситуация с годами немного изменилась. Тем не менее, Sprite удалось сохранить статус одной из самых популярных газированных напитков в мире.
Пожалуйста, оставьте отзыв или какие-либо воспоминания об этой закуске в комментариях внизу этой страницы. Благодарю вас!
Содержание
- 1 Информация о Sprite
- 1.1 Компания, которая изобрела и делает Sprite
- 1,2 Год, когда Sprite был изобретен
- 1,3 лозунги
- 10. 1 Размеры и типы контейнеров Sprite
- 14.1 Подробнее о закусках!
- 15.1 Кому принадлежит Sprite?
- 15.2 Сколько сахара в Sprite?
- 15.3 Когда был изобретен Спрайт?
- 15.4 Сколько калорий в Sprite?
- 15.5 Сколько кофеина в Sprite?
- 15.6 Когда был сделан спрайт?
- 15.7 Что такое спрайт?
- 15.8 Что такое Sprite?
- 15.9 Сколько лет Спрайту?
- 15.10 Кто рэпер в рекламе Sprite?
Sprite — безалкогольный напиток со вкусом лимона и лайма, свежим чистым вкусом, прозрачным и не содержащим кофеина. Он был изобретен и производится компанией Coca-Cola. Говорят, что Злоба начала свою жизнь в 1959 как тип напитка Fanta, который впервые был разработан в Западной Германии в 1959 году как Fanta Klare Zitrone («Прозрачная лимонная фанта»). Следует отметить, что Fanta — это напиток, изобретенный во время Второй мировой войны из-за нехватки запасов в Германии в то время, из-за чего компания не могла производить Coca-Cola в этом регионе. В других сообщениях говорится, что Sprite изначально задумывался в 1956 году, когда компания Coca-Cola разработала терпкую газированную воду прозрачного цвета, которая сначала продавалась как газированный напиток и миксер для напитков. Также кажется, что Sprite, возможно, был протестирован в Соединенных Штатах перед его официальным выпуском. Sprite был завезен в Соединенные Штаты Америки в 19 году.61 и должен был составить конкуренцию аналогичному безалкогольному напитку 7 Up , единственной крупной лимонно-лаймовой газировке на рынке в то время.
До того, как Spite был выпущен для широкой публики, огромное внимание уделялось таким аспектам, как цвет фирменного стиля продукта и дизайн внешнего вида продукта. Дизайнеры и инженеры компании Coca-Cola провели огромное количество исследований, были рассмотрены десятки дизайнов бутылки Sprite, и большое внимание было уделено логотипу и маркировке Sprite. Зеленый был выбран в качестве основного цвета для бренда, и он активно продавался и был связан со Sprite как с продуктом. Зеленый был выбран для представления спрайта из-за его освежающего и заметного цвета, который не только выделяется как легко различимый холодный цвет, но и довольно неагрессивен, поскольку является наиболее распространенным естественным цветом в мире. природа. Sprite преуспел в своем брендинге, и продукт получил прочную связь с идеей освежения, а также запомнился выдающимся зеленым цветом своего бренда.
Когда Sprite был представлен публике в 1961 году, он был встречен очень положительно. Сначала казалось, что Sprite продается больше для взрослых, но со временем газировка стала более популярной среди подростков, и примерно в 1980-х годах маркетинг изменился, чтобы отразить это. Популярность Sprite продолжала расти с течением времени, и компания Coca-Cola активно рекламировала бренд Sprite. В 1967 году Sprite был доступен примерно 85 процентам населения США и продавался как минимум в 39 странах мира.страны. Компания Coca-Cola, которой принадлежал Sprite, использовала свои связи с крупными ботлерами, чтобы продвигать свою продукцию, помогая Sprite продвигаться вперед по сравнению с конкурентами 7-up. Во многом благодаря силе системы розлива Coca-Cola, Sprite в конечном итоге стал лидером рынка в категории газированных напитков с лимоном к 1978 году. 190 стран. Это почти все страны мира, за исключением нескольких.
Компания Sprite выпустила множество дополнительных продуктов и вкусов в дополнение к оригинальной версии. Примеры этого включают Sprite со вкусом клюквы, Sprite 6 Mix и Sprite Super Chilled, в специальной упаковке которых производился лед в бутылке. С годами формула Sprite претерпела некоторые изменения. В 2013 году Sprite в Великобритании изменили содержание сахара и начали использовать стевию в качестве подсластителя, снизив калорийность примерно на одну треть от прежнего количества. В 2018 году Sprite прекратил использовать стевию в качестве ингредиента и снова изменил баланс сахара до 3,3 грамма на 100 мл Sprite в дополнение к добавлению других ингредиентов, таких как аспартам. Утверждалось, что это изменение еще больше снизило общее количество калорий в Sprite и, вероятно, было ответом на потребителей, которые все больше заботятся о калориях. Следует отметить, что Sugar-Free Spite выпускалась десятилетиями, впервые выпущенная в 19 году.74. Похоже, что изменения формулы, которые произошли с 2013 по 2018 год, были ограничены Европой и не были отражены в Sprite, продаваемом в Соединенных Штатах.
Компания, которая изобрела и производит SpriteSprite производится компанией The Coca-Cola Company, которая также является компанией, которая изобрела Sprite. Компания Coca-Cola — известный американский производитель напитков, который продает множество напитков, в том числе свой знаменитый флагманский продукт, также называемый Coca-Cola. Sprite — второй самый продаваемый напиток компании Coca-Cola по состоянию на 2019 год..
Год, когда был изобретен спрайтВпервые спрайт был выпущен для американского рынка в 1961 году с большой помпой. Однако отчеты показывают, что Sprite был продан и протестирован до этой даты. Некоторые утверждают, что Sprite был первым напитком Fanta со вкусом лимона и лайма, сделанным в Германии в 1959 году. Другие утверждают, что первая версия Sprite была впервые произведена в Соединенных Штатах в 1956 году, когда компания Coca-Cola разработала газированную прозрачную терпкую газировку и выпустила на рынок. это и как безалкогольный напиток, и как миксер. Они начали тестировать его и активно работать над его дизайном, прежде чем выпустить его как Sprite Soda в 19 году.61.
СлоганыУ Sprite было несколько слоганов для продвижения напитка. Один из самых известных слоганов Sprite — «Повинуйся своей жажде». Иногда слоган «Повинуйся» использовался как более простое изречение и подразумевал психологическую связь с продуктом и его прошлыми лозунгами. Еще один новый слоган, используемый для Sprite, — «Свобода от жажды». Это помогает связать газировку с идеей о том, что Sprite — освежающий напиток, и демонстрирует немного новое мышление в маркетинге Sprite.
Для большинства людей покупка Sprite довольно проста. это один из самых доступных напитков, которые можно найти в магазинах. Вы часто можете найти Sprite в таких местах, как Dollar General или Stop&Shop. Sprite продается по всей территории Соединенных Штатов и продается почти в 200 странах. Некоторые ароматы Sprite труднее найти или они сняты с производства, но иногда вы можете найти ограниченный аромат на полках магазинов. Вы также можете купить Sprite онлайн, что может быть хорошим вариантом для тех, кто хочет приобрести большое количество Sprite за один раз, или для тех, кто ищет тот особый вкус, который им нужен. Вы можете просмотреть список магазинов, которые продают или продали Sprite, посмотрев ниже. Вы также можете проверить ниже предложения купить Sprite онлайн и отправить его вам.
Sprite Logo
Buy Sprite Online Stores That Sell SpriteHere is a list of stores that sell or have sold Sprite:
- Stop And Shop
- Big Y
- ShopRite
- 7-Eleven
- Walmart
- Walgreen’s
- Target
- Rite Aid
- Citgo
- S & S Mini Mart
- Городской рынок
- General
- Market Street 0004
- CVS
- SAM’s
- Krauszer’s Food Stores
Вот список некоторых из различных ароматов Sprite:
- Original
- 3
- 9
- 3
- 9
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3
- 3 9000 3
- 3 9000 3
- 3
- 3 9000 3
- 3
- 9
- 3.
- Sprite Cranberry (также входит в Cranberry Zero)
- Lemon Lime and Cucumber
- Sprite Tropical со вкусом
- Sprite со вкусом огурца
- LeBron’s Mix «6 Mix» (со вкусом натуральной вишни и апельсина)
- Микс от Sprite. (Тропическая ягода)
- Tropical Remix Sprite
- Lemon Lime and Cherry
- Berryclear Remix Sprite
- Aruba Jam Remix Sprite
- Grape Remix «Flavor Hits» (сделай сам пакеты) «Flavor Vanilla» it
- Cheery «Flavor Hits» (пакетики «Сделай сам»)
- Sprite Lemonade
- Sprite со вкусом мяты (напиток Sprite с маркировкой Ice Mint)
- Sprite Ice
- Sprite On Fire (с ощущением жжения имбиря.)
- Аромат персика
- Аромат лимона и мяты
- Sprite Прохладная мята
- Sprite со вкусом зеленого чая
- Лимон и мята
- Зимняя пряная клюква (Ограниченная серия)
Вот ингредиенты Спрайта.
- Газированная вода
- Сахар
- Лимонная кислота
- Подсластители (ацесульфам К, аспартам)
- Регулятор кислотности (цитрат натрия)
- Натуральные лимонные и лаймовые ароматизации
Размер порции: | 11111111145555144455514455111111111111111111111111111111111111111111111111111н. | ||||
Количество на порцию | |||||
Калории из жира | 0 | 0 Калории | 00611 140 | ||
Total Fat | 0g | 0% | |||
Sodium | 65mg | 3% | |||
Total Carbohydrates | 38g | 13% | |||
Sugars | 38g | ||||
Protein | 0g | ||||
Calcium | 0% | ||||
Iron | 0% |
- Суточная норма в процентах основана на диете на 2000 калорий.
Компания Sprite предусмотрительно вложила средства в рекламу и маркетинг безалкогольного напитка, при этом огромное внимание было уделено его маркетинговому имиджу, прежде чем он попал на прилавки. У дизайна бутылки было много разных версий, которые рассматривались, логотип рассматривался в центре внимания, и было просмотрено множество данных. Sprite был напитком, который инвесторы хотели получить правильно. Команда разработчиков Sprite уделила особое внимание цвету своего бренда, выбрав зеленый цвет, который означает «свежесть». Придание ощущения свежести является ключевым моментом в рекламных и маркетинговых кампаниях газированных напитков Sprite, некоторые из ее лозунгов: «Повинуйся своей жажде», «Повинуйся» и «Свобода от жажды».
Sprite рекламирует во многих формах, во многих телевизионных рекламных роликах с газировкой и талисманом по имени Miles Thirst. Компания Sprite провела кампании в социальных сетях, например, использовала штрих-коды Snapchat на банках с газировкой, чтобы сделать Sprite более интересным и интересным для потребителей. Когда Spite был впервые выпущен, он рекламировал больше для взрослой аудитории, но с годами его рекламный и маркетинговый стиль сильно тяготел к подросткам и молодым людям, предлагая им освежающий напиток с маркетинговым стилем и взглядами, которые нравятся молодежи. и молодые люди современности. Sprite использовала рекламные щиты, которые рассказывают анекдоты прохожим, чтобы рекламировать свой бренд безалкогольных напитков, надеясь развлечь людей и вызвать интерес к Sprite. Sprite также использует рекламу на радио и в газетах для продвижения безалкогольного напитка. Визуальные изображения Sprite часто расположены и направлены именно так, чтобы вызвать ощущение, что Sprite предлагает освежение от жажды, и этот угол рекламы Sprite был очень успешным в продвижении газировки.
Sprite иногда использует специальные вариации или темы ограниченного выпуска для оформления упаковки на своих бутылках и банках. Одним из примеров является летняя лимитированная коллекция Sprite, в которой представлены произведения искусства в стиле рэп и хип-хоп. Одна тема упаковки, которую трудно найти, — это стиль упаковки огурца для Sprite со вкусом огурца, хотя его можно найти в России и Южной Африке. Sprite также выпустила специальные тематические банки с изображением звезды бейсбола Коби Брайанта. Была выпущена версия Sprite со вкусом Леброна Джеймса, в которой была представлена собственная вариация изображения для контейнера с напитком.
Упаковка SpriteSprite использует оттенки зеленого, синего и серебристого цветов, часто смешивая цветовые схемы. Ваша типичная бутылка и банка газировки Sprite окрашены в зеленый и синий цвета, причем синий цвет часто становится более насыщенным кверху, а зеленый — к низу; Область серебристого цвета часто составляет центральную часть контейнера, в котором находится газировка, а логотип «Спрайт» обычно расположен в центре бутылки или банки обычно окрашены в серебристый или белый цвет. Часто, хотя, возможно, и не всегда, где-то на бутылке или банке вашей обычной газировки Sprite изображен лимон. Этот лимон, изображенный на упаковке, а также преобладающие зеленые цвета и смешивающиеся с ним голубые, вероятно, являются попыткой передать потребителю свежесть и освежающий эффект. В некоторых случаях желтый лимон, изображенный на банке, будет очень большим, занимая приличное количество арт-пространства упаковки, однако иногда он будет совершенно незаметен.
В целом, зеленый цвет является основным цветом, который Sprite использует для своей упаковки, однако альтернативные вкусы и версии Sprite иногда не включают зеленый цвет, а если и включают, то очень мало. Однако они часто используют такие цвета, как серебристый, белый или «прозрачный», вероятно, чтобы сохранить тему, пытаясь создать впечатление освежающего. Например, Sprite Cranberry Zero использует очень мало зеленого цвета для своей упаковки и окраски материала контейнера; Вместо этого он использует серебристый, белый и «прозрачный» в качестве подавляющего основного цвета для своего внешнего вида, наряду с некоторыми красными надписями, которые предположительно означают, что это клюквенный вкус. В некоторых версиях газировки Sprite, таких как Sprite Zero, использовалась упаковка, в которой в качестве основного цвета используется синий цвет, в дополнение к прозрачной пластиковой бутылке; Опять же, это может быть еще одной попыткой создать впечатление освежающего для потребителя.
Размеры и типы контейнеров SpriteГазировка Sprite поставляется в контейнерах различных типов и размеров. Спрайт продается в стеклянных бутылках, пластиковых бутылках и алюминиевых банках. Стеклянные бутылки газировки Sprite продавались в бутылках по 8 жидких унций и бутылках по 12 жидких унций. Пластиковые бутылки Sprite продаются объемом 1, 1,5 и 2 литра, а также объемом 20 и 12 жидких унций. Контейнеры из алюминиевых банок выпускаются в размерах на 12 жидких унций, 16 жидких унций и «мини» на 7,5 жидких унций.
Обзор газировки SpriteЭтот обзор посвящен газировке Sprite, оригинальной версии лимонно-лаймовой. Бутылка Sprite темно-зеленого цвета, использованная в этом обзоре, вызывает чувство свежести. Просто глядя на зеленую бутылку Sprite, вы можете испытать жажду или иным образом жаждать освежения, которое предлагает зеленая бутылка и жидкость внутри нее. Возможно, они действительно знали, что делают, когда дело дошло до внешнего вида Sprite, потому что они действительно чувствовали, что это будет освежающая газировка.
Открывая бутылку Sprite для проверки, из контейнера можно ощутить легкий намек на пикантный запах лимона и лайма. Sprite отличается легким вкусом, предпочитая водному опыту с заметным, но не подавляющим вкусом лимона и лайма. Как и его ближайший конкурент Canada Dry Ginder Ale, Sprite не стремится подавить чувства тяжелым вкусом, а вместо этого дает вам сильный, но не слишком сильный аромат лимона и лайма в освежающем и почти водном опыте. Sprite был действительно освежающим опытом, настолько, что мы захватили немного Takis Fuego и решили выдержать жару. Оказывается, лимонно-лаймовый аромат Sprite хорошо сочетается со вкусом перца чили и лайма Takis Fuego, и Sprite удалось охладить огненный аромат, который вызывали Takis.
Опыт со SpriteЯ не пробовал Sprite до подросткового возраста, так как в то время я больше увлекался Coca-Cola. Все мои друзья пили Спрайт, и я не понимал, в чем тут дело. Некоторые из них казались удивленными, что я не пью спрайт, и думали, что это странно. Я думал, что это странно, что мои друзья пьют Sprite, и они думали, что это странно, что я этого не делал. Они продолжали говорить, что это было освежающим и имело приятный вкус. Я думал: «Не знаю, чистую газировку?» — и всегда отказывался от нее. Я не пробовал Sprite, пока мне не исполнилось 16 лет, прежде чем однажды я попробовал его в доме друга. Я обнаружил, что это такое приятное отличие от «коричневых газированных напитков», что меня сразу зацепило. После этого я просто не хотел возвращаться, у Спрайта был довольно «натуральный» вкус, и он действительно был для меня более освежающим, чем Кока-Кола. Я чувствовал, что он был супергазированным, и мне это очень нравилось. После этого я просто остался с ним и с тех пор стал его большим поклонником!
Кипящий спрайтМы решили вскипятить содовую спрайта в кастрюле, чтобы посмотреть, что получится. Мы использовали неглубокую кастрюлю для кипячения, и Sprite потребовалось несколько минут, чтобы нагреться после того, как мы применили тепло от горелки; Через несколько минут на огне Спрайт начал мягко кипеть. Спрайт какое-то время продолжал кипеть, даже после включения нагрева на несколько минут, чтобы ускорить процесс. В конце концов, мы получили довольно сильное кипение, но кипение было не таким сильным, как кажется при кипячении обычной воды. Кипящий Спрайт начал испускать пар примерно через 10 минут над горелкой, и Спрайт начал медленно испаряться. Мы добавили немного Takis Fuego в Sprite, чтобы посмотреть, что произойдет, и Sprite получился темно-розового цвета из-за того, что специи из Takis Fuego высыпались в кипящий Sprite. Фотографии, сделанные Takis Fuego в кипящем Спрайте, показывают светло-розовую окраску, но на самом деле истинный цвет, который принял Спрайт, был очень темно-розовым и представлял собой интересное зрелище.
Залив спрайт в пантрупирование, более сприторное, еще более спрайт-скрит в Pansprite под рисованием над духовкой Flamesprite EvaporatingsPrite кипящий рекламных роликов с участием Sprite youtube.com/embed/zbavu2Al-ME?feature=oembed» frameborder=»0″ allow=»accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»>GRANT HILL DRINKS SPRITE COMMERCIAL.
1991 РЕКЛАМА SPRITE KID N PLAY.
КЛАССИЧЕСКИЙ РЕКЛАМНЫЙ СПРАЙТ 1986 ГОДА.
Подробнее о закусках!
Starburst
Starburst — это карамель, похожая на ириску, мягкая, жевательная и обычно с фруктовым вкусом. Они имеют форму коробки и бывают нескольких цветов и вкусов.
Skittles
Skittles — красочные конфеты с фруктовым вкусом. Skittles представляют собой маленькие круглые леденцы в пакетиках с надписью «Попробуй радугу». Подробнее здесь.
Зерновые хлопья Froot Loops
Зерновые хлопья Froot Loops — красочные, яркие хлопья с фруктовым запахом и вкусом. Fruit Loops, известный своим талисманом с длинным клювом, очень популярен среди детей и взрослых.
Fruit by the Foot
Fruit By The Foot — это конфета длиной 3 фута со вкусом фруктов, которая бывает разных вкусов. Читайте здесь информацию о Fruit By The Foot.
Часто задаваемые вопросы по Sprite
Кому принадлежит Sprite?
Sprite производится компанией The Coca-Cola Company, которая также изобрела Sprite.
Сколько сахара в Спрайте?
52 г сахара на 600 мл спрайта.
Когда был изобретен Спрайт?
Спрайт был впервые представлен в Америке в 1961 году с большой помпой. Однако отчеты показывают, что Sprite был продан и протестирован до этой даты. Некоторые утверждают, что Sprite был первым напитком Fanta со вкусом лимона и лайма, сделанным в Германии в 1959 году. Другие утверждают, что первая версия Sprite была впервые произведена в Соединенных Штатах в 1956 году, когда компания Coca-Cola разработала газированную прозрачную терпкую газировку и выпустила на рынок. это и как безалкогольный напиток, и как миксер. Они начали тестировать его и активно работать над его дизайном, прежде чем выпустить его как Sprite Soda в 19 году.61.
Сколько калорий в Sprite?
Каждые 12 унций Sprite содержат 140 калорий.
Сколько кофеина в Спрайте?
В Sprite нет кофеина.
Когда был создан спрайт?
Спрайт был впервые представлен в Америке в 1961 году с большой помпой. Однако отчеты показывают, что Sprite был продан и протестирован до этой даты. Некоторые утверждают, что Sprite был первым напитком Fanta со вкусом лимона и лайма, сделанным в Германии в 1959 году. Другие утверждают, что первая версия Sprite была впервые произведена в Соединенных Штатах в 1956, когда компания Coca-Cola разработала газированную прозрачную терпкую газировку и продавала ее как безалкогольный напиток и как миксер. Они начали тестировать его и усиленно работать над его дизайном, прежде чем выпустить его под названием Sprite Soda в 1961 году.
Что такое Sprite?
Sprite — это прозрачная газированная вода со вкусом лимона и лайма, известная своим зеленым цветом. Sprite не содержит кофеина, имеет освежающий вкус и имеет широкую базу поклонников с момента его появления в 1961 году. Sprite часто считают близким конкурентом 7UP, еще одного безалкогольного напитка со вкусом лимона и лайма без кофеина.
Что такое Sprite?
Вот ингредиенты Спрайта. Газированная вода, сахар, лимонная кислота, подсластители (ацесульфам К, аспартам), регулятор кислотности (цитрат натрия), натуральные ароматизаторы лимона и лайма.
Сколько лет Спрайту?
Спрайт был впервые представлен в Америке в 1961 году с большой помпой. Однако отчеты показывают, что Sprite был продан и протестирован до этой даты. Некоторые утверждают, что Sprite был первым напитком Fanta со вкусом лимона и лайма в Германии, сделанным в 1959. Другие утверждают, что первая итерация Sprite впервые была сделана в Соединенных Штатах в 1956 году, когда компания Coca-Cola разработала газированную прозрачную терпкую газировку и продавала ее как безалкогольный напиток и как миксер. Они начали тестировать его и активно работать над его дизайном, прежде чем выпустить его как Sprite Soda в 1961 году.
Кто рэпер в рекламе Sprite?
Винс Стейплз — рэпер из рекламы Sprite.
Спрайты изображений CSS
❮ Назад Далее ❯
Спрайты изображений
Спрайты изображений представляют собой набор изображений, объединенных в одно изображение.
Веб-страница с большим количеством изображений может долго загружаться и генерировать несколько запросов к серверу.
Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускная способность.
Спрайты изображений — простой пример
Вместо использования трех отдельных изображений мы используем одно изображение («img_navsprites.gif»):
С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.
В следующем примере CSS указывает, какая часть «img_navsprites.gif» изображение для демонстрации:
Пример
#home
{
ширина: 46 пикселей;
высота: 44 пикселя;
фон: url(img_navsprites.gif) 0 0;
}
Попробуйте сами »
Объяснение примера:
-
-
ширина: 46 пикселей; высота: 44 пикселя;
— Определяет часть изображения, которую мы хотим использовать -
фон: url(img_navsprites. gif) 0 0;
— определяет фоновое изображение и его положение (0 пикселей слева, 0 пикселей сверху)
Это самый простой способ использования спрайтов изображений, теперь мы хотим расширить его на с помощью ссылок и эффектов наведения.
Спрайты изображений — создание списка навигации
Мы хотим использовать изображение спрайта («img_navsprites.gif») для создания списка навигации.
Мы будем использовать список HTML, поскольку он может быть ссылкой, а также поддерживает фоновое изображение:
Пример
#navlist {
позиция: относительная;
}
#navlist li {
margin: 0;
заполнение: 0;
стиль списка: нет;
позиция: абсолютная;
сверху: 0;
}
#navlist li, #navlist a {
height: 44px;
отображение: блок;
}
#home {
слева: 0px;
ширина: 46 пикселей;
фон: url(‘img_navsprites.gif’)
0 0;
}
#prev {
слева: 63 пикселя;
ширина: 43 пикселя;
фон: url(‘img_navsprites. gif’) -47px 0;
}
#далее {
слева: 129 пикселей;
ширина: 43 пикселя;
фон: url(‘img_navsprites.gif’)
-91px 0;
}
Попробуйте сами »
Объяснение примера:
- #navlist {position:relative;} — позиция устанавливается относительной для разрешения абсолютное позиционирование внутри него
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — поля и отступы установлены на 0, стиль списка удален, и все элементы списка абсолютное позиционирование
- #navlist li, #navlist a {height:44px;display:block;} — высота всего изображения 44px
Теперь начните позиционировать и стилизовать каждую конкретную часть:
- #home {left:0px;width:46px;} — Позиционируется полностью слева, и ширина изображения 46px
- #дом {фон: URL (img_navsprites.gif) 0 0;} — Определяет фон изображение и его положение (слева 0px, сверху 0px)
- #prev {left:63px;width:43px;} — смещено на 63 пикселя вправо (#home ширина 46 пикселей + дополнительное пространство между элементами), а ширина 43 пикселя 9. 0004
- #prev {background:url(‘img_navsprites.gif’) -47px 0;} — определяет фон изображение на 47 пикселей вправо (#home ширина 46 пикселей + линия 1 пиксель делитель)
- #next {left:129px;width:43px;} — позиционируется на расстоянии 129 пикселей от справа (начало #prev составляет 63 пикселя + #prev ширина 43 пикселя + дополнительный пробел), а ширина 43px
- #следующий {фон: URL(‘img_navsprites.gif’) -91px 0;} — Определяет фон изображение 91px вправо (#home ширина 46px + 1px разделитель строки + #prev ширина 43px + разделитель строки 1px)
Спрайты изображений — Эффект наведения
Теперь мы хотим добавить эффект наведения в наш список навигации.
Совет: Селектор :hover
можно использовать для всех элементов,
не только по ссылкам.
Наше новое изображение («img_navsprites_hover.gif») содержит три навигационных изображения и три изображения для эффектов наведения:
Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержка загрузки , когда пользователь наводит курсор на изображение.
Мы добавляем только три строки кода, чтобы добавить эффект наведения:
Пример
#home a:hover {
background: url(‘img_navsprites_hover.gif’) 0 -45px;
}
#prev a:hover {
background: url(‘img_navsprites_hover.gif’) -47px
-45px;
}
#next a:hover {
background: url(‘img_navsprites_hover.gif’) -91px
-45px;
}
Попробуйте сами »
Объяснение примера:
- #home a:hover {background: url(‘img_navsprites_hover.gif’) 0 -45px;} — Для всех трех изображений при наведении мы указываем одну и ту же позицию фона, только на 45 пикселей ниже
❮ Предыдущий Далее ❯
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Top Tutorials
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Лучшие примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.