Доброго времени суток, уважаемые хабровцы.
Недавно Уго Жиродель , он же CSS-гоблин, SASS-хакер и Margin-психопат, опубликовал очень интересную CSS-головоломка за сообразительность.
Сможете ли вы выполнить это, учитывая следующие правила?
- Круг в центре должен быть прозрачным, чтобы был виден фон.
- Расстояние между левым и правым блоками, а также между верхним и нижним должно быть одинаковым
- Если в блоке есть дочерние элементы, содержимое должно отображаться.
- DOM должен выглядеть так: ul > li > раздел > верхний + нижний колонтитул
- Запрещен JavaScript или изображения.
- Еще добавлю от себя: Вы не можете использовать CSS Shape и Clip Path.
Сделанный? Базовый HTML:
Я не буду заполнять место в этом посте тривиальными стилями, отражающими и позиционирующими блоки.<ul class="boxes"> <li class="box box-alpha"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> <li class="box box-beta"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> <li class="box box-gamma"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> <li class="box box-delta"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> </ul>
Укажу лишь появление круга в самом центре, одинаковое во всех примерах: .
boxes:after {
background: none repeat scroll 0 0 #34495E;
border: 0.5em solid #2C3D50;
border-radius: 50%;
content: " ";
height: 5.5em;
left: 50%;
margin-left: -2.75em;
position: absolute;
top: 10.75em;
width: 5.5em;
}
Первый способ: радиальный градиент
Необходимо задать правильные радиальные градиенты с цветом и прозрачностью для всех элементов футера для верхних блоков и всех элементов хедера для нижних блоков.
На первый взгляд, это самое тривиальное решение, но в нем есть одна особенность: использовать CSS Calc(), чтобы сделать его отзывчивым: .
box-alpha .
box-footer { background: radial-gradient(circle at calc(100% + 2em) 7em , rgba(0, 0, 0, 0) 6em, #148F77 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } .
box-beta .
box-footer { background: radial-gradient(circle at -2em 7em , rgba(0, 0, 0, 0) 6em, #25A25A 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } .
box-gamma .
box-header { background: radial-gradient(circle at calc(100% + 2em) -2em , rgba(0, 0, 0, 0) 6em, #217DBB 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } .
box-delta .
box-header {
background: radial-gradient(circle at -2em -2em , rgba(0, 0, 0, 0) 6em, #804399 6em) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
Второй способ: рамка для псевдоэлементов
Я думаю, что это самый изобретательный способ решить эту проблему.Для элементов хедера и футера в соответствии с каждым из блоков задайте отступ в нужном направлении.
Затем для каждого раздела и шапки с футером создаем псевдоэлементы: .
box-alpha .
box-content:before { border-color: #148F77 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #148F77; bottom: -7.5em; right: -7.5em; } .
box-content:before { border: 10em solid #FF0000; content: ""; display: block; height: 0; position: absolute; width: 0; } .
box-alpha .
box-content:after { border-color: #148F77; bottom: -10em; right: -10em; } .
box-content:after { border: 2em solid #FF0000; border-radius: 30em; content: ""; display: block; height: 12em; position: absolute; width: 12em; z-index: 0; } .
Обратите внимание на :before для .
box-alpha, у которого нет ширины и высоты.
Давайте вспомним как мы все привыкли делать «стрелки» или треугольники в CSS с использованием границы.
Здесь действует тот же принцип.
Третий способ: тени и отрицательные отступы
Мое любимое решение, демонстрирующее доскональное понимание самых тонких нюансов CSS. Как и в предыдущей версии, мы создаем для элементов псевдоэлемент и задаем правильный отступ.Элемент каждого из блоков, часть которого необходимо разрезать на четверть круга, полностью прозрачен.
Фон задается огромной внешней тенью псевдоэлемента.
.
block__element--cut:before { border-radius: 50%; content: ""; height: 8em; margin: -5em; position: absolute; width: 8em; z-index: -1; } .
block:nth-child(1) .
block__element--cut:before { bottom: 0; box-shadow: 0 0 0 40em #0F414C; right: 0; } .
block:nth-child(2) .
block__element--cut:before { bottom: 0; box-shadow: 0 0 0 40em #673A01; left: 0; } .
block:nth-child(3) .
block__element--cut:before { box-shadow: 0 0 0 40em rgba(187, 169, 255, 0.65); right: 0; top: 0; } .
block:nth-child(4) .
block__element--cut:before {
box-shadow: 0 0 0 40em rgba(176, 214, 95, 0.65);
left: 0;
top: 0;
}
Но самое элегантное здесь не тень.
И используя отрицательное значение маржа: -5em .
При абсолютном позиционировании вправо, снизу к элементу будут применяться значения поля-право: -5em и поля-дна: -5ем соответственно.
Оригинальное решение Хьюго на SASS можно посмотреть здесь .
Он использует box-shadow, как в третьем примере.
Вспомнив в конце мой вчерашний перевод «Об этом помнят только разработчики 90-х» , хочу сказать, что лет через 15 мы тоже будем улыбаться этим диким методам, которые приведены в этом посте.
Спасибо всем за внимание.
Теги: #головоломка #CSS #HTML #Разработка сайтов #CSS #HTML
-
Микрофронтенд: Как Не Попасть К Черту
19 Oct, 24 -
Недооцененные Итераторы
19 Oct, 24 -
Кладр Умер, Да Здравствует Фиас?
19 Oct, 24 -
Бездомные На Красной Площади
19 Oct, 24 -
Банкомат Book Начнет Работу В Следующем Году
19 Oct, 24 -
Байнет 2.0. Мой Отчет.
19 Oct, 24
