Рисование пользовательских шаблонов в CSS с помощью веб-компонента CSS-Doodle

С таким именем, как CSS Doodle вы можете не знать, чего ожидать.

Но это действительно классный веб-компонент, который позволяет создавать довольно интересные вещи. Он работает на теневой DOM и позволяет настраивать различные формы, фигуры и узоры с помощью CSS.

Это также работает с 2D-преобразованиями, которые при правильном использовании являются очень мощными свойствами CSS3. Это делает CSS Doodle одним из самых крутых и эстетичных веб-компонентов в Интернете.

Для начала просто добавьте основной сценарий в заголовок вашей страницы. На веб-сайте CSS Doodle также есть инструкции, которые помогут вам начать работу.

У него довольно сумасшедший синтаксис, который вы найдете ниже на главной странице.

Это зависит от различных настраиваемых селекторов, определенных в файле JS. Поэтому, когда вы пишете код CSS Doodle, он анализируется с помощью JavaScript, хотя вам не нужно знать какой-либо JS самостоятельно.

Вот образец фрагмента с главной страницы, демонстрирующий простой CSS Doodle.

: doodle {@grid: 11 / 100vmax; фон: # 0a0c27; } –n: calc (@abs (@abs (@row () – 6) + @abs (@col () – 6) – 11) / 11); маржа: -10%; преобразовать: повернуть (45 градусов); граница: сплошная 1px; цвет границы: hsla (calc (var (- n) * 360 + 120), 60%, 68%, var (- n));

Вы можете создавать свои паттерны с помощью сеток, настраиваемых панелей внутри сетки или с произвольными настройками. Кроме того, в нем есть множество готовых форм, которые вы можете добавить в свои геометрические конструкции.

Все это очень легко редактировать, и это действительно интересно.

Проверить этот пример от CodePen только для одной базовой демонстрации:

Если вы хотите увидеть больше, есть вся коллекция на CodePen для просмотра.

Или вы можете покопаться в основное репозиторий GitHub если вам интересно узнать о различных настройках, селекторах или стилях анимации.

Возможно, это не самый практичный веб-компонент, но с этой библиотекой приятно работать.