Как правильно сверстать сквозной sidebar над контентом?

Question

[Александр Янк]

Прилетела вот такой макет joxi.ru/v29JR9KtbJbgAG
С первого взгляда ничего сложно, но вот сайдбар проходит сквозь все остальные слои.
У меня только две идеи сверстать вот так codepen.io/alex-lenk/pen/BpNJLG и так codepen.io/alex-lenk/pen/LxVexL

И оба способа мне не нравятся, может есть лучшее решение?

Answer 1

[WQP]

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

Пример - https://uwebdesign.ru/

Comments

[Александр Янк]

Правильно говорите, но тут ситуация несколько иная, тут сайдбар цельный, он не должен рабиваться на мелкие блоки joxi.ru/RmzgB8lSbDkD2O

[WQP]

Alex Lenk: codepen.io/Glaswr/pen/oBXpGo

[Александр Янк]

WQP: Вот это классное решение, даже не додумался бы до такого. Есть пара нюансов, с одним может я справлюсь. а вот с вторым никак. Как быть с двумя картинками коровы и градиента? joxi.ru/Y2LqlnGuNzP8A6

Answer 2

[Alexander Belov]

Для .sidebar background-color в формате rgba. Например, background-color: rgba(255,255,255,0.9);
Где последнее значение - прозрачность, а первые три - цветовая кодировка.

Comments

[Александр Янк]

Это я знаю :) задача под IE 8 сверстать, а там RGBA не поддерживается и выходит сайдбар голый, а как я через opacity, сайдбар становится белым.

Но вопрос со всем не об этом, а о том есть ли более правильная альтернатива сверстать такую структуру страницы...

[Alexander Belov]

Alex Lenk: Если для IE8, то привет PNG, в качестве фона или урезайте минимально внешний вид, чтобы работало в IE8 - всё стандартно.
Насколько я понял задачу, то чтобы проходило "сквозь все слои" - это и есть эффект от прозрачности фона. И других решений в контексте IE8 я не знаю.

Answer 3

[Андрей Федоров]

codepen.io/aliencash/pen/vgOdrB

Comments

[Александр Янк]

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