Пример сложного спрайта и фонового изображения

Давайте посмотрим, как спрайты CSS можно использовать для создания интересного эффекта. Предположим, что дизайнер прислал новый эскиз. Он предназначен для списка ссылок на основной странице блога. Он указывает на профиль блоггера LinkedIn, ленту RSS, фотографии Flickr, и закладки. Посмотрев на ссылки мы поняли, что имеется градиент, начинающийся в центре как белый цвет и превращающийся в серый вверху и внизу ссылки, и, чтобы усложнить все еще больше, дизайнер попросил, не могли бы мы сделать каждую ссылку чисто белой без особенностей, когда посетители наводят на нее указатель мыши — посмотрите на рисунок 31.14.

Рис. 31.14. Новый эскиз дизайна.

Логотипы можно было бы включить в разметку с помощью элементов img, однако использование спрайтов CSS является значительно лучшим способом — спрайты загружаются быстрее и нужно загружать только одно изображение (а не четыре), и это снижает путаницу в коде HTML, уменьшая объем необходимой разметки.

Создание спрайта

Первый шаг состоит в разрезании четырех логотипов и создании множества спрайта, как показано на рисунке 31.15.

Рис. 31.15. Множество спрайта.

Необходимо также отрезать полосу шириной 1 пиксель от градиента. Чтобы было легче видеть, я отрезала несколько более широкую полосу, но требуется только один пиксель - см. рисунок 31.16.

Рис. 31.16. Полоса для градиентного фона.

Код HTML для списка является неупорядоченным списком, содержащим ссылки. Отметим пустой элемент span внутри ссылок. Очень важно не использовать фиксированные height и width на элементах, которые содержат текст - в конце концов, мы не имеем никакого представления о том, каким будет текст. Что произойдет, если сайт будет переведен на немецкий язык? Можно использовать эти дополнительные span для вывода логотипов. В качестве альтернативы можно было бы решить, что вы не хотите иметь лишнюю несемантическую разметку в коде HTML. В этом случае нужно будет использовать спрайт большего размера и оставить пустое пространство между иконками. Помните, что это будет медленнее для пользователей на медленных соединениях, особенно для мобильных телефонов. Код списка выглядит следующим образом — добавьте его в шаблон HTML:

Код CSS будет использовать оба фоновых изображения. Прежде всего, посмотрите на изображение фонового градиента. Нужно отметить три интересных момента:

1. Прежде всего, изображение повторяется по горизонтали (repeat-x). Таким образом мы сможем заставить такое маленькое изображение распространиться на весь список.

2. Затем, изображение центрируется вертикально. Мы хотим, чтобы скругленная часть изображения появлялась в середине элемента списка, поэтому нужно использовать позицию фонового изображения left center.

3. Наконец, в коде CSS я применила фоновый цвет, который является тем же серым цветом, что и на изображении градиента. Таким образом, если элемент увеличивается, он не будет выглядеть испорченным. Дополнительную информацию о технике такого рода можно найти в публикации "Надежный Web-дизайн" (http://www.simplebits.com/publications/bulletproof/) Дэна Середхольма.

Добавьте следующий код CSS в новый файл CSS и соедините его с файлом HTML:

Последняя строка означает, что элемент не должен иметь фоновый цвет или изображение, когда пользователь наводит на нее указатель мыши, или фокус клавиатуры. Возможно вы удивляетесь, почему свойства фона применяются к ссылке, а не к элементу списка? Ответ состоит в том, что Internet Explorer 6 и более ранние версии не поддерживают псевдо-классы, такие как hover, на элементах, отличных от ссылок. Я сделала соответствующее изменение, чтобы учесть это ограничение.Затем можно создать код CSS для маленьких логотипов. Как обычно, можно начать с определения наиболее общего случая для всех элементов span в модуле навигации. Именно здесь определяется изображение, которое будет использоваться всеми span, повторение, и положение фонового изображения (каждое по другому, поэтому давайте использовать первое). Для этого правила можно использовать сокращение. Отметим, что комментарии CSS используются для выделения разделов кода в управляемые отрывки. Добавьте следующий код внизу файла CSS:

Имея общий случай, теперь можно определить исключения, или что отличает каждый отдельный логотип. В данном случае в CSS изменяется только background-position. Каждая соответствующая позиция списка должна содержать изображение со смещением на 15 пикселей влево, так как каждый логотип имеет в ширину 15 пикселей. Добавьте следующий код внизу файла CSS:

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

Заключение

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

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: