предосторожность
Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.
Давайте поговорим о CSS. Сегодня мы видим технику, всегда рекомендуется осветлить страницы е ускорить время загрузки (не зря уже в течение многих лет использовались на домашней странице Google).
Короче говоря он должен включать в себя большинство элементов навигации на странице в один файл изображения, то называют его много раз сколько запросит страницу избегая таким образом загрузить несколько изображений другой.
Хотя технически временной зазор Это очень мало (мы находимся в области центов, не тысячных второй) разница видна, а также с эстетической точки зрения, загруженные изображения внезапно впечатление большей скорости.
Мы видим, например, изображение, которое Google использует в своих исследованиях:

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

Мы начинаем видеть, как формат HTML.
<A ID ="связаться с нами" HREF ="#" название ="связаться с нами"><пролет>контакт</пролет></а>
Это будет HTML строку, которая будет отображаться на кнопке на странице. Обратите внимание’атрибут “Я БЫ” чей стиль будет затем изменить с помощью CSS. Е’ Легко заметить, что линия выше на самом деле Он не содержит ссылки на любое изображение, это просто текст ссылка: “контакт“.
И теперь мы видим, установить CSS чтобы превратить нашу ссылку в Кнопка с опрокидыванием эффектом мышь:
#связаться с нами{ дисплей: блок; ширина: 343ПВ; высота: 106ПВ; фон: URL("IMG / bottone.png") нет повтора 0 0; } #связаться с нами:зависать{ фон положение: 0 -106ПВ; } #продолжительность контакта{ дисплей: никто; }
Глаз нарисовать правильный образ. Я поместил в каталог “IMG“. Кнопка очень большая, как легко заметить, ширина является начальным картина (width: 343px;
), в то время как высота составляет ровно половину (height: 106px;
). В том случае, когда будет отображаться мышь не переходит к кнопке верхняя половина кнопка (я получаю 106 пиксель), в то время как если мы видим, второе правило голос “background-position
” мы можем видеть, отрицательное значение “-106px
“. Это правило будет поместить кнопку в правом верхнем 106px, что делает нас на самом деле только видеть вторая половина изображения в том же положении, что он был в первом.
Третье правило используется только для скрыть текст “контакт“.
Для того, чтобы получить предварительный просмотр операции нажмите здесь.
2 Комментарии
TheJoe · 26 Декабрь 2010 в 4:18 ВЕЧЕРА
Вау, grazie Luca per il commento tecnico. Ho già provveduto a modificare il titolo. 😉
Luca Canducci · 26 Декабрь 2010 в 1:26 ВЕЧЕРА
Per completezza, quando si parla di questa tecnica si parla più frequentemente di “CSS Sprites”, il rollover è il risultato pratico che si ottiene (che essendo completamente CSS non genera problemi di compatibilità su browser differenti o con chi ha javascript disabilitato).
BTW, nice one 😉