Потрясающе! Реализация художественной графики с помощью CSS

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

Вкратце, CSS-doodle — это библиотека, основанная на Web-Component. Она позволяет быстро создавать страницы на основе макетов CSS Grid и предоставляет множество удобных команд и функций (random, loops и т.д.), которые позволяют нам получать различные CSS-эффекты с помощью набора правил. Взгляните на его домашнюю страницу — Home Page of CSS-doodle — и вы сможете быстро приступить к работе всего за 5 минут.

Создание макета по центру

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

Во-первых, нам нужен такой центральный макет. Простая 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-код писать слишком утомительно, поэтому мы просто полагаемся на HTML-шаблон pug и 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>

Это означает, что мы объявляем макет сетки 1×50 под контейнером размером 100vmin x 100vmin и используем @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>

Эффект выглядит следующим образом.

О нет, глаза начинают стекленеть. Таким образом, мы быстро реализовали графический эффект, который был создан с помощью 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-дубля можно быстро генерировать различные случайные значения, случайным образом генерировать различные эффекты. Давайте немного изменим приведенный выше код, изменив строку transform, чтобы ввести случайное значение:

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

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

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.

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

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

CodePen Demo — CSS-doodle Pure CSS Patterns

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 есть очень большое количество встроенных фигур clip-path, из которых мы можем выбирать:

Мы выбираем одну наугад:

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

<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, вы можете создавать различные тени для обрезанных фигур 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-doodle, Yuan Chuan, который использовал вышеупомянутую технику:

CodePen Demo — css doodle art

Наконец-то

Больше замечательных технических статей по CSS собрано на моем Github — iCSS.

И, возможно, вам понравится мой CodePen, в котором собрано большое количество удивительных CSS эффектов.

Ну, вот и все для этой статьи, надеюсь, она вам поможет :).