<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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

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

Ответить

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