Как верстать современные лендинги?

Question

[cehka]

Интересует, как правильно верстать декоративные элементы, которые пихают сейчас практически в каждый лендинг. Так же, как правильно верстать иллюстрации(скрины). То ли через background то ли просто через img.
Так же интересует, как сделать хоть какую то адаптивность в таких проектах, в стандартных лендингах за 10 минут можно написать адаптивность, а здесь вообще без понятия как.

Answer 1

[Johny Smith]

То ли через background то ли просто через img

img - это неотъемлемая часть контента, которая критически важна для пользователя, напр. картинка товара.
background - это часть интерфейса: иконки, фон блоков, спецэффекты, всё что касается дизайна;

Comments

[cehka]

Понял-принял, спасибо большое.

[Johny Smith]

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

[Юрий]

Olek1, не исключение.
img = контент
bg = дизайн/оформление.

лого это точно не дизайн, значит контент.

[Johny Smith]

Юрий, логотип компании, который можно делать в качестве img а если логотип расположен под углом и зациклен например в качестве заливки блока, то это уже не контент а дизайн

[Юрий]

Olek1, мой месседж - лого не является исключением.

[Johny Smith]

Юрий, я написал всё правильно

[Юрий]

Olek1, так я и не спорил.

[Johny Smith]

@alex-1917, Родилась мечта - чтобы год был 256 суток.
Тогда его можно будет поделить на 16 месяцев по 16 суток!
А в сутках по 16 часов, а в них по 64 минуты и 64 секунды в минуте.
Недостаток - неделя будет 8 суток, и я догадываюсь, что в ней будет два понедельника, а не два воскресенья

what are you talking about, are you crazy man

[Johny Smith]

alex-1917, тебя ещё не забанили?

Answer 2

[Александр Таратин]

а здесь вообще без понятия как.

Должно быть нарисовано в макете как должно выглядеть на разных разрешениях - но это в идеальном мире.

А так, чисто на мой вкус:
-Скрыть картинку
-Залить фон чистым темно фиолетовым цветом как на картинке
-Блок враппер с текстом растягивать не на 50% а на все 100%
-Высоту блока враппера вместо фиксированной высоты экрана уменьшить до высоты контента.

Comments

[cehka]

Не, я имел ввиду адаптивный среди экранов компьютеров, мобильную версию я могу сделать.
Просто вот эта заливка тёмно фиолетовая, это круг, на моём экране всё идеально, но при увеличении/уменьшении круг не становится меньше, хотя я указал его в em, и из за этого получается горизонтальный скролл. overflow:hidden пробовал, не работает(ставил на все слои на которые возможно)) )

[Александр Таратин]

cehka, Круг??? Вижу на скрине только один маленький круг розового цвета. Но речь явно не о нем. Часы еще круглые есть, но это тоже явно не то...

[Александр Таратин]

cehka, Аааа... дошло. Просто нарисуйте фиолетовый фон в svg и растяните на всю ширину экрана. SVG вставляйте как есть кодом, на не через img или background-image

[cehka]

Александр Таратин, Прикол в том, что если сделать просто заливку то смотрится ужасно, там же типо такие плавные линии появляются из за того что использовал круг.

[Александр Таратин]

cehka, В svg можно любую безье кривую нарисовать.
Криво получилось, но для примера сойдет
https://jsfiddle.net/QW01_01/no6741av/6/

Answer 3

[xmoonlight]

Как правило все блоки оформления позиционируются по каждой секции (section).

Порядок для одной секции: оформление-ДО, текст секции, оформление-ПОСЛЕ.
1. Оформление-ДО - ставится первым (верхние углы и слева)
2. Основной текст секции - ставим в середине, оттеняем случайные возможные "наезды" слоёв оформления на текст с помощью прозрачности и z-index'а.
3. Оформление-ПОСЛЕ - ставится последним (справа и нижние углы).

Если картинки/SVG оформления не вписываются в ширину viewport'а - они масштабируются по ширине viewport (иногда со смещением за зону видимости, чтобы сохранить крупную детализацию, потеряв какую-то часть изображения по краям).

Также, можно ограничить высоту блоков оформления сверху и снизу через max-height в адаптивном режиме.

Comments

[xmoonlight]

cehka, а чем мой ответ не решение? (как-то он одиноко прям остался...)

[cehka]

xmoonlight, я вроде нажал, шото не отметилось, соре

[xmoonlight]

cehka, и это не первый раз, кстати уже и именно для моего ника... что-то не то накрутили наверное на сайте или сбоит...

Answer 4

[Дмитрий]

1. svg формат + grid layout сетки
2. самостоятельно отрисовать все, кроме кнопки и втиснуть.
3. Верно подметил, коллега! background, но уже с сеткой Grid Layout
4. (олдовый гимор) 2 блока, один в другой вложить, через позиционирование и z-index выровнять.

1 вариант самый верный. Проще вставить svg для конкретного разрешения, чем "утюжить и рвать" бедный png, прописывая (не дай боже на чистом css) сотни медиа-запросов, растягивая линейку дедлайна на недели и подключая традиционным образом десятки скриптов.

Comments

[cehka]

А что делать, если картинка есть только в png формате?))

[Дмитрий]

3 вариант использовать, к сожалению.