<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

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

CSS спрайт - это комбинированное изображение, в котором находится много различных картинок, и с помощью свойства background-position мы выставляем нужную картинку в нужном месте. Допустим, у нас есть кнопка, и эта кнопка меняет свой вид при наведении на неё курсора мыши. Можно сделать, например, 2 картинки и затем подставлять в качестве фона кнопки ту или иную картинку. Но недостаток данного способа очевиден: в 2 раза больше файлов, примерно в 2 раза больше размер, следовательно, в 2 раза больше время загрузки, чем 1 изображение. И вот техника CSS спрайтов позволяет создать всего лишь одну картинку, в которой будут сразу 2 фона кнопки.

Чтобы стало понятнее, давайте решим эту задачу. У нас имеется изображение, допустим, высотой 20 пикселей и шириной 100 пикселей. Кнопка имеет ширину 50 пикселей и высоту 20 пикселей. В одной картинке мы помещаем изображения обоих состояний (друг за другом). HTML-код будет таким:

<a href="#">Кнопка</a>

И CSS-код:

a {
  background: url("button.jpg") no-repeat left top; // Фон кнопки
  display: block; // Сделать блочным элементом
  height: 20px; // Высота кнопки
  width: 50px; // Ширина кнопки
  text-decoration: none; // Убрать черту подчёркивания
}
a:hover {
  background-position: right top; // Меняем позицию фона, чтобы было смещение изображения
}

Вот таким хитрым образом можно в одной картинке хранить множество изображений. Подчеркну, что именно множество изображений, а не только 2. Иногда чуть ли не весь сайт состоит из одной картинки, в которой находятся все используемые изображения. Не считаю, что это очень хорошо, но зато будет минимальное количество файлов изображений и минимальный размер загружаемой страницы, что всегда хорошо.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (10):

soffrick soffrick 13.06.2012 17:21:36

Спасибо, у меня как раз были недопонимания по этому поводу, но теперь разобрался :)

Ответить

lev_100rus lev_100rus 17.06.2012 22:33:20

Михаил, помогите решить такую проблему! У меня есть картинка созданная в photoshop! Это МОЙ дизайн! Подскажите как мне его вставить на сайт и анимировать! У меня там и кнопки нарисованы! Как их анемировать

Ответить

Admin Admin 17.06.2012 22:41:09

Для анимации нужно много картинок, а не одна.

Ответить

Игорян Игорян 25.06.2012 18:51:03

в примере вроде ошибка, в коде СSS в начале после тега а - двоеточие не нужно

Ответить

Admin Admin 25.06.2012 18:53:18

Да, не нужно. Спасибо, исправил!

Ответить

Игорян Игорян 27.06.2012 13:32:08

Михаил, подскажите пожалуйста, сделал 2 кнопки подряд (допустим одинаковые), код css допустим тот же, почему кнопки идут одна под другой, ведь тег <br> не ставлю??

Ответить

Admin Admin 27.06.2012 13:34:41

Таковы правила HTML, их нужно знать. Блочные элементы по умолчанию всегда располагаются один по другим.

Ответить

Игорян Игорян 27.06.2012 15:56:18

спасибо, использую float, правильно?)

Ответить

Admin Admin 27.06.2012 16:03:05

Можно float, можно таблицы.

Ответить

naumenko.romeo naumenko.romeo 20.12.2012 09:33:42

Хорошоя статья)))

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.