Режимы наложения + гриды
В этой статье я продолжил экспериментировать с режимами наложения и решил сделать что-то более-менее «раскладочное» с помощью гридов.
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
🍀.
В общем, я попробовал ещё другие сочетания режимов наложения и раскладки слоёв, выходит прикольно, можно попробовать где-то применить: