Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Гибкие повторяющиеся фоновые изображения

Гибкие повторяющиеся фоновые изображения

Представим, что наш уважаемый дизайнер прислал исправленный макет модуля блога. Заметили, что изменилось?

Гибкие повторяющиеся фоновые изображения

Теперь у нас появилась фоновая графика. Это круто!

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

Но как нам добавить этот новый фон к уже существующему шаблону?

Еще в 2004 году Дэн Седерхольм написал прекрасную статью о том, как использовать вертикально повторяющуюся фоновую графику для создания эффекта «фальшивой колонки» (http:// bkaprt.com/rwd/18/). Гениальность технологии в ее простоте: повторяя цветное фоновое изображение по вертикали позади нашего контента, мы создаем иллюзию колонок одной высоты.

В оригинальной версии Дэна фоновая графика располагалась по центру вверху области с контентом и повторялась по вертикали:

.blog {

background: #F8F5F2 url(«blog-bg.png») repeat-y 50% 0;

}

Гибкие повторяющиеся фоновые изображения

Невероятно большой холст, который мы совсем скоро превратим в фоновую графику

Запомните его. Затем откройте ваш любимый редактор изображений и создайте какой-нибудь огромный документ, шириной, скажем, 3000 пикселей. А поскольку мы собираемся повторять его по вертикали, высоту сделайте 160рх.

Именно из этого документа мы сделаем нашу фоновую графику. Вы можете спросить: зачем такой большой? Я отвечу: изображение должно быть больше, чем любое окно браузера. Полагаю, что, если только вы не читаете этот текст из XXV века с какого-нибудь экрана шириной на всю стену, сделанного из голограмм или чего-то не менее мудреного, ваш монитор не будет шире этого изображения.

Чтобы сделать сами колонки, нам нужно применить процентное значение точки перехода (63,1111111111111%) к новому широкому холсту. То есть, если ширина графики 3000 пикселей, мы перемножаем эти два числа:

3000 х 0.631111111111111 = 1893.333333333333

и в результате получаем 1893,333333333333. А поскольку Photoshop не хочет иметь дело с десятичными долями, давайте округлим это число до 1893 пикселей. Нам осталось только создать нашу текстуру из нового файла, сделав переход от белого цвета к серому на 1893-м пикселе.

Гибкие повторяющиеся фоновые изображения

Мы применили к широкому фоновому изображению проценты, что привело к созданию колонок

Что это нам дает? Только что мы пропорционально определили точку перехода на новом широком холсте. При помощи нового пиксельного значения мы можем сделать нужные нам колонки: белая будет шириной в 1893рх, а серая займет всю остальную часть изображения.

Осталось сделать одно: вписать новую графику в таблицу стилей:

.blog {

background: #F8F5F2 url(«blog-bg.png»)

repeat-y63.1111111111111% 0; /* 568px / 900px */

}

Следуя оригинальной технологии Дэна, мы располагаем графику в самом верху нашего блога и повторяем ее по вертикали (repeat-y). Благодаря постоянному повторению процентного значения точки перехода (63,1111111111111% 0) колонки остаются неизменными по отношению друг к другу, независимо от того, какого размера становится сам макет.

В результате мы получили прекрасные фальшивые колонки в «резиновом» макете. Все благодаря оригинальному подходу Дэна Седерхольма, приправленному небольшими пропорциональными размышлениями.

Читайте так же:
Not found

Нам доверяют

Интернет магазин