Cookie

предосторожность


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

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

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

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

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

L'immagine usata da Google

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

Кто-то уже признали некоторые элементы постоянно называют на страницу поиска, такие как это логотип, laO” повторяется в нижней, направляющие стрелки что указывает на предыдущую и следующую страницу, 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, что делает нас на самом деле только видеть вторая половина изображения в том же положении, что он был в первом.

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

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

Это не достаточно?


TheJoe

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

2 Комментарии

TheJoe · 26 Декабрь 2010 в 4:18 ВЕЧЕРА

Wow, 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 😉

оставьте ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатывается комментарий данных.