CSS Whimsy — Создание искусства с помощью CSS

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

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

расположение по центру

Все советы в этой статье будут вращаться вокруг этого макета и принадлежат к категории советов.

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

<div class="g-container">
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
</div>

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
}
.g-box {
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

Используйте абсолютное позиционирование иmargin, сложите все элементы по горизонтали и вертикали по центру (потому что это будет использоваться позжеtransform, поэтому выбран этот метод горизонтального и вертикального центрирования), и результаты следующие:

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

изменить размер элемента

Самое простое, что мы можем изменить размер элемента.

Код CSS слишком утомителен для написания, поэтому мы просто используемpugМеханизм шаблонов HTML и SASS.

div.g-container
    -for(var i=0; i<10; i++)
        div.g-box

$count: 10;
@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
        --width: #{$i * 30}px;
        width: var(--width);
        height: var(--width);
        margin-left: calc(var(--width) / -2);
        margin-top: calc(var(--width) / -2);
    }
}

Контейнер содержит 10 подэлементов, и размер каждого подэлемента постепенно увеличивается, легко получить следующие результаты:

изменить цвет элемента

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

@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
         ...
         border-color: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
    }
}

чтобы получить этот эффект:

также можно изменить фонbackgroundцвет:

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ...
        background: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
        z-index: #{$count - $i};
    }
}

изменить угол элемента

Хорошо, далее мы можем начать менять угол, мы используемtransform, чтобы повернуть элемент на разные углы:

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ....
        transform: rotate(#{$i * 7}deg);
    }
}

Эффект следующий:

CodePen Demo -- CSS Pattern

Хорошо, здесь основные понятия почти введены. Одним словом, используйте многоэлементную центрированную компоновку, изменяйте размер, цвет, прозрачность, угол, тень, фильтр, режим наложения и т. д. элементов и т. д., пока вы можете думать об этом Да, вы можете.

Далее мы представляем еще одного главного героя этой статьи — CSS-doodle.

CSS-doodleпредставляет собой библиотеку на основе веб-компонентов. Позволяет нам быстро создавать страницы на основе макета CSS Grid для достижения различных эффектов CSS (может называться искусством CSS).

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

Используйте CSS-doole для создания многоэлементной горизонтальной и вертикальной разметки по центру.

Мы будем использовать CSS-doodle, чтобы снова реализовать вышеуказанный макет.Чтобы добиться выравнивания по центру 50 элементов, нам нужно только следующее простое объявление:

<css-doodle>
	:doodle {
		@grid: 1x50 / 100vmin;
	}
	@place-cell: center;
</css-doodle>

Вышеизложенное означает, что100vmin x 100vminПод размером контейнера объявите макет сетки 1x50, используя@place-cell: centerОтцентрируйте их все по горизонтали и вертикали, что означает, что они будут располагаться друг над другом.

Это может не дать эффекта, давайте установим разные размеры для каждого элемента и добавим простойborder:

<css-doodle>
	:doodle {
		@grid: 1x50 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 2%);
	border: 1px solid #000;
</css-doodle>

@size: calc(100% - @calc(@index() - 1) * 2%)Указывает ширину и высоту каждого дочернего элемента (также можно задать высоту и ширину отдельно),@indexЭто переменная, которая представляет порядковый номер текущего элемента от 1 до 50, указывающий, что каждый элемент составляет 2% высоты и ширины контейнера, 4% высоты и ширины до 100% высоты и ширины.
border: 1px solid #000Это обычный код CSS, в нем нет переменных, он действует на каждый элемент.

Эффект следующий:

О нет, глаза начинают цвести. Таким образом, мы можем быстро реализовать графические эффекты, созданные HTML-кодом и громоздким CSS в предыдущем предзнаменовании.

CSS искусство

Далее начинается красивое искусство CSS.

Изменить элементы угла вращения и цвет границы

Мы используем приведенный выше код, чтобы продолжить.Для лучшего эффекта отображения сначала измените цвет фона всего контейнера на черный, а затем измените угол поворота элемента. Поверните каждый элемент30deg x @index.

Код очень короткий, наверное, такой:

<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	transform: rotate(calc(@index() * 30deg));
	border: 1px solid #fff;
</css-doodle>

Тогда это выглядит не очень хорошо, мы пытаемся дать каждому элементу постепенно устанавливать разныеborderцвет, а непрозрачность прозрачности постепенно уменьшается, здесь мы будем использоватьhslaОбозначение цвета:

<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	transform: rotate(calc(@index() * 30deg));
	border: 1px solid hsla(
		calc(calc(100 - @index()) * 2.55), 
		calc(@index() * 1%), 
		50%,
		calc(@index() / 100)
	);
</css-doodle>

Посмотрите на эффект снова:

Все текстуры имеют определенную разницу в цвете, вы можете нажать на демо, чтобы увидеть ~

Вау, появилась первая работа, которая выглядит довольно неплохо.

Конечно, каждый другой угол может производить разные эффекты.С помощью CSS-doodle вы можете быстро генерировать разные случайные значения и случайным образом создавать разные эффекты. Мы немного изменим приведенный выше код наtransformИзмените эту строку, чтобы ввести случайное значение:

<css-doodle>
	:doodle {
		--rotate: @r(0, 360)deg;
	}
	transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>

использовать@r(0, 360)deg, который может случайным образом генерировать случайное число от 0 до 360 и может непосредственно следовать за единицей, которая становится случайным значением угла
transform: rotate(calc(@index() * var(--rotate))),использоватьcalcПравила вводят случайно генерируемые CSS-переменные, естественно, это значение фиксируется каждый раз без перезагрузки страницы.

Таким образом, каждый раз, когда мы обновляем страницу, мы можем получать различные эффекты (разумеется, CSS-дудл был оптимизирован, добавлено всего несколько строк кода для обновления эффекта при нажатии на страницу), эффект после преобразования , каждый раз, когда мы нажимаем, можно получить новый эффект:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Настоятельно рекомендуется нажать на Демо и почувствовать его щелчком мыши :)

соотношение цветов фона отличается

Хорошо, давайте снова передумаем, на этот раз мы не изменимсяborder, но управляйте элементами с нечетными и четными номерами с помощью селекторов, задавая им разные цвета фона:

<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	transform: rotate(calc(@index() * 60deg));

	background: rgba(0, 0, 0, calc((@index * 0.01)));
	@even {
		background: rgba(255, 255, 255, calc((@index * 0.01)));
	}
</css-doodle>

использовать@even {}Вы можете быстро выбрать элементы с четными номерами, а затем назначить им белый фон, а элементам с нечетными номерами — черный фон, чтобы увидеть эффект:

Все та же идея, мы можем присвоить случайные значенияtransformУгол поворота , используйте черно-белую суперпозицию, чтобы увидеть, какой эффект он будет иметь под разными углами:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

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

CSS-doodle поддерживает несколько способов импорта, отображая несколько рисунков на одной странице, конечно, вот так:

CodePen Demo -- CSS-doodle Pure CSS Pattern

Краткое изложение закона

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

В этом случае, некоторые возможные идеи:

Каково было бы использовать только односторонние границы?
Все появляющиеся границыsolidЕсли бы это было разбитоdashedШерстяная ткань? может добавитьborder-radius
text-decorationОн также поддерживает некоторые виды символов подчеркивания, мы также можем использовать их, чтобы попробовать

Хорошо, применив приведенные выше идеи на практике, мы можем получить любую графику, нарисованную всеми видами линий. Они могут выглядеть так:

Конечно, каждый эффект может быть случайным, если мы разумно используем случайные параметры, вы можете попробовать следующее демо:

CodePen Demo -- CSS-doodle Pure CSS Pattern

`Clip-path`а также`drop-shadow`

Эй, когда дело доходит до создания различных линий и узоров, есть еще две интересные вещи в CSS — свойства.Clip-pathа такжеfitler: drop-shadow().

Ага? Что это значит. Возьмем простую демонстрацию, используяClip-path, мы можем вырезать различные формы элементов. Например, чтобы реализовать простой многоугольник:

div {
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    background: #333;
}

Эффект следующий:

Итак, используя эту идею, мы можем попробовать использоватьclip-pathВырежьте различные формы для наложения.

существуетCSS-doodle Shapes, у нас есть много встроенной графики клип-путей на выбор:

Выбираем случайным образом:

Применяя приведенные выше правила, попробуйте реализовать граф:

<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	background: hsla(
		calc(calc(100 - @index()) * 2.55), 
		calc(@index() * 1%), 
		65%,
		calc(@index() / 100)
	);
	clip-path: @shape(
		fill-rule: evenodd;
		split: 200;
		scale: .45;
		x: cos(2t) + cos(π - 5t);
		y: sin(2t) + sin(π - 5t);
	);
</css-doodle>

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

CodePen Demo -- CSS Doodle - CSS Magic Pattern

`Clip-path`а также`drop-shadow`создавать разные линии

ОК, вышеизложенное использоватьClip-pathСоздавали разные узоры, как получаются разные линии?

Не волнуйтесь. Это требует, чтобы мы запросили другой атрибутdrop-shadow,использоватьdrop-shadow,Может датьClip-pathОбрезанная графика создает разные тени.Конечно, есть некоторые конструктивные ограничения.Примерный псевдокод такой:

div {
    position: relative;
    width: 300px;
    height: 300px;
    filter: drop-shadow(0px 0px 1px black);

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        background: #fff;
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
}

мы должныfilter: drop-shadow(0px 0px 2px black)использовалclip-pathО родительском элементе элемента и использованииclip-path:элементы должны иметьbackgroundчтобы добавить эффект тени к обтравочному элементу.

Приведенный выше код выглядит следующим образом:

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

CodePen Demo -- CSS-doodle Pure CSS Pattern - clip-path - drop-shadow

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

Наконец, давайте поблагодарим автора CSS-дудла,Юань ЧуанРаботы г-на Юаня с использованием вышеуказанных техник:

CodePen Demo -- css doodle art

наконец

Это конец этой статьи, надеюсь, она вам поможет :), если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

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

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

расположение по центру

изменить размер элемента

изменить цвет элемента

изменить угол элемента

Используйте CSS-doole для создания многоэлементной горизонтальной и вертикальной разметки по центру.

CSS искусство

Изменить элементы угла вращения и цвет границы

соотношение цветов фона отличается

Краткое изложение закона

Clip-pathа такжеdrop-shadow

Clip-pathа такжеdrop-shadowсоздавать разные линии

наконец

`Clip-path`а также`drop-shadow`

`Clip-path`а также`drop-shadow`создавать разные линии