Спрайт CSS

Аватар пользователя loik1
Не в сети
Последнее посещение: 3 года 1 неделя назад
Зарегистрирован: 2014-05-31
Сообщения:
Баллы: 0.18

Мало кто знает, что иконки на сайте можно выводить двумя способами. Первый традиционный с помощью тега img я рассматривать не буду. Я хочу вам рассказать об альтернативном способе. Он сложен в понимании для людей далеких от CSS, но тем не менее он достаточно эффективен. Кстати на этом сайте используется именно этот метод вывода иконок. Принцип действия. Все иконки собираются в одну большую картинку с помощью специальных программ. Это и есть спрайт. Пример http://darkwm.ru/design/theme/default/im... Он подключается к стилю как обычная картинка и методами CSS режется на отдельные куски. Плюсы Экономия процессорной памяти. Дело в том, что для обработки, поиска и вывода изображения с помощью тега img требуется небольшое количество ресурсов сервера, но если иконок на странице очень много, то ресурсов расходуется больше. Спрайт же загружается только один раз и сохраняется в кеше браузера как обычная картинка и режется на отдельные иконки с помощью CSS. Тем самым загружается не сотня картинок, а только одна. Если вы поймете метод использования, то сразу увидите всю простоту его использования. Минусы Достаточно сложен для понимания. Невозможно задать атрибут alt Если выключить вывод изображений в браузере, получится непонятное месиво. Теория Создаем селектор id с параметрами #test{ display: inline-block; padding-right : 8px; width: 16px; height: 16px; background-image: url(images/ sprite.png); background-repeat: no-repeat; vertical-align: middle; border: 0px; margin: 1px; padding: 1px; } .image{ background-position: 10px 20px; } Вывод иконки

Между дивов ничего быть не должно. В диве мы обращаемся к id test и режем в классе image наш спрайт на пересечении 10 20 пикселей. Точка отсчета левый верхний угол. Так как в id мы указали ширину и высоту 16 пикселей, на выходе будет кусок спрайта 16х16. Написание css, точное высчитывание размеров для вывода и тд, занимает огромное количество времени. Для этих целей есть онлайн генераторы. Все они работают по одному принципу. Вы загружаете в zip все ваши иконки, выставляете настройки как вам надо и жмете кнопку создать. После обработки вы получите спрайт и CSS код к ниму. Ссылок не помню. В гугл онлайн генератор css спрайтов.

Аватар пользователя cerberushd2
Не в сети
Последнее посещение: 3 года 46 недель назад
Зарегистрирован: 2014-06-23
Сообщения:
Добрый день. Благодарю,
Добрый день. Благодарю, действительно полезная информация для разработчиков, как для начинающих так и для более опытных. Как раз занялся созданием сайта, наткнулся на эту статью и безмерно рад. Буду пробовать! Еще раз спасибо!
Аватар пользователя SkyNet
Не в сети
Последнее посещение: 3 года 38 недель назад
Зарегистрирован: 2014-06-15
Сообщения:
Привет, действительно
Привет, действительно спрайты очень нужная вещь мало из начинающих знает о этом. Но не все ресурсы их использует иза некоректного отоброжения, кстате привидёный тобой ресурс сдесь мало кому известен мы с тобой специальзируемся больше на Wap/Pda чем на web разработку. Да и использовать спрйт удобно больше всего для headbar'ов.
Аватар пользователя 8fank77
Не в сети
Последнее посещение: 3 года 33 недели назад
Зарегистрирован: 2014-06-30
Сообщения:
Баллы: 0.36
Способ.
Доброго времени суток, уважаемые пользователи данного форума. Автор, хотелось бы сказать вам спасибо за то, что раскрыли альтернативный вариант вывода картинки рядом с текстом. Но для меня намного понятнее старый проверенный способ, который вы не захотели раскрывать. И пользоваться им гораздо удобнее. Надеюсь, что другим пользователям данная информация поможет.

Реклама


| Почему выгодно использовать рекламу в Интернете | Развитие имиджа - распространение качественного автопостинга | Циркониевые коронки в Москве | Создание и продвижение сайтов | Эффективная печать и сканирование | Агентство интернет-маркетинга в Москве | Умное продвижение сайтов в ТОП! | Самые перспективные языки программирования: тройка лучших | Предоставление аренды VPS | Интернет-магазин товаров для животных Zoomark | Конструктор сайтов: хочу все знать | Услуги по продвижению сайтов | Как согласовать вывеску на фасаде магазина? | Полноценный сайт или лендинг пейдж | Покраска мебели в Москве | Колеса для тележек бортового питания | Поделки из проволоки своими руками | Лучшее турагентство в Киеве предлагает вам свои услуги | Как увеличить продажи установив виджет отзывов о компании | Покраска МДФ в Москве | Несколько альтернативных способов бросить свадебный букет в толпу незамужних подруг