Просьба откликнутся знатокам верстки

Question

[sl4mmer]

Есть картинка с бэкграундом для сайта, в слоях, с разрешением порядка 1200 на 1800 (превьюшку я ниже вставил). Черт меня дернул, в завершении крупного проекта согласится до кучи шаблон сверстать (макет был предоставлен).

Прошу обратить особое внимание на цветовые переходы и сложный узор в центральной области.

Вопрос ко всем:

1) Как на основе этого, сделать нормальный бэк для резиновой верстки,. (логотип должен быть на уровне верхнего облака, футер чуть повыше нижнего ). Центральную область надо тянуть (или наоборот сжимать, по ситуации), но как, черт побери Такое изображение растянуть?? Естественно нужна опять же совместимость с наиболее распространенными расширениями экранов

2) Как внятно и доступно объяснить заказчику, что в таком виде это сделать невозможно?

Просьба отписаться всем, кто может что либо сказать по существу — наверное дам заказчику почитать.

Answer 1

[loat]

Сам узор вроде повторяющийся, на вашем месте я бы попросил у дизайнера верхние и нижние «облака» в широком варианте с полупрозрачностью.

Answer 2

[Gibbzy]

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

P.S я программист и в верстке силен не очень.

Comments

[sl4mmer]

да вот и я так же — просто дизайнер с 70+ отзывами, на фрилансе, как то сомнительно чтобы она дала неверстабельный макет… Я всю ночь промаялся, но не смог таки изобрести ничего годного (

[VBart]

=)) На фрилансе полно дизайнеров с 70+ и даже с 300+ отзывами, которые ничего из себя не представляют. На отзывы на фрилансе можете даже не смотреть. По ним лишь можно, с определенной долей вероятности, предположить, что человек не кинет.

Answer 3

[yui_room9]

Есть как миннимум 2 способа для ширины оба не очень нормальные и 1 для ширины и высоту самый хороший но незнаю возможен ли в вашем случае

Для ширины
1) Самый простой но и кривой,
Делаете div как подложку с position absolute и z-index -1, в него кладёте img с бэкграундом
div и img должны быть width,height — 100%, узор нужно само сабой немного подготовить, то есть будет сам узор обрезан и продолжением его будет уже background у body

2) Слева и справа у вас почти повторяющийся узор, если можно привести к повторяющемуся то выравнимаем background по центру, при этом картинка долна быть размером гдето 3000 по ширине, и то что у вас сейчас в посте должно быть по центру этой картинки, остальное узор

Самый нормальный
Если узор повторяется или большой по размеру, ставьте узор на background облака будут отдельно, для шапки прозрачная png с облаками, для футера sticky и тоже прозрачная png

Если что то плохо написал могу пояснить подробней

Comments

[ZaiSL]

Я тоже склоняюсь к варианту: узор заливкой, облака с суровыми фиолетовыми тенями — в png. Другое дело, что это может быть нет просто сделать верстальщику (нужно определить паттерн и, ко всему прочему, вижу недостёртые артефакты от облаков, налезающие неровными кусками на основную часть). Можно обратиться к дизайнеру и спросить, как она представляет верстку всего этого (или же просто попросить подготовить макет к верстке по выбранному пути: отметить паттерн, убрать косяки и т.п.)

[sl4mmer]

1) Не годится так как не решает проблему нормальной растяжки-сжатия шаблона относительно контента,

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

3)Это интереснее, но узор то не повторяется как раз. Плюс опять же не решается проблема с регулированием под высоту контента когда блок имеет относительно небольшой размер — в оригинальном разрешении облака с примыкающим градиентом имеют суммарно 1300 пикселов в высоту, а контент зачастую может быть короче (а при более высоком разрешении экрана прийдется облака еще увеличивать и вся верстка поедет).

[vvovas]

Узор повторяется.

Answer 4

[Алексей Федюнин]

Можно попробовать сделать фон не подвижный. Это как один из вариантов.

Comments

[sl4mmer]

Не катит
1) Не решает проблему ширины
2) Не решает проблему в случае малого количества контента.
3) На верхнем облаке логотип будет а сразу под ним горизонтальное меню с областью контента, так что неподвижный фон не вариант вообще

Answer 5

[dom1n1k]

Если есть возможность получить этот макет послойно, то в принципе, возможно.
В центральном узоре просматривается повторяющийся паттерн — его замостить «плиткой» как самый нижний слой.
Облака и нижний градиент наложить поверх как полупрозрачные PNG (правда, весить они будут немало).

Но тут ещё есть вопрос, как тянуть конкретно облака в ширину? Тут выхода два.
Либо просить дизайнера отрисовать их на бОльшую ширину (1920+) и просто центровать их с обрезкой лишнего по бокам.
Либо шапку и подвал дополнительно делить на 3 накладывающиеся части (левый край-центр-правый) и тянуть их, изменяя ширину зон пересечения. Но это довольно громоздко по объему кода и возможны артефакты обтравки.

Answer 6

[spmbt]

yui_room9 уже ответил — хочу добавить, что вес этих 2 картинок поверх бекграунда будет неслабым, порядка 150-200 К каждая (придётся делать полупрозрачный PNG). И отдельную сложность будет представлять собой внедрение этой конструкции (2 рисунка подо всем остальным) на фон страниц, потому что от контента в обычном position: static придётся отказаться, делать в слое relative. Это вызовет, возможно, проблемы с виджетами и скриптами на страницах, которым нужно размещение в базовом потоке — динамические меню, например. Увеличится стоимость их установки и доработки. Может быть, и нет, если такие элементы применяться не будут.

Ещё, 2-я картинка будет в прибитом к низу футере (div style=position:bottom:0 X image X /div), поэтому прибитый футер нужно выбрать такой, чтобы всё вместе это работало. Это не очень просто — посмотрите, сколько публикаций в инете и на Хабре про прибитый футер, и нет универсального решения.

В общем, если 1) заказчик согласится с очень тяжёлыми картинками в дизайне, которые будут не сразу прорисовываться (к сожалению, неустранимо; только для малых экранов можно отсылать сразу более лёгкие картинки); 2) если согласится на сложную базовую раскладку страницы, что удорожит процессы доработок в будущем, 3) если понимает, что уже на данном этапе прибавляется работы хорошему верстальщику на 1-3 дня (смотря сколько страниц переделывать и каких), то такая фича может быть им принята.