Простой пример css спрайта

	14.09.2013, 07:44
Здравствуйте дорогие читатели моего блога, сегодня я вам расскажу, что такое css спрайты, я думаю многие новички которые только начинают создавать свой первый сайты, обязательно должны знать о технологии css спрайтов. Но для начало давайте разберёмся, что это такое. Quote css спрайт (css sprite) - одно изображение, которое включает в себя несколько логически связанных изображений, используемых для создания эффекта анимации при наведении курсора на элемент. Многие спросят, что это значит и как это работает? Давайте один раз увидим на примере, чем сто раз услышим! Как вы видите у нас с вами есть одно изображение rss кнопки, которая при наведении стрелкой мыши, меняет цвет rss иконки, это одно изображение, а не два или более, как было популярно несколько лет тому назад. У такой технологии имеются свои существенные плюсы: - быстрая загрузка изображений - более лёгкий вес изображений - уменьшается количество HTTP запросов но давайте теперь посмотрим как это реализуется благодаря html-css: HTML-Code Выделить всё `<a class="rss_link" href="ссылка на вашу rss " title="Подписаться на rss ленту"></a>` CSS-Code Выделить всё /* Стили css спрайта ------------------------------------------/ a.rss_link { width:150px; / Ширина ячейки / height:35px; / Высота ячейки / display:block; / Элемент показывается как блочный / background:url(http://ucoz-helper.ucoz.com/HTML-CSS/fon_cell_rss.png) left top; / Картинка по левому верхнему краю / } a.rss_link:hover { background-position:left 35px; / Показываем картинку ниже 35 пикселей */ } у нас с вами получилась заветная кнопка, которая быстро грузиться и не нагружает наш сервер, безусловно благодаря такому методу, само изображение может иметь не два элемента изображений, а намного больше 5-10. В архиве вы найдёте 3 дополнительных rss-кнопки. На этом всё, спасибо за внимание!
1 2 3 4 5 Категория: HTML-CSS \| Добавил: tashkent97 \| Теги: спрайт, CSS, uCoz, HTML, RSS
Просмотров: 596 \| Загрузок: 74 \| Источник: \| Рейтинг: 5.0/1

Всего комментариев: 0

	14.09.2013, 07:44
Здравствуйте дорогие читатели моего блога, сегодня я вам расскажу, что такое css спрайты, я думаю многие новички которые только начинают создавать свой первый сайты, обязательно должны знать о технологии css спрайтов. Но для начало давайте разберёмся, что это такое. Quote css спрайт (css sprite) - одно изображение, которое включает в себя несколько логически связанных изображений, используемых для создания эффекта анимации при наведении курсора на элемент. Многие спросят, что это значит и как это работает? Давайте один раз увидим на примере, чем сто раз услышим! Как вы видите у нас с вами есть одно изображение rss кнопки, которая при наведении стрелкой мыши, меняет цвет rss иконки, это одно изображение, а не два или более, как было популярно несколько лет тому назад. У такой технологии имеются свои существенные плюсы: - быстрая загрузка изображений - более лёгкий вес изображений - уменьшается количество HTTP запросов но давайте теперь посмотрим как это реализуется благодаря html-css: HTML-Code Выделить всё `<a class="rss_link" href="ссылка на вашу rss " title="Подписаться на rss ленту"></a>` CSS-Code Выделить всё /* Стили css спрайта ------------------------------------------/ a.rss_link { width:150px; / Ширина ячейки / height:35px; / Высота ячейки / display:block; / Элемент показывается как блочный / background:url(http://ucoz-helper.ucoz.com/HTML-CSS/fon_cell_rss.png) left top; / Картинка по левому верхнему краю / } a.rss_link:hover { background-position:left 35px; / Показываем картинку ниже 35 пикселей */ } у нас с вами получилась заветная кнопка, которая быстро грузиться и не нагружает наш сервер, безусловно благодаря такому методу, само изображение может иметь не два элемента изображений, а намного больше 5-10. В архиве вы найдёте 3 дополнительных rss-кнопки. На этом всё, спасибо за внимание!
1 2 3 4 5 Категория: HTML-CSS \| Добавил: tashkent97 \| Теги: спрайт, CSS, uCoz, HTML, RSS
Просмотров: 596 \| Загрузок: 74 \| Источник: \| Рейтинг: 5.0/1