Читаем Веб-дизайн полностью

При этом прозрачность перенесенной полоски равна 50 % на самом краю и постепенно увеличивается вплоть до полной невидимости по направлению к центру прямоугольника. Прозрачность же того фрагмента изображения, который оказался под полоской, наоборот, уменьшается на этом отрезке от 50 % до нуля (рис. 59, в). Если вы мысленно покроете плоскость копиями такого изображения, то увидите, как соседние прямоугольники склеиваются друг с другом с помощью этих «клапанов». Очевидно, что для применимости этого метода нужно, чтобы по краям выделенной области, которую вы хотите превратить в элемент фона, оставалось достаточно места для выкраивания клапанов (как правило, их ширина составляет около 20 % от размера выделения). Этот метод дает хорошие результаты для нечетких, размытых текстур, не содержащих отчетливых деталей и контрастных переходов. Однако если изображение содержит текст или псевдотрехмерный рельеф, результаты будут, скорее всего, неудовлетворительными, так как в этом случае наложение одной копии изображения на другую слишком заметно для глаза.

Рис. 59 Создание бесшовного фона «клапанами» с градиентами прозрачности. «Поперечное сечение» фоновой плитки (в) показывает, как в полученном этим методом фоне соседние изразцы частично накладываются друг на друга, так что на линии шва видимость каждого из них составляет по 50 %

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

Самый распространенный в настоящее время тип фоновых изображений — это фоны, размножаемые только по одному измерению. Если взять в качестве фона изображение, ширина которого с гарантией превосходит любую возможную ширину окна броузера (двух тысяч пикселов хватит с лихвой), то о горизонтальной повторяемости можно будет забыть, и броузеру останется лишь складывать копии этого изображения в вертикальную стопку (рис. 60, б). Обеспечив однородность горизонтальной фоновой полоски в вертикальном направлении, мы сможем раскрашивать фон произвольно расположенными, лишенными какой бы то ни было повторяемости вертикальными полосами с произвольной текстурой (эти полосы могут быть плоскоцветными с резкими краями, а могут и пользоваться любыми горизонтальными градиентами или пиксельными текстурами). Классический вариант — сравнительно узкая (150–200 пикселов) полоса более темного цвета вдоль левого края окна, служащая для размещения навигационной панели, логотипа, минибаннеров (стр. 287) и тому подобных элементов, повторяющихся на всех страницах сайта. Такой фон выполняет практически ту же функцию, что и деление окна на фреймы.

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