Помогите с CSS

Всем привет, нашел 2 интересных макета для меня, но есть траблы, долго пытался их решить но не вышло((
Помогите пожалуйста, дайте название технологий, или ссылки на материал

1) ibb.co/kSLQn7
как сделать так чтоб блок был между header и section всегда по центру, не
смотря на ширину экрана

2) ibb.co/dxiNZn
как реализовать данную секцию(я про тени и скос по-диагонали, чтоб все
выглядело красиво не зависимо от ширины экрана)

3) ibb.co/d27S0S
как реализовать данные круги(при помощи z-index?) чтоб они накладывались
друг на друга, и не залазили на нижний section

Всем спасибо за внимание и помощь!!!

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

пора уже запускать стартап — «Выполню ТЗ за вас»

1) https://css-tricks.com/centering-css-complete-guide/
2, 3) Хитро порезать макет. Те области что растягивать нельзя так и вставляются картинкой. Области со сплошным цветом обычным фоном через css и они могут растягиваться..

Как пройти вот это(ссылка)тестовое задание?

1. всему блоку margin: auto; или position:absolute; top: {n}px; left: 50%; transform: translateX(-50%); ширина блока должна быть указана. или учить сразу flexbox и/или grid

habrahabr.ru/post/238449

2. положить фон png/svg. Можно пробовать стилями но будет ли это оправдано? Что то типа transform: skewX({n}deg)

3. экспортировать фон/круги в svg и поставить фоном

{n} — подходящее число

вариантов реализаций уйма. зависит от выбранного подхода в общем

1. Внешнему блоку с длиной 100% — display: flex; justify-content: center;

1. Чтобы спозиционировать элемент с position: absolute, стоит использовать вариант о котором Александр написал;
2. Для этого есть специальное свойство clip-path, попробуй его заюзать. А вот сервис для генерации различных фигур: bennettfeely.com/clippy
3. Мне кажется, тут лучше использовать просто изображение для background.

clip-path имеет плохую поддержку. Через skew сделать проще всего.

Підписатись на коментарі