Что такое спрайты в 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>

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

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

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