От автора: недавно я написал пост, который был опубликован на CSS-Tricks, в нем я рассматривал способы использования символов Unicode для создания интересных (и случайных) узоров. С тех пор я продолжал искать новые варианты того, как можно создавать узоры из символов. Я даже использовал книгу о Unicode из локальной библиотеки.
Все зависит от вашего воображения, если вы хотите найти возможные узоры, которые можно создать с помощью символов Unicode. Хотя не все символы подходят для узоров, этот процесс для меня является хорошим упражнением.
И, помимо самого Unicode, методы построения шаблонов могут быть не столь очевидными. Обычно требуется вдохновение, пробы и ошибки, чтобы придумать новые.
Еще одна плитка
На самом деле существует много способов создать плитку. Вот один из моих любимых узоров плитки, который можно легко создать с помощью CSS grid:
.grid { /* использование `dense`, чтобы автоматически заполнять зазоры. */ grid-auto-flow: dense;
} .cell { /* использование `span`, чтобы изменять размер ячеек */ grid-column-end: span <num>; grid-row-end: span <num>;
}
Хорошим примером этой техники является захват сетки от Мириам Сюзанн. Дальше я попытался вставить в эту сетку различные символы Unicode. И самое главное, нужно обновлять значение font-size в соответствии с диапазоном ячеек.
Узор с использованием символов \2f3c — \2f9f. Я тестировал это только на Chrome под Mac. Некоторые из примеров могут выглядеть ужасно на других браузерах / платформах.
.cell { /* ... */ --n: <random-span>; grid-column-end: span var(--n); grid-row-end: span var(--n);
} .cell:after { /* ... */ font-size: calc(var(--n) * 2vmin);
}
Это немного похоже на эффект облака тегов, но с использованием CSS. Таким образом можно создать множество узоров.
Узор с использованием символов \2686 — \2689
Узор с использованием символов \21b0, \21b1, \21b2 и \21b4
span столбцов и строк не всегда должен иметь одно и то же значение. Мы можем внести небольшие изменения, скорректировав количество строк в каждой ячейке:
.cell { /* изменяем только span строк */ grid-row-end: span <num>;
}
Поскольку свойство font-size масштабируется вверх / вниз в обоих направлениях (вертикально и горизонтально), вместо этого более корректно использовать scaleY() в transform.
Узор с использованием символов \25c6 — \25c8
:after { /* ... */ transform: scaleY(calc(var(--span) * 1.4));
}
И вот еще один узор, созданный с помощью вращения до некоторой степени внутреннего контейнера сетки.
Треугольники также можно нарисовать с помощью clip-path, они будут более адаптивными, но так приятно делать что-то другим способом.
Дополнительные изменения в макете:
.column-odd { transform: skewY(40deg);
} .column-even { transform: skewY(-40deg);
}
Теперь выполните следующие преобразования для каждого столбца.
Узор с использованием символов \1690 — \1694
Композиция
Многие пары Unicode принимают разную форму с разными углами. Например, скобки и стрелки будут выглядеть по разному при разных направлениях. Мы можем использовать эту концепцию для комбинирования фигур и создания повторяемых узоров.
Этот узор использует знаки меньше или больше:
:nth-child(odd):after { content: '<';
} :nth-child(even):after { content: '>';
}
Здесь мы используем круглые скобки:
Волнистый узор с использованием ( и )
:nth-child(odd):after { content: '(';
} :nth-child(even):after { content: ')';
}
Это символы, которые мы используем каждый день. Тем не менее, они выглядят и воспринимаются по-новому, когда организованы по-новому.
Есть еще пара символов, ᚛ и ᚜. Разместив их в сетке и масштабировав до нужных значений, мы можем получить красивый узор:
Узор с использованием \169b и \169c
Кольца
На прошлой неделе я присоединился к CodePen Challenge, по условиям которого нужно создать дизайн из элементов sub и sup. Когда я экспериментировал с ними, я заметил, что эти два тега автоматически уменьшались при вложении.
Поэтому, я попытался поместить их в круг:
.first-level { /* Разделяем круг на много сегментов. */ transform: rotate( calc(360deg / var(--slice) * var(--n)) );
}
Внезапно я понял, что этот метод можно использовать и для создания фоновых узоров. Результаты получился довольно красивый.
Узор с использованием \003e
sub:after, sup:after { content: '\003e';
}
Интересно, что изменение одного символа может привести к совершенно другим результатам.
Объединение \002e и \003e для формирования нового узора
Объединение \25c9 и \2234 создает другой эффект в том же круговом макете
Заключение
Вот все! Цветовые палитры, используемые в этой статье взяты с Color Hunt и Coolors.co. Примеры созданы с помощью css-doodle, за исключением примеров колец в последнем разделе. Все примеры можно найти в этой подборке на CodePen. Надеюсь, вам понравилось, и спасибо за прочтение!
Автор: Yuan Chuan
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
