Русский
Русский
English
Статистика
Реклама

Выкладка нетрадиционной ориентации



Все, кому приходится иметь дело с вёрсткой, знают что гриды и flexbox давно захватили CSS, позволяют очень удобно организовать классическую выкладку хедер-контент-сайдбар-футер, списки карточек, masonry и так далее. Но их настоящая крутизна не в удобстве использования, а в бескрайних возможностях, которые они открывают. Я покажу и объясню мой любимый трюк, который позволяет верстать за рамками привычной вертикально-горизонтальной прямоугольной сетки, и выглядит это очень круто.

Разминка


На закуску разберём пример с КДПВ. Сетка на нём всё же прямоугольная, но очевидно, что поворотом на 45 градусов такого эффекта не добиться. Вот рабочий пример:



Разберём его строение. Структура HTML не содержит подвохов:

  <ul>    <li>      <img src="http://personeltest.ru/aways/habr.com/book01.jpg" alt="" />    </li>    <li>      <img src="http://personeltest.ru/aways/habr.com/book02.jpg" alt="" />    </li>    <!-- И так далее -->  </ul>


В CSS же мы обнаружим, что каждый ромб занимает две столбца сетки, а всего столбцов используется 2n+1, где n число ромбов:

  /*    Сначала задаётся дефолтное значение для самых узких экранов    3 столбца = 1 ромб в строке  */  :root {    --columns: 3;  }  /*    Благодаря значению span 2 каждый ромб занимает два столбца    в ширину, но не в высоту.  */  li {    grid-column-end: span 2;  }  /*    Медиа-запрос для 4 ромбов в строке определяет уже 9 столбцов  */  @media (min-width: 1200px) {    :root {      --columns: 9;    }  }


Теперь понятно, что имея в запасе лишнюю половинку в каждой строке, мы можем сдвигать чётные строки на половину ширины ромба, чтобы получить шахматный порядок:

  /* Двигаем каждый второй элемент при одном столбце */  li:nth-child(2n) {    grid-column-start: 2;  }  /* В других случаях подсчёт тоже простой */  @media (min-width: 1200px) {    li:nth-child(6n-2) {      grid-column-start: auto;    }    li:nth-child(8n-3) {      grid-column-start: 2;    }  }


Таким образом, мы получаем следующую картинку (пунктиром выделены границы строк и столбцов сетки):



Нам осталось только склеить строки, избавившись от пустого места между ними, для этого подойдёт простой советский margin-top: -50%. Загадка выкладки на этом заканчивается, а если вам интересно, как обложки книги выныривают из ромбов, то пожалуйста наглядный пример:



Здесь используются li:before и li:after, форма достигается с помощью clip-path, а полосатая раскраска с помощью крутого трюка с двойным применением бэкграунда:

  background-size: 50% 100%;  background-position: left, right;  background-image: linear-gradient(45deg, var(--pink) 40%, var(--green) 40%),    linear-gradient(-45deg, var(--pink) 40%, var(--green) 40%);


Посмотреть на эту фишку и многие другие безумные трюки можно на A Single Div (репо).

Гексагональные миры


Этот заголовок подкол в сторону недавней статьи про шестиугольные поля в играх. Статья классная, но если представить себе перенос тех схем в CSS, станет страшно и захочется плакать:



Плакать мы не будем, лучше сделаем выводы из предыдущего примера и попробуем сделать сетку из шестиугольников по-умному. Во время реализации мы задействуем сразу несколько трюков, поэтому этот способ красив не только снаружи, но и изнутри. Зацените рабочий пример и начнём:



Структура HTML почти не изменилась:

  <div class="main">    <div class="container">      <div></div>      <div></div>      <div></div>      <!-- И так далее -->    </div>  </div>


Задавать форму шестиугольников будем через clip-path:



Исходные стили у нас простые:

  .main {    display: flex;    --s: 100px;  /* size  */    --m: 4px;   /* margin */  }  .container {    font-size: 0; /* убирает пробелы между элементами inline-block */  }  .container div {    width: var(--s);    margin: var(--m);    height: calc(var(--s) * 1.1547);    display: inline-block;    font-size: initial; /* we reset the font-size if we want to add some content */    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);  }


Для выкладки мы используем inline-block, в котором, чтобы избежать лишних пробелов, используем трюк с font-size: 0. Отступы между элементами контролирует переменная --m (от margin). Теперь добавим отрицательный отступ, чтобы элементы приняли нужную высоту:

  .container div {    ...    margin-bottom: calc(var(--m) - var(--s) * 0.2886);  }


Элементы выстраиваются в обычную сетку и накладываются друг на друга, пора заняться смещением. Слева мы разместим container::before с высотой контейнера и шириной половины элемента плюс отступа:



Теперь прибегнем к крутейшему свойству shape-outside, которое позволяет тексту обтекать произвольные формы (а не только прямоугольные по модели margin-box). Крутизна в том, что это работает не только с текстом, но и с любыми inline-элементами. Чтобы создать нужную нам форму обтекания (не затрагивает нечётные ряды, чётные сдвигает на определённое расстояние), воспользуемся второй мощной фишкой shape-outside принимает градиенты, что позволяет создать повторяющийся паттерн:

  shape-outside: repeating-linear-gradient(#0000 0 A, #000 0 B);


Осталось определить A и B. B будет равняться высоте двух рядов, потому что нам нужно, чтобы паттерн повторялся каждые два ряда, это аналогично высоте двух шестиугольников с отступами, минус удвоенная высота их пересечения:

  calc(1.732 * var(--s) + 4 * var(--m))


Запишем это выражение в новую переменную --f. По сути, A равно B, только нам нужно вычесть несколько пикселей, чтобы появилось несколько прозрачных пикселей, которые и сдвинут весь ряд направо. В итоге получаем:

  shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));




Круто? Круто. Подведём итог:

  .main {    display:flex;    --s: 100px;  /* size  */    --m: 4px;    /* margin */    /* Дополнительно вычитаем 1px, чтобы сгладить ошибки округления */    --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);   }  .container {    font-size: 0; /* disable white space between inline block element */  }  .container div {    width: var(--s);    margin: var(--m);    height: calc(var(--s) * 1.1547);    display: inline-block;    font-size:initial;    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);    margin-bottom: calc(var(--m) - var(--s) * 0.2885);  }  .container::before {    content: "";    width: calc(var(--s) / 2 + var(--m));    float: left;    height: 120%;     shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));  }


Немного CSS-магии, и мы получаем рабочую, адаптивную шестиугольную выкладку! Вообще CSS всех бесит, но иногда он бывает удивительно красив.



На правах рекламы


Эпичные серверы это VDS для размещения сайтов от маленького интернет-магазина на Opencart до серьёзных проектов с огромной аудиторией. Создавайте собственные конфигурации серверов в пару кликов!

Присоединяйтесь к нашему чату в Telegram.

Источник: habr.com
К списку статей
Опубликовано: 11.06.2021 12:20:14
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Блог компании vdsina.ru

Разработка веб-сайтов

Css

Css. цсс

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru