Верстка страницы с фонами неправильной формы?

Question

[vladHD]

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

Comments

[vladHD]

вопрос еще немного не по теме, но все же, как называются эти картинки в кружочках ? как их правильно верстать? вырезать картинкой с макета ? или сделать как-то через цсс ?

[Сергей]

Посмотрите здесь похожая верстка zbs-auto.ru

[Сергей]

По кружочкам: белый бордер с радиусом 50%, иконки беграундом по центру делаешь

Answer 1

[Денис Инешин]

Просто берется картинка, шириной скажем 2600 пикселей и всё. Там у вас по сути 2 основных цвета + 4-5 оттенков для сглаживания углов. Т.е. картинку можно конвертировать в PNG-8 и палитрой из 8-16 цветов. На выходе это даст размер в 10-20 килобайт всего.
Ну и нижнюю картинку так же, она будет весить килобайта 3-4.
Итого получаем 2 слоя. 1 на body, второй на каком-нибудь wrapper.

Answer 2

[Евгений Петров]

Как верстать блоки непрямоугольной формы?
Как сверстать данный (нестандартный) блок?

Comments

[vladHD]

вопрос еще немного не по теме, но все же, как называются эти картинки в кружочках ? как их правильно верстать? вырезать картинкой с макета ? или сделать как-то через цсс ?

[Евгений Петров]

В смысле дерево, график и прочее? Можно сделать SVG, и это будет анимируемо, настраиваемо и зело приятно для ретины.

Можно тот же SVG заради осла святого кодировать в base64 и положить фоном. Анимировать теперь саму картинку можно будет только целиком, цвет не поменять, но на ретине, как и в первом варианте будет отлично.

Можно найти другое векторное решение — шрифт волшебный, где будут символы такие. Но поди его ещё найди... Но для ретины тоже хороший вариант — вектор он и в Африке торт.

Ну и картинкой можно. Простенько, быстренько, для ретины нужно колдовство с background-size.

[vladHD]

си последний вопрос по графике=)) тайм лайн вертикальный как правильно реализовать ?

[vladHD]

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

Answer 3

[vladHD]

с картинками в виде фона вроде бы понятно, а вот можно ли как-то это реализовать на css3 ?( трансформации, рисование трапеции бордерами)

Comments

[Сергей Протько]

можно но лучше не стоит, так как вопервых это не везде одинаково работает, во вторых дает сильный удар по нагрузке на девайсы клиентов. Вы не захотите делать сайт который лагает при скроле.

[Сергей Протько]

Справедливости ради - эта штуку можно сделать тупо через border

[vladHD]

т.е самый оптимальный вариант это просто нарезать эти трапеции в фш и блокам задать этот фон и все ? а как быть с адативностью ?

[Анна Бакурова]

vladHD: если Вы мазахист и любите боль, то можно попробовать svg и ещё потом анимацию сделать как этот город течёт типа сосулек )) Но Я думаю это явно не в бюджет

Answer 4

[Nikolay Talanov]

codepen.io/suez/pen/29eaa4dc2230b58280b1bee92a8a64cb - пример на коленке, сделанный с помощью transform: skewY. Можно без проблем еще сделать с помощью rotate. В обоих случаях контент внутри блока нужно будет поворачивать на противоположное количество градусов, чтобы он выглядел как обычно.
Вариант с трансформами оправдан только для тех случаев, когда пространство с этими срезанными углами должно быть "живым". То есть там будет виден какой-то контент/неоднородный бэкграунд и все такое. Если бг будет тупо черным, то проще сделать это на основе :before/:after.

Comments

[vladHD]

что вы имеете в виду , когда писали на основе :before after ?