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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Узор с использованием символов \2f3c — \2f9f. Я тестировал это только на Chrome под Mac. Некоторые из примеров могут выглядеть ужасно на других браузерах / платформах.

Это немного похоже на эффект облака тегов, но с использованием CSS. Таким образом можно создать множество узоров.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Композиция

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

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

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

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

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

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

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

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

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

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

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

Кольца

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Yuan Chuan

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree