Спрайт CSS

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

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