Page 118 - Сила CSS3 Освой новейший стандарт

118 • Глава 3. Линованная бумага

(Nicolas Gallagher) в своей статье на странице http://nicolasgallagher.com/multiple-
backgrounds-and-borders-with-css2. Это прекрасный вариант, например, для IE 8
и Firefox 3.5, однако версии IE 6 и 7 не поддерживают такие псевдоэлементы,
следовательно, данная техника в них не будет работать, если только не доба-
вить еще один сценарий, заставляющий старые версии IE понимать подобные
селекторы. Но тогда обходной путь излишне усложнится. И снова вы должны
самостоятельно решить, стоит ли вам и вашим пользователям идти на такие
жертвы ради простого украшения;
использование элемента canvas. Если вы знакомы с написанием сценариев,
можете связать несколько изображений с одним элементом, применив элемент
HTML5 canvas. IE 8 и более ранние версии не поддерживают canvas, но эту
проблему можно решить с помощью сценария explorer-canvas от Google (http://
code.google.com/p/explorercanvas). Подробное рассмотрение принципов исполь-
зования элемента canvas лежит за пределами тематики данной книги. Кроме того,
всю работу за вас уже сделал Hans Pinckaers, сценарий mb.js которого (http://
github.com/HansPinckaers/mb.js) позволяет реализовать множественные фоновые
изображения в IE и старых версиях других браузеров.

доБавление граФичеСкой рамки
Еще одна графическая деталь, которая замечательно
смотрелась бы на нашей странице, — рамка вдоль левого
края, изображающая кромку вырванного из спирального
блокнота листа бумаги (рис. 3.12). Реализовать данный эф-
фект с использованием CSS3 можно разными способами.

Рис. 3.12. Кромка листа Фоновые изображения
бумаги, вырванного Первый способ добавления рваной кромки — встроить
из блокнота со спираль- в страницу еще одно фоновое изображение с повторением
ным креплением только по вертикали. Однако вдоль левого края изобра-
жения следуют одинаковые прозрачные области (дыры в
бумаге), сквозь которые будут видны линии фонового изображения. Если бы фон
нашей страницы был сплошным, а не узорным, мы могли бы залить сплошным цве-
том эти прозрачные области, аккуратно вписав «рваный край» в общую концепцию
страницы. Однако в нашем случае такой вариант не сработает.

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

www.trk.kg