Отзывчивый веб-дизайн - [12]
>Рис. 3.10. Детальный взгляд на новый фон
Но как нам добавить этот новый фон к уже существующему шаблону?
Еще в 2004 году Дэн Седерхольм написал прекрасную статью о том, как использовать вертикально повторяющуюся фоновую графику для создания эффекта «фальшивой колонки» (http://bkaprt.com/rwd/18/). Гениальность технологии в ее простоте: повторяя цветное фоновое изображение по вертикали позади нашего контента, мы создаем иллюзию колонок одной высоты.
В оригинальной версии Дэна фоновая графика располагалась по центру вверху области с контентом и повторялась по вертикали:
>.blog {
>background: #F8F5F2 url("blog-bg.png") repeat-y 50 % 0;
>}
И этот прием работал великолепно. Однако он был рассчитан на макет с фиксированной шириной, то есть создавал графику, которая совпадала с ним по ширине. Как же, интересно, мы будем работать с фоновым изображением, которое покрывает две гибкие колонки?
Благодаря некоторым исследованиям дизайнера Дага Баумана (http://bkaprt.com/rwd/19/) мы все еще можем применять технологию «фальшивой колонки». Просто нужно уделить немного больше внимания планированию и вытащить на свет нашу любимую формулу >target ÷ context = result.
Сперва нужно снова глянуть на наш первоначальный макет, чтобы найти точку перехода на фоновой графике, точный пиксель, на котором белая колонка переходит в серую. Судя по всему, это происходит на 568 пикселе (рис. 3.11).
>Рис. 3.11. Белая колонка переходит в серую на отметке 568px. Это и есть наша точка перехода
Вооружившись этой информацией, мы можем адаптировать подход «фальшивой колонки» к нашей «резиновой» сетке. Сначала нам нужно конвертировать точку перехода в процентное значение, соответствующее ширине модуля нашего блога. Чтобы это сделать, снова воспользуемся формулой >target ÷ context = result. Целевое значение – >568px, ширина макета (контекста) – >900px. Подставляем эти цифры в формулу:
>568 ÷ 900 = 0.631111111111111
И снова получаем какое-то невероятно длинное число, которое превращаем в проценты – >63,1111111111111 %
Запомните его. Затем откройте ваш любимый редактор изображений и создайте какой-нибудь огромный документ, шириной, скажем, 3000 пикселей (рис. 3.12). А поскольку мы собираемся повторять его по вертикали, высоту сделайте >160px.
>Рис. 3.12. Невероятно большой холст, который мы совсем скоро превратим в фоновую графику
Именно из этого документа мы сделаем нашу фоновую графику. Вы можете спросить: зачем такой большой? Я отвечу: изображение должно быть больше, чем любое окно браузера. Полагаю, что, если только вы не читаете этот текст из XXV века с какого-нибудь экрана шириной на всю стену, сделанного из голограмм или чего-то не менее мудреного, ваш монитор не будет шире этого изображения.
Чтобы сделать сами колонки, нам нужно применить процентное значение точки перехода (>63,1111111111111 %) к новому широкому холсту. То есть, если ширина графики 3000 пикселей, мы перемножаем эти два числа:
>3000 x 0.631111111111111 = 1893.333333333333
и в результате получаем >1893,333333333333. А поскольку Photoshop не хочет иметь дело с десятичными долями, давайте округлим это число до 1893 пикселей. Нам осталось только создать нашу текстуру из нового файла, сделав переход от белого цвета к серому на 1893-м пикселе (рис. 3.13).
>Рис. 3.13. Мы применили к широкому фоновому изображению проценты, что привело к созданию колонок
Что это нам дает? Только что мы пропорционально определили точку перехода на новом широком холсте. При помощи нового пиксельного значения мы можем сделать нужные нам колонки: белая будет шириной в >1893px, а серая займет всю остальную часть изображения.
Осталось сделать одно: вписать новую графику в таблицу стилей:
>.blog {
>background: #F8F5F2 url("blog-bg.png") repeat-y63.1111111111111 % 0; /* 568px / 900px */
>}
Следуя оригинальной технологии Дэна, мы располагаем графику в самом верху нашего блога и повторяем ее по вертикали (>repeat-y). Благодаря постоянному повторению процентного значения точки перехода (>63,1111111111111 % 0) колонки остаются неизменными по отношению друг к другу, независимо от того, какого размера становится сам макет.
В результате мы получили прекрасные фальшивые колонки в «резиновом» макете (рис. 3.14). Все благодаря оригинальному подходу Дэна Седерхольма, приправленному небольшими пропорциональными размышлениями.
>Рис. 3.14. Идеально гибкие колонки
Полностью гибкие фоновые изображения?
Конечно, наши гибкие фальшивые колонки, вообще-то, совсем не гибкие: мы просто использовали процентное значение в размещении фонового изображения так, чтобы колонки меняли свои размеры в зависимости от размеров контейнера. Размеры изображения при этом остаются неизменными.
Но что делать, если нам нужно, чтобы фоновое изображение тоже меняло свои размеры вместе с макетом? Например, вы разместили логотип на фоне элемента >h1 или используете спрайты[2] для создания ролловер-эффекта в навигации сайта. Сможем ли мы изменить размеры картинок, изображенных на фоне?
Сможем. Существует CSS3-свойство под названием >background-size (http://bkaprt.com/rwd/20/), которое позволяет создать действительно гибкие фоновые изображения, однако, как вы, наверное, уже догадались, не все браузеры обеспечивают его поддержку.
