Режимы наложения + гриды
В этой статье я продолжил экспериментировать с режимами наложения и решил сделать что-то более-менее «раскладочное» с помощью гридов.
See the Pen
Blend modes + grids = ❤️ by juwain (@juwain)
on CodePen.
Давайте разбираться 🦄.
Лейаут собран на гридах. В очередной раз кайфанул от удобства грид-лейаута. И не только от удобства процесса сборки интерфейса, но и от продуманности гридов в плане «резины» и взаимодействия их с другими возможностями CSS.
Итак, начнём с разметки:
<article class="brand">
<img class="brand__img" src="img/horse.jpg" alt="">
<section class="brand__message">
<h1 class="brand__heading">heading</h1>
<p class="brand__text">text</p>
</section>
</article>
Блок .brand отображается как грид. У грида 20 «резиновых» рядов и столбцов + 1 боковой столбец фиксированной ширины 300px с текстом.
.brand {
display: grid;
grid-template-columns: repeat(20, 1fr) 300px;
grid-template-rows: repeat(20, 1fr);
}
Сетку грида разметили, теперь будем в эту сетку помещать имеющиеся элементы.
Прелесть грид-раскладки в том, что элементы могут запросто пересекаться и накладываться внутри неё так, как будто спозиционированы абсолютно. В нашем случае картинка .brand__img будет растягиваться на всю ширину и высоту грида, а боковая колонка будет располагаться поверх неё:
/* Картинка:
идёт по столбцам — от первого столбца до последнего;
идёт по рядам — от первого ряда до последнего */
.brand__img {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
/* Колонка с текстом:
идёт по столбцам — от предпоследнего столбца до последнего;
идёт по рядам — от первого ряда до последнего */
.brand__message {
grid-column: -2 / -1;
grid-row: 1 / -1;
}
Отрицательные значения индексов означают обратный порядок отсчёта: -1 — последний ряд или столбец, -2 — предпоследний и так далее. Это удобно, так как при задании «координат» грид-элемента не нужно хардкодить общее число линий в гриде.
Есть ещё одна тонкость. Чтобы оставить возможность нашему гриду быть гибким, а не фиксированным, нужно подобрать картинку «с запасом» по размеру. Кроме того, нужно заставить картинку img вести себя так, как будто это фоновое изображение в режиме отображения background-size: cover. К счастью, это легко решается свойством object-fit:
.brand__img {
object-fit: cover;
object-position: center left;
width: 100%;
height: 100%;
}
Получился отличный отзывчивый лейаут:
Остаётся непонятным, зачем нам понадобились 20 рядов и столбцов, и как всё таки с имеющейся разметкой покрасить коня?
И тут на помощью приходят псевдоэлементы. Чем .brand::before и .brand::after не элементы грида? Вполне себе полноценные участники раскладки, если задать им любое значение свойства content. Интересно, что хотя псевдоэлементы и не спозиционированы абсолютно или относительно, к ним применяется свойство z-index, то есть можно указать очередность «слоёв» грид-элементов.
.brand::before,
.brand::after {
content: "";
z-index: 1;
}
.brand::before {
grid-column: 1 / -2;
grid-row: 1 / 11;
background-color: honeydew;
}
.brand::after {
grid-column: 1 / -2;
grid-row: -1 / 11;
background-color: orchid;
}
В общем, верхний и нижний «слои краски» будут делить ряды грида пополам, а по столбцам будут занимать всё пространство до боковой колонки:
Остаётся добавить немного магии режимов наложения, и конь будет покрашен:
.brand::before,
.brand::after {
mix-blend-mode: hue;
}
Режим наложения hue берёт оттенок цвета верхнего слоя (в нашем случае это сплошные цвета honeydew и orchid), а насыщенность и светимость от нижнего, то есть по-простому: цветные области будут тонированы, а чёрно-белые останутся такими же.
Кстати, я обожаю именованные цвета в CSS! Вы только подумайте, как прекрасно звучит — honeydew🍀.
В общем, я попробовал ещё другие сочетания режимов наложения и раскладки слоёв, выходит прикольно, можно попробовать где-то применить:
