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

Интересует, как правильно верстать декоративные элементы, которые пихают сейчас практически в каждый лендинг. Так же, как правильно верстать иллюстрации(скрины). То ли через background то ли просто через img.
Так же интересует, как сделать хоть какую то адаптивность в таких проектах, в стандартных лендингах за 10 минут можно написать адаптивность, а здесь вообще без понятия как.
5b7094c3855bb534283376.png
  • Вопрос задан
  • 2106 просмотров
Решения вопроса 4
Olek1
@Olek1
То ли через background то ли просто через img

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

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

А так, чисто на мой вкус:
-Скрыть картинку
-Залить фон чистым темно фиолетовым цветом как на картинке
-Блок враппер с текстом растягивать не на 50% а на все 100%
-Высоту блока враппера вместо фиксированной высоты экрана уменьшить до высоты контента.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
5b709e402f085326929302.png
Как правило все блоки оформления позиционируются по каждой секции (section).

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы