•  
  •  
  •  
  •  
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (1 Голос)
Ведение работы со спрайтами в CSS - 5.0 out of 5 based on 1 vote

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

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

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

Разбор примера работы со спрайтами в css

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

  1. Кнопка не активна
  2. Если навести на кнопку, то она будет подсвечена
  3. Если нажать на кнопку она будет вдавлена

Чтобы удобней было работать со спрайтами созданы различные сервисы. Одним из наиболее простых является spritecow.com, им мы и воспользуемся для нашего примера.

Для начала в фотошопе нарисуем 3 состояния кнопки, должно получиться примерно это:

Работа со спрайтами в css

Как видно из картинки, в одном файле размещено сразу 3 картинки. 

Теперь откройте сервис spritecow.com, нажмите Open, и выберите созданную картинку. На экране появится: 

Работа со спрайтами в css

Теперь следует нажать на первое изображение в спрайте (состояние 1, кнопка не активна), и внизу вам будут представлены координаты картинки:

Работа со спрайтами в css

Такие же действия производим и с остальными состояниями кнопки, кликаем, и сохраняем позиции.

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

Обеспечим вас примером кода:

<html>
    <head>
        <title>Пример работы со спрайтами в css</title>
        <style type="text/css">
            /*
            Убираем у кнопок стили по-умолчанию
            */
            button {
                border: 0;
                outline: none;
                padding: 0;
                font-size: 0;
                cursor: pointer;
            }
            /* Не активное состояние кнопки */
            .go-site-web-now-ru {
                background: url('sprite.png') no-repeat -17px -14px;
                width: 285px;
                height: 44px;
            }
            /* При наведении на кнопку, перемещаем позиции спрайта на подсвеченную кнопку */
            .go-site-web-now-ru:hover {
                background-position: -17px -68px;
            }
            /* При нажатии на кнопку, перемещаем позиции спрайта на вдавленную кнопку */
            .go-site-web-now-ru:active {
                background-position: -17px -122px;
            }
        </style>
    </head>
    <body>
        <h1>Пример работы со спрайтами</h1>
        <button class="go-site-web-now-ru" onclick="location.href='http://web-now.pro/'">Перейти на сайт компании web-now</button>
    </body>
</html>

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

Портфолио
Память о Вас и Ваших близких на многие поколения
Подробнее
Прокат металла
Подробнее
Интернет-магазин кожи и меха
Подробнее
100% оригинальная парфюмерия в Москве
Подробнее
Вьетнамский ресторан премиум класса
Подробнее
Внедрение информационных систем
Подробнее
Организация международных конференций
Подробнее
Производство молочной продукции
Подробнее
Спортивный сайт
Подробнее
Интернет-магазин мебели и аксессуаров
Подробнее
Интернет-магазин электротранспорта
Подробнее
Сайт института актуальной экономики
Подробнее
Наши клиенты
Парк развлечений Boom Zoom
Алгор
Норбит
Molga Consulting
Metrotile
Нетология
Monqi
Премиум Пак
Aasha Herbals
Аджва
Салон красоты Сударушка
Пава
ТЦ &quot;Панфиловский&quot;
Фитнес Лаборатория
Система Главбух
Vanguard
GoAsia
ТЦ «Солнечный ветер»
Teledoc
Tchernov Cable
Отзывы
Благодарю компанию web-now.pro за помощь в разработке и запуске проекта POLITSECRETS.RU. Перед нами стояла задача – внедрить проект в сжатые сроки и по оптимальной цене. Порадовало то, что мне подроб...
Вера БлашенковаСекреты успешных выборов, Москва... апр.2016
Мне очень понравился подход с которым нас встретили "Ваша задача заниматься бизнесом, наша - сделать Вам представительство в сети". После этого ребята разработали полное тз на проект, мы внесли пожела...
МаксимIT-TASK, Москва... янв.2016
Работа проделана хорошо! Дизайнер и менеджер на отлично. Надеюсь на сотрудничество в дальнейшем. Есть шероховатости в деталях по задачам, но приятно сказывается оперативность и желание исправить, внес...
БруноСоциальная сеть След Жизни, Москва... янв.2016
Работой остались очень довольны. К работе подходят ответственно, аккуратно, открыто. Проект был сдан чуть раньше срока, по ходу работы возникали изменения, все они принимались безоговорочно, работа вы...
ЕвгенийМагазин текстиля, Москва... дек.2015
Сотрудничаем с 2007 года и сделали не один проект. Самое главное - команда умеет отстаивать своё мнение и постоянно развивается.
МарияМеждународные конференции, Москва... дек.2015
Спасибо всему коллективу компании! Разработали красивый и что самое главной рабочий интернет магазин! Реклама настроена и запущена, продажи идут, бизнес развивается! Нам постоянно подсказывают о новых...
ВадимИнтернет магазин Aromatic.pro, Москва... сен.2015
Большое спасибо команде за оперативность, качественные работы, отличный креатив и привлекательные цены!
Виктория, ОАО "Фармстандарт... июль.2015
Здравствуйте уважаемые партнеры! С наступающим Новым Годом! Желаю Вам дальнейшего процветания и успехов в Вашей благородной работе! С вами приятно сотрудничать! Очень благодарен Вам за своевременное о...
Сергей ЮрченкоКинотруд, Москва... дек.2014
Благодарим команду Brand Now и лично Дениса Логинова за оригинальное видение,разнообразие идей, четкость взаимодействия и безукоризненное соблюдение сроков выполнения проекта! Планируем продолжить сот...
ТатьянаBizness Linkerz... июль.2014
Компания КУН выражает благодарность за сотрудничество: непростая задача была выполнена в требуемые сроки и полностью удовлетворила заявленному ТЗ. Приятно удивила готовность Генерального директора нач...
Мария, Компания КУНhttp://www.kuhn.com/... апр.2014
Все отзывы
Добавить отзыв