Давайте поговорим о CSS. Сегодня мы видим технику, всегда рекомендуется осветлить страницы е ускорить время загрузки (не зря уже в течение многих лет использовались на домашней странице Google).

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

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

Мы видим, например, изображение, которое Google использует в своих исследованиях:

Изображение, используемое на Google

Кто-то уже признали некоторые элементы постоянно называют на страницу поиска, такие как это логотип, la “O” повторяется в нижней, направляющие стрелки что указывает на предыдущую и следующую страницу, Favicon, звезды для оценки результатов и я остановлюсь здесь.

Для включения изображения в пределах страницы Google использует в части Javascript и частично я CSS. Я не буду подробно останавливаться на принципах позади этого выбора, Достаточно сказать, что большая часть запросов каждый день Google приходится иметь дело с настолько широким, что даже незначительная оптимизация страницы соответствует значительная экономия (экономически издание экологически) себя и для всех нас Google.

Оставляя в стороне JavaScript теперь давайте проанализируем шаги, потому что эффект возвращается используя только HTML и CSS. Давайте начнем с чего-то простого: следующие кнопки формируется двумя изображениями. Шаги, которые мы увидим помогут создать’EFFETTO опрокидывание парить с одно изображение. Общий размер изображения 343 пиксель ширина х 212 пиксель высота: Это очень большое для кнопки, но это всего лишь пример.

Мы начинаем видеть, как формат HTML.

<A ID ="связаться с нами" HREF ="#" название ="связаться с нами"><пролет>контакт</пролет></a>

Это будет HTML строку, которая будет отображаться на кнопке на странице. Обратите внимание’атрибут “Я БЫ” чей стиль будет затем изменить с помощью CSS. Е’ Легко заметить, что линия выше на самом деле Он не содержит ссылки на любое изображение, это просто текст ссылка: “контакт“.

И теперь мы видим, установить CSS чтобы превратить нашу ссылку в Кнопка с опрокидыванием эффектом мышь:

#связаться с нами{
  дисплей: блок;
  ширина: 343ПВ;
  высота: 106ПВ;
  фон: URL("IMG / bottone.png") нет повтора 0 0;
}

#связаться с нами:зависать{
  фон положение: 0 -106ПВ;
}

#продолжительность контакта{
  дисплей: никто;
}

Глаз нарисовать правильный образ. Я поместил в каталог “IMG“. Кнопка очень большая, как легко заметить, ширина является начальным картина (width: 343px;), в то время как высота составляет ровно половину (height: 106px;). В том случае, когда будет отображаться мышь не переходит к кнопке верхняя половина кнопка (я получаю 106 пиксель), в то время как если мы видим, второе правило голос “background-position” мы можем видеть, отрицательное значение “-106px“. Это правило будет поместить кнопку в правом верхнем 106px, что делает нас на самом деле только видеть вторая половина изображения в том же положении, что он был в первом.

Третье правило используется только для скрыть текст “контакт“.

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