nikolai-shabalin/htmlcss-2__section-6.md

## htmlcss-2__section-6.md

      
    Raw
  

              htmlcss-2__section-6.md
            
          
    Вопросы к разделу «Адаптивная графика»

Стили для элемента блока


Допускается ли указывать в стилях элемента block__el что-либо кроме внешней геометрии? Например, разрешено ли указывать высоту строк или цвет текста в этом классе-элементе?

Стили для элементов блока не должны быть исключительно сеточными. Они могут быть сеточными, если вы хотите встроить туда какие-то другие блоки. И в этом случае лучше действительно ограничиться позиционированием этих блоков. А если вам нужно для встраиваемых в эти элементы блоков написать какие-то другие стили, то лучше сделать их модификаторами этих встраиваемых блоков.
Позиционирование фонов


Добрый день! Возник вопрос по поводу позиционирования фонов и их декоративного оформления.
У нас в проекте Погнали, есть блок с множественным наложением фонов. Свойство background-image прекрасно работает, фоны накладываются.. но! конкретно в этом месте тут идет темно синий прямоугольник с круглыми углами, который подложен под фоновую картинку с фотографией. Данного прямоугольника в svg картинках нет.
Логично предположить, что его можно добавить, через свойство background-image в виде градиента. Однако для фона в таком случае нельзя скруглить углы. Свойство border-radius работает с общим фоном самого блока. https://prnt.sc/rulqb2
Еще можно было бы сделать этот прямоугольник в виде псевдоэлемента. Тогда решается проблема с скруглением углов, но возникает другая. Псевдоэлемент невозможно подложить под фон.
Единственное решение, которое я нашла, это создать svg изображение самостоятельно... Возможен ли такой вариант? Не будет ли это противоречить каким либо правилам или критериям на защите.

Вы очень правильно и самостоятельно мыслите, решая эту задачу. Её можно решить по-разному и тот способ, который вы предлагаете — вполне себе решение. Очень часто бывает, что на макетах не хватает графики именно для той реализации, которая будет самой удачной. Поэтому знать как сделать SVG-картинку руками (ну или нарисовать в редакторе) — бывает довольно полезно.
Кстати, псевдоэлемент всё же можно подложить под фон с помощью z-index: -1 :)
.block {
    position: relative;
    width: 256px;
    height: 256px;
    background-color: tomato;
}

.block::before {
    position: absolute;
    bottom: -32px;
    right: -32px;
    z-index: -1;
    width: 64px;
    height: 64px;
    content: '';
    background-color: plum;
}