Свойство gap работает не так как надо
grid-template-columns: 1fr 1fr;
gap: 30px;
mix-blend-mode, но нужно подбирать цвета и эффекты
Примечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill и stroke. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан 0, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited.
text-indent. text-indent: -50px;
padding: 50px;Можно ли сейчас отказаться от подхода задания максимальной ширины
А также использую неразрывные пробелы для некоторых фраз.
Можно ли уже использовать CSS-свойство text-wrap: balance?
text-wrap: pretty;
чтобы упростить написание стилей?
$elg: 1526px;
$lg: 1000px;
$md: 720px;
$sm: 540px;
$esm: 360px;@mixin sm {
@media (min-width: variables.$sm) {
@content;
}
}
@include sm {
//some
}Моя задача растянуть фон на всю ширину body даже при скролле
указывал для фона и 100% и 100vh
min-height: 100vh или развлекаются с процентами от html. Но это делают для эффекта липкого футера.
Практически все способы вставки svg в html не позволяют менять цвет при помощи css.
fill: red;
stroke: green;currentColor, в CSS меняем свойство color.mask: url(img.svg) no-repeat center / contain;
background: red;
&:hover {
background: green;
}<ul class="header__nav">
<li class="nav__item">
<a class="nav__link nav__link--favorites" href="">
<span class="visually-hidden">Избранное</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--profile" href="">
<span class="visually-hidden">Профиль</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--card" href="">
<span class="visually-hidden">Корзина</span>
</a>
</li>
</ul>.header__nav {
display: flex;
gap: 42px;
}
.nav__link {
display: block;
width: 44px;
height: 44px;
border-radius: 8px;
background-color: rgb(246, 246, 246);
}
/* доступно скрываем текст */
.visually-hidden {
position: fixed;
transform: scale(0);
}vertical-align: top; и дописываем сcылкамalign-content: center;
text-align: center;display: flex;
align-items: center;
justify-content: center;.elem:not(:last-child) {margin-right: NNpx}.elem + .elem {margin-left...}gap в гридах и флексах!
есть ли вариант чтобы верстка перестраивалась на больном расширении согласно макета чтобы не пршлось скрывать или показывать объекты?
display: contents, после этого он станет как будто прозрачным или как будто его нет.