Дополнительные узоры из символов Unicode

Дополнительные узоры из символов Unicode

От автора: недавно я написал пост, который был опубликован на CSS-Tricks, в нем я рассматривал способы использования символов Unicode для создания интересных (и случайных) узоров. С тех пор я продолжал искать новые варианты того, как можно создавать узоры из символов. Я даже использовал книгу о Unicode из локальной библиотеки.

Все зависит от вашего воображения, если вы хотите найти возможные узоры, которые можно создать с помощью символов Unicode. Хотя не все символы подходят для узоров, этот процесс для меня является хорошим упражнением.

И, помимо самого Unicode, методы построения шаблонов могут быть не столь очевидными. Обычно требуется вдохновение, пробы и ошибки, чтобы придумать новые.

Еще одна плитка

На самом деле существует много способов создать плитку. Вот один из моих любимых узоров плитки, который можно легко создать с помощью CSS grid:

Дополнительные узоры из символов Unicode

.grid { /* использование `dense`, чтобы автоматически заполнять зазоры. */ grid-auto-flow: dense;
} .cell { /* использование `span`, чтобы изменять размер ячеек */ grid-column-end: span <num>; grid-row-end: span <num>;
}

Хорошим примером этой техники является захват сетки от Мириам Сюзанн. Дальше я попытался вставить в эту сетку различные символы Unicode. И самое главное, нужно обновлять значение font-size в соответствии с диапазоном ячеек.

Дополнительные узоры из символов Unicode

Узор с использованием символов \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. Таким образом можно создать множество узоров.

Дополнительные узоры из символов Unicode

Узор с использованием символов \2686 — \2689

Дополнительные узоры из символов Unicode

Узор с использованием символов \21b0, \21b1, \21b2 и \21b4

span столбцов и строк не всегда должен иметь одно и то же значение. Мы можем внести небольшие изменения, скорректировав количество строк в каждой ячейке:

Дополнительные узоры из символов Unicode

.cell { /* изменяем только span строк */ grid-row-end: span <num>;
} 

Поскольку свойство font-size масштабируется вверх / вниз в обоих направлениях (вертикально и горизонтально), вместо этого более корректно использовать scaleY() в transform.

Дополнительные узоры из символов Unicode

Узор с использованием символов \25c6 — \25c8

:after { /* ... */ transform: scaleY(calc(var(--span) * 1.4));
}

И вот еще один узор, созданный с помощью вращения до некоторой степени внутреннего контейнера сетки.

Дополнительные узоры из символов Unicode

Треугольники также можно нарисовать с помощью clip-path, они будут более адаптивными, но так приятно делать что-то другим способом.

Дополнительные изменения в макете:

Дополнительные узоры из символов Unicode

.column-odd { transform: skewY(40deg);
} .column-even { transform: skewY(-40deg);
} 

Теперь выполните следующие преобразования для каждого столбца.

Дополнительные узоры из символов Unicode

Узор с использованием символов \1690 — \1694

Композиция

Многие пары Unicode принимают разную форму с разными углами. Например, скобки и стрелки будут выглядеть по разному при разных направлениях. Мы можем использовать эту концепцию для комбинирования фигур и создания повторяемых узоров.

Этот узор использует знаки меньше или больше:

Дополнительные узоры из символов Unicode

:nth-child(odd):after { content: '<';
} :nth-child(even):after { content: '>';
}

Здесь мы используем круглые скобки:

Дополнительные узоры из символов Unicode

Волнистый узор с использованием ( и )

:nth-child(odd):after { content: '(';
} :nth-child(even):after { content: ')';
} 

Это символы, которые мы используем каждый день. Тем не менее, они выглядят и воспринимаются по-новому, когда организованы по-новому.

Есть еще пара символов, ᚛ и ᚜. Разместив их в сетке и масштабировав до нужных значений, мы можем получить красивый узор:

Дополнительные узоры из символов Unicode

Дополнительные узоры из символов Unicode

Узор с использованием \169b и \169c

Кольца

На прошлой неделе я присоединился к CodePen Challenge, по условиям которого нужно создать дизайн из элементов sub и sup. Когда я экспериментировал с ними, я заметил, что эти два тега автоматически уменьшались при вложении.

Дополнительные узоры из символов Unicode

Поэтому, я попытался поместить их в круг:

Дополнительные узоры из символов Unicode

.first-level { /* Разделяем круг на много сегментов. */ transform: rotate( calc(360deg / var(--slice) * var(--n)) );
} 

Внезапно я понял, что этот метод можно использовать и для создания фоновых узоров. Результаты получился довольно красивый.

Дополнительные узоры из символов Unicode

Узор с использованием \003e

sub:after, sup:after { content: '\003e';
} 

Интересно, что изменение одного символа может привести к совершенно другим результатам.

Дополнительные узоры из символов Unicode

Объединение \002e и \003e для формирования нового узора

Дополнительные узоры из символов Unicode

Объединение \25c9 и \2234 создает другой эффект в том же круговом макете

Заключение

Вот все! Цветовые палитры, используемые в этой статье взяты с Color Hunt и Coolors.co. Примеры созданы с помощью css-doodle, за исключением примеров колец в последнем разделе. Все примеры можно найти в этой подборке на CodePen. Надеюсь, вам понравилось, и спасибо за прочтение!

Автор: Yuan Chuan

Источник: https://css-tricks.com/

Редакция: Команда webformyself.