Как реализовать цветовые фоны макета в верстке?

Question

[safbek]

Здравствуйте! Помогите разобраться с реализацией цветового фона в соотвествии с макетом. Пробовал 1 слой сделать темный , а сверху розовый с opacity/rgba прозрачностями, но нужный оттенок не достигается. И еще задать цвет бутстраповским колонкам, не раскрашивая при этом падинги колонок. Вообщем вот макет:

Answer 1

[Сергей delphinpro]

Вы же не думаете, что вам нужно реализовывать эти колонки в верстке???

ЗЫ Если хотите, можете взять мою сетку https://gist.github.com/delphinpro/87ef3d684c59848...
как раз то что нужно вам, я использую в процессе верстки для визуального контроля, перед сдачей проекта сетка отключается.

Comments

[safbek]

Не могли бы подоступнее объяснить новичку?) Может вы неправильно поняли или я что путаю. Дело в том, что я все верстал по сетке бутстрап.(если вы это имеете в виду) Но вот фон не могу сделать. снизу темно-серый бэкраунд, а сверху накладывается розовый, в результате образуется коричневый цвет по сетке бутстрап.

[safbek]

И я думал, что розовый сплошной фон, пока я не убрал в фотошопе голубую сетку. Guides. Может это так на всех макетах? и это сплошной фон. НО по-любому , не могу добиться третьего цвета слиянием двух. Короч, не знаю, как проще объяснить)

[Сергей delphinpro]

safbek: вы про розовые колонки? Их НЕ НАДО верстать. Это сетка, по которой дизайнер рисовал сайт.

я вам дал пример реализации такой сетки поверх страницы, но она нужна ТОЛЬКО для удобства верстки. В конечном готовом варианте ее быть не должно.

[Сергей delphinpro]

safbek: >> не могу добиться третьего цвета слиянием двух

найдите в фотошопе слой с полосками. У него должна быть выставлена непрозрачность слоя. Запомните эту цифру (Например 20%). Выставьте непрозрачность на 100%. Возьмите пипеткой цвет колонки (скорее всего будет чистый красный, #ff0000 или, по-другому, rgb(255,0,0)). Верните непрозрачность, как было. Теперь в верстке запишите цвет в формате rgba
background: rgba(255,0,0, 0.2);
первые три цифры - rgb цвет, последняя - непрозрачность, в данном случае 20%.

[safbek]

Сергей: Учится, учится и еще раз учится! Спасибо Вам большое!) Теперь дотюкался. И еще можно вопрос. Вы не знаете в чем может быть проблема в выделении слоя в фотошопе. у меня ctr+alt+прав кнопка мыши работает через раз. Может есть другие комбинации. Ниче не нагуглил по этому вопросу

[Сергей delphinpro]

safbek: Выделение слоя работает при включенном инструменте "Перемещение" ("Move" в английской версии, если мне не изменяет память). Самая первая кнопка вверху панели инструментов. Горячая клавиша для включения это инструмента "V".

[safbek]

Сергей: Оказывается надо было сначала сделать невидимым верхний слой. Снять глазок с 12 Col Grid. Теперь выделяется без проблем. Спасибо вам за доступные объяснения и потраченное время!)