Обзоры, статьи, исследования



Эффектное применение CSS-спрайтов на amazon.com


Ранее на Webreview.org.ua была опубликована статья о способах устранения дрожания фона для ролловерных изображений в IE, где уже упоминалось о способе реализации ролловера с использованием css и всего одной картинки, совмещающей в себе две (или больше). Эта техника носит название CSS-sprites (CSS-спрайтов). При наведении курсора мыши на такую картинку изменялась лишь позиция фона. При этом возникал баг в ИЕ, но и его можно обойти (устранению бага, собственно и была посвящена статья).

Сегодня речь пойдёт о граммотном примере использования данной техники на сайте amazon.com.
применение CSS-спрайтов

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

CSS Sprites: все, что вы знали, но боялись спросить
CSS Sprite Generator