Допускается ли указывать в стилях элемента 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;
}
Проект Мишка. Как правильно вставить логотип в шапку?
Если так, то возникает проблема с покраской в бирюзовый при наведении (а может быть есть способ?):
Или же писать
<svg>и прописывать условия для отображения?