Вълшебният кръг: Пъзел CSS

Ще можете да се гримирате по този начин предвид следните правила?

За да не бъдете много мързеливи - рамката вече е там.

Няма да запълня мястото в тази публикация с тривиални стилове, които отразяват и позиционират блокове. Ще обознача само появата на кръг в самия център, идентичен във всички примери:

Метод първи: радиален градиент

Трябва да зададете правилни радиални градиенти с цвят и непрозрачност за всички елементи на долния колонтитул за горните полета и всички елементи на заглавката за долните полета. На пръв поглед това е най-тривиалното решение, но има обрат, който използва CSS calc (), за да го направи отзивчив:

Метод втори: рамка за псевдоелементи

Мисля, че това е най-гениалното решение. За елементите на горния и долния колонтитул, в съответствие с всеки от блоковете, задайте полето в желаната посока. След това за всеки раздел и заглавка с долен колонтитул създаваме псевдоелементи:

Обърнете внимание на: before за .box-alpha, който няма ширина или височина. Спомнете си как всички ние правехме CSS стрелки или триъгълници, като използвахме контура. Същият принцип тук.

Метод трети: сенки и отрицателни подложки

Моето любимо решение за показване на задълбочено разбиране на по-фините точки на CSS. Както в предишната версия, създайте псевдоелемент за необходимите елементи и задайте правилната подложка. Елементът на всеки от блоковете, част от който трябва да бъде изрязан с четвърт кръг, е напълно прозрачен. Фонът е настроен на огромна външна сянка на псевдоелемента.

Но най-елегантното нещо тук не е сянката. И използвайки отрицателна стойност марж: -5em. При позициониране надясно, отдолу, елементът ще бъде засегнат от стойностите margin-right: -5em и margin-bottom: -5em съответно.

Оригиналното решение на Hugo за SASS може да видите тук. Той използва box-shadow както в третия пример. Спомняйки си в края на вчерашния ми превод „Само разработчиците от 90-те помнят etor“, искам да кажа, че след 15 години ние също ще се усмихнем на тези диви методи, които са дадени в този пост.