Что такое спрайты в CSS

CSS спрайты — это картинки, которые объединяют в себе другие картинки, служащие для оформления каких-либо элементов сайта. С применением CSS спрайтов вы уменьшаете количество подгружаемых браузером изображений с вашего сайта, что позволяет немножко снизить количество HTTP-запросов.

Давайте рассмотрим их использование на примере верстки кнопки в двух состояниях: обычном и при наведении.

Итак, собственно image:

Что такое CSS спрайты

HTML:

<input class="rbc-btn" type="submit" value="Скачать!!!" />

CSS:

.rbc-btn {
    background: url(images/button.png) no-repeat;
    background-position: 0 -30px;
    height: 30px;
    width: 100px;
    border: none;
    font-size: 14px;
    font-family: Tahoma;
    color: #000000;
    outline: none;
}
.rbc-btn:hover {
    background-position: 0 0;
}

Вот, что должно у вас получиться, вот такая будет симпатичная кнопочка на HTML:

CSS спрайты - кнопка HTML

Скачать рабочий пример

* * *

CSS-спрайты используются практически везде. Например, их вы можете наблюдать во фреймворке Twitter Bootstrap, — все множество различных значков размера 16 на 16 пикселей там представлено одной большой картинкой.

Опубликовано 2-04-2014 в 14:39


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты