Как лучше сделать фон или блок в целом

[Bava]

Верстаю этот шаблон, подскажите как лучше сверстать блок, там где комп в хедере, пугает что там есть блик над текстом и что фон на два цвета заполняется, может сделать два блока?

 

.jpg макета

 

.psd можно скачать там со страницы шаблона на сайте

 

Ну как-то так.. надеюсь вы меня поняли

 

Вот я кое что нарисовал как примерно размечать, только как блик туда запихнуть? а кто-нибудь может сверстать эту часть если не сложно, а я посмотрю, ну а если нет то хоть дайте совет как лучше сделать здесь разметку и css

 

Edited February 24, 2016 by Bava

[satantx]

 •

Edited February 25, 2016 by satantx

[by chris]

Как вариант спозиционировать псевдоэлементами. Напишите свой код на jsfiddle с вырезанными картинками.

[Bava]

Вот что получилось

 

Хочу кое-что спросить:

 

1. Тень у iMac не выходит за пределы блока потому что стоит overflow: hidden чтоб нормально float работал, можно ли как то сделать чтоб выходила?

 

2. не пойму как сделать свечение над iMac и блик над текстом справа (Superb cutomers flat design tool)

[Sergey_K_2015]

Вот что получилось

 

Хочу кое-что спросить:

 

1. Тень у iMac не выходит за пределы блока потому что стоит overflow: hidden чтоб нормально float работал, можно ли как то сделать чтоб выходила?

 

2. не пойму как сделать свечение над iMac и блик над текстом справа (Superb cutomers flat design tool)

А если сделать фигуру (параллелограмм) в svg формате, задать ей частичную прозрачность, абсолютно спозиционировать и z-index поместить сверху, чтобы она накрывала нужные элементы?

[by chris]

1. Свойство overflow не нужно, т.к явно указана высота для дива с классом inner-header2.

2. 

.header2 {  position: relative;  overflow: hidden;}.header2::after {  position: absolute;  content: '';  bottom: 23px;  right: -172px;  border-style: solid;  border-width: 600px;  border-color: transparent rgba(255, 255, 255, .5) transparent transparent;  transform: rotate(18deg);  pointer-events: none;}

[Bava]

 

1. Свойство overflow не нужно, т.к явно указана высота для дива с классом inner-header2.

2. 

.header2 {  position: relative;  overflow: hidden;}.header2::after {  position: absolute;  content: '';  bottom: 23px;  right: -172px;  border-style: solid;  border-width: 600px;  border-color: transparent rgba(255, 255, 255, .5) transparent transparent;  transform: rotate(18deg);  pointer-events: none;}

Забыл снять высоту, а как сделать если без высоты

[by chris]

Забыл снять высоту, а как сделать если без высоты

Добавить clearfix 

[Bava]

 

1. Свойство overflow не нужно, т.к явно указана высота для дива с классом inner-header2.

2. 

.header2 {  position: relative;  overflow: hidden;}.header2::after {  position: absolute;  content: '';  bottom: 23px;  right: -172px;  border-style: solid;  border-width: 600px;  border-color: transparent rgba(255, 255, 255, .5) transparent transparent;  transform: rotate(18deg);  pointer-events: none;}

 

 

А без pointer-events можно сделать (он поддерживается не всеми браузерами)

[by chris]

Можно. Нужно поиграть с этими значениями

 

right: -172px;

border-width: 600px 600px 600px 0;
transform: rotate(18deg);

Edited February 27, 2016 by by chris

[Bava]

Можно. Нужно поиграть с этими значениями

 

right: -172px;

border-width: 600px 600px 600px 0;

transform: rotate(18deg);

Не поможет, они ведь не сделают элемент прозрачным для click, остается наверно только поставить эти картинки под  текстом и монитором

[by chris]

Не поможет, они ведь не сделают элемент прозрачным для click, остается наверно только поставить эти картинки под  текстом и монитором

Поможет. В этом случае элемент будет  перекрывать только последние буквы (mers. и правый край в описании...). 

[Bava]

http://mbav-websites.xyz/

 

Как сделать, чтоб при переходе на "контакты" , футер прижимался к нижнему краю страницы (то есть страница делалась на весь экран)

[VeniVidiVici]

http://dimox.name/press_footer_bottom_with_css/