@microf

Как верстают такой фон?

https://dribbble.com/shots/4276228-Camera-dron-lan...

А как верстают такой фон? Круглый фон, который заходит и в хидер и прочее. Ну т.е. я понимаю, что можно просто сделать хидер прозрачным), но как вот на него накладывается квдрокоптер? z-index? И вообще может уже что-то появилось, чтобы не ставить жирные картинки в качестве бекграунда?
  • Вопрос задан
  • 313 просмотров
Пригласить эксперта
Ответы на вопрос 2
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
И вообще может уже что-то появилось, чтобы не ставить жирные картинки в качестве бекграунда?

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

Как верстают такой фон?

Можно по-разному подходить к вопросу. Как вариант три слоя:
1. Левый контент, у него фон в виде левого круга (чтобы не париться с его размером на разных размерах экрана - ведь там по идее контент должен помещаться в круг). Тут главное все аккуратно расположить и не забывать про critical css.
2. Коптер (поскольку он жирный, его можно подгружать асинхронно и выдвигать с помощью CSS-анимации из-за правого края экрана - будет и красиво и производительно; я бы еще какой-нибудь эффект к тексту добавил, но это уже другая история). Его размер видимо должен зависеть от ширины экрана и размера контента слева. Надо заранее сообразить, как это все должно адаптивиться.
3. Меню, которое справа вверху, оно должно быть поверх коптера (опять вопрос про адаптивность).
4*. Фон, который самый-самый большой фон можно просто поставить на background у хидера. Поскольку он в векторе, его можно сделать гораздо выше, чем на картинке, чтобы опять же не париться, что он вылезет из скругления внизу секции на телефоне. Само это скругление можно сделать тысячей способов, на тостере уже не раз спрашивали.

Такой подход требует больше времени, чем просто поставить все на фон у одного элемента, но и результат будет немного другого уровня.
Ответ написан
@tansur
Вечный junior
В background есть возможность задать сразу несколько фоновых изображений. В вашем примере думаю лучше будет сделать так: круги в svg, квадрокоптер соответственно картинкой. Есть ещё такая особенность свойства background, чем "позднее" задан фон тем он ниже будет.

https://codepen.io/anon/pen/EEOrqe
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
10 дек. 2018, в 23:35
150000 руб./за проект
10 дек. 2018, в 23:17
2000 руб./за проект
10 дек. 2018, в 22:37
30000 руб./за проект