Как рисовать фигуры в css

Octagon

CSS

#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon:before {
content: «»;
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

#octagon:after {
content: «»;
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

#octagon { width100px; height100px; backgroundred; positionrelative; }   #octagon:before { content»»; positionabsolute; top; left; border-bottom29pxsolidred; border-left29pxsolid#eee; border-right29pxsolid#eee; width42px; height; }   #octagon:after { content»»; positionabsolute; bottom; left; border-top29pxsolidred; border-left29pxsolid#eee; border-right29pxsolid#eee; width42px; height; }

Смягчение градиентов

При построении градиентов иногда возникает проблема слишком резких и заметных переходов, а ведь вся суть градиента в плавности. Такие градиенты надо смягчать, по-английски это называется Easing Gradients.

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

Изображение: rocknwool / Unsplash / Александр Кароза

Решить проблему жёстких переходов можно, добавив промежуточные точки в градиент, а также сместив точки градиента в более подходящее место.

Изображение: Skillbox Media

Однако этот метод очень неудобный и долгий. К счастью, в Figma есть плагин Easing Gradients, который позволяет смягчать градиенты автоматически. После его установки нужно выделить фигуру и запустить плагин. В появившемся окне выберите Curve и Easy In Out, после чего нажмите Apply. Если вариант Easy In Out не устраивает, то в окне плагина можно менять настройки.

Изображение: Skillbox Media

Если же необходимо смягчить градиент быстро, то существует второй плагин с похожим названием Easing Gradient, только без s на конце. После установки выделите фигуру и запустите плагин. Поскольку он не открывает окно, то получается быстрее, однако этот быстрый метод работает на градиентах только с двумя цветами.

Также для смягчения градиентов с дальнейшим экспортом в CSS используют веб-ресурс Easing Gradients, где в простом редакторе можно смягчить двухцветный градиент.

Что такое Canvas?

Canvas — API для двумерного рисования. По сути браузер даёт вам прямоугольную область на экране, в которой вы можете рисовать линии, фигуры, изображения, текст, практически всё что хотите. Canvas первоначально был создан Apple для их виджетов, но с тех пор был принят всеми разработчиками основных браузеров и теперь Canvas является частью спецификации HTML5. Вот небольшой пример, как выглядит некоторый код Canvas:

Простой красный прямоугольник

Данный прямоугольник нарисован функцией context.fillRect().

Важно понимать, что Canvas предназначен для рисования пикселями. В нём нет фигур или векторов

Нет объектов для связывания с обработчиками событий. Это просто рисунки пикселями на экране. Как мы ещё увидим в этом и сила и слабость.

Основы canvas: рисование прямоугольников

Пример типичного использования canvas:

1 — добавить элемент <canvas> на страницу HTML:

<canvas id="myCanvas" width="300" height="225">
    Резервный контент, который будет отображаться в случае, если веб-браузер
    не  поддерживает тег canvas или в случае, когда JS сценарии
    отключены.
</canvas>

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

Обычно вы ничего не должны видеть в результате; по умолчанию полотна являются «прозрачными».

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

Три строки CSS создадут рамку вокруг холста с черным id = «myCanvas» шириной 1 пиксель:

Код CSS:

<style>
    #myCanvas {
        border:1px solid black;
    }
</style>

2 — Выберите элемент <canvas> для использования из JavaScript

У нас может быть более одного <canvas> на одной странице, и холсты будут работать с JavaScript, как и другие элементы в DOM.

Например при помощи document.getElementById() :

var canvas = document.getElementById("myCanvas");

… или с методом querySelector (), представленным в HTML5, который является более современным методом и использует синтаксис селектора CSS для выбора элементов:

var canvas = document . querySelector ( "#myCanvas" );

3 — получить «2D-контекст», связанный с холстом, необходимый для рисования и настройки свойств чертежа (цвет и т. д.)

Как только у нас есть указатель на <canvas> , мы можем получить «контекст».

Этот конкретный объект является ядром JavaScript API Canvas.

Он предоставляет методы для рисования, например, fillRect (x, y, width, height)  , который рисует закрашенный прямоугольник, и свойства для установки цвета, теней, градиентов и т. д.

Получение контекста (сделать это только один раз):

var ctx = canvas . getContext ( '2d' );

4-укажите некоторые свойства рисунка (необязательно):   

Установите цвет для рисования заполненных фигур:

ctx . fillStyle = 'red' ;

5-нарисуйте заполненный прямоугольник (можно нарисовать несколько фигур):

ctx . fillRect ( 0 , 0 , 80 , 100 );

Получим такой результат:

Вот так будет выглядеть код страницы HTML:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myCanvas {
            border: 1px solid black;
         }
      </style>
      <title>Canvas</title>
      <meta charset="utf-8"/>
      <script>
         var canvas, ctx;
         function init() {
// Эта функция вызывается после загрузки страницы
// 1 - Получить холст
         canvas = document.getElementById('myCanvas');
// 2 - получить context
         ctx=canvas.getContext('2d');
// 3 - теперь можем рисовать draw
         drawSomething();
      }
      function drawSomething() {
// рисуем красный прямоугольник
         ctx.fillStyle='#FF0000';
         ctx.fillRect(0,0,80,100);
      }
      </script>
   </head>
   <body onload="init();">
     <canvas id="myCanvas" width="200" height="200">
      Ваш браузер не поддерживает тег canvas.
     </canvas>
   </body>
</html>

Доступ к элементам только тогда, когда DOM готов:

Обратите внимание, что мы написали функцию «init» (строка 13), которая вызывается только тогда, когда страница полностью загружена (мы говорим «когда DOM готов»). Есть несколько способов сделать это. В этом примере мы использовали метод  в строке 29. Хорошей практикой является наличие такой функции, поскольку мы не можем получить доступ к элементам страницы до полной загрузки страницы и до готовности DOM

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

Другой способ — поместить код JavaScript в конец документа (между <script> … </ script> ), прямо перед </ body> . В этом случае, когда код JavaScript выполняется, DOM уже создан.

Л

Линейный рисунок

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

Линия горизонта

Линия горизонта – это линия, проходящая через страницу или холст, которая представляет уровень глаз зрителя или показывает, где небо встречается с землей.

Лессировка

Лессировка – это прием в живописи, который подразумевает нанесение прозрачного слоя краски поверх уже нанесенных высохших красок. Мы рассказали подробно об этой технике здесь.

Сложные фигуры на CSS:

Теперь перейдём к более сложным фигурам, я покажу как сделать звёзды, многоугольники и сердечко.

Звезда (6-конечная):

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

#star-six { width; height; border-left50pxsolidtransparent; border-right50pxsolidtransparent; border-bottom100pxsolidred; positionrelative; }   #star-six:after { width; height; border-left50pxsolidtransparent; border-right50pxsolidtransparent; border-top100pxsolidred; positionabsolute; content»»; top30px; left-50px; }

Звезда (5-конечная):

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

#star-five { margin50px; positionrelative; displayblock; colorred; width0px; height0px; border-right100pxsolidtransparent; border-bottom70pxsolidred; border-left100pxsolidtransparent; -moz-transformrotate(35deg); -webkit-transformrotate(35deg); -ms-transformrotate(35deg); -o-transformrotate(35deg); } #star-five:before { border-bottom80pxsolidred; border-left30pxsolidtransparent; border-right30pxsolidtransparent; positionabsolute; height; width; top-45px; left-65px; displayblock; content»; -webkit-transformrotate(-35deg); -moz-transformrotate(-35deg); -ms-transformrotate(-35deg); -o-transformrotate(-35deg); } #star-five:after { positionabsolute; displayblock; colorred; top3px; left-105px; width0px; height0px; border-right100pxsolidtransparent; border-bottom70pxsolidred; border-left100pxsolidtransparent; -webkit-transformrotate(-70deg); -moz-transformrotate(-70deg); -ms-transformrotate(-70deg); -o-transformrotate(-70deg); content»; }

Пятиугольник:

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#pentagon { positionrelative; width54px; border-width50px18px; border-stylesolid; border-colorredtransparent; } #pentagon:before { content»»; positionabsolute; height; width; top-85px; left-18px; border-width45px35px; border-stylesolid; border-colortransparenttransparentred; }

Шестиугольник:

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

#hexagon { width100px; height55px; backgroundred; positionrelative; } #hexagon:before { content»»; positionabsolute; top-25px; left; width; height; border-left50pxsolidtransparent; border-right50pxsolidtransparent; border-bottom25pxsolidred; } #hexagon:after { content»»; positionabsolute; bottom-25px; left; width; height; border-left50pxsolidtransparent; border-right50pxsolidtransparent; border-top25pxsolidred; }

Восьмиугольник:

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

#octagon { width100px; height100px; backgroundred; positionrelative; } #octagon:before { content»»; positionabsolute; top; left; border-bottom29pxsolidred; border-left29pxsolid#eee; border-right29pxsolid#eee; width42px; height; } #octagon:after { content»»; positionabsolute; bottom; left; border-top29pxsolidred; border-left29pxsolid#eee; border-right29pxsolid#eee; width42px; height; }

Сердечко:

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

#heart { positionrelative; width100px; height90px; } #heart:before, #heart:after { positionabsolute; content»»; left50px; top; width50px; height80px; backgroundred; -moz-border-radius50px50px; border-radius50px50px; -webkit-transformrotate(-45deg); -moz-transformrotate(-45deg); -ms-transformrotate(-45deg); -o-transformrotate(-45deg); transformrotate(-45deg); -webkit-transform-origin100%; -moz-transform-origin100%; -ms-transform-origin100%; -o-transform-origin100%; transform-origin100%; } #heart:after { left; -webkit-transformrotate(45deg); -moz-transformrotate(45deg); -ms-transformrotate(45deg); -o-transformrotate(45deg); transformrotate(45deg); -webkit-transform-origin100%100%; -moz-transform-origin100%100%; -ms-transform-origin100%100%; -o-transform-origin100%100%; transform-origin100%100%; }

Вращающийся куб HTML / CSS

Анимировать куб еще проще. Для этого потребуется создать один ключевой кадр с промежуточным значением. Проще говоря, наш 3D-объект из своего исходного значения будет плавно переходить к промежуточному кадру и вновь возвращаться в свое исходное положение:

@keyframes rotation {
    50% {transform:perspective(700px) rotateX(360deg) rotateY(720deg);}
}

Затем, в класс .cube нужно добавить свойство анимации с указанием объявленных ключевых кадров:

Здесь длительность анимации 30 секунд, а функция времени установлена соответственно плавному началу и концу анимации. Используется бесконечное повторение.

Если вы хотите, чтобы анимация куба длилась без замедления и непрерывно, то нужно вместо промежуточного установить конечный ключевой кадр отличный от начального на n * угол полного оборота. То есть, например, если начальный угол по оси Y установлен равным -27° , то конечный ключевой кадр должен содержать угол равный -27° + 360° * n, где n, как вы уже догадались — количество оборотов. Кроме этого, понадобиться сменить временную функцию с ease-in-out на linear.

Градиенты

Canvas может заливать фигуры градиентом вместо цвета. Вот линейный градиент:

000

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

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

000

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

Вот и все основы рисования. Давайте остановимся на достигнутом и выполним несколько упражнений в следующей главе. У вас уже должен быть установлен браузер и текстовый редактор. Я рекомендую использовать Chrome, поскольку он содержит хорошие инструменты отладки и jEdit, потому что он бесплатный и кросс-платформенный. Но вы можете использовать браузер и редактор по своему усмотрению.

Canvas

П

Пастель

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

Пейзаж

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

Передний план

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

Перспектива

Перспектива – это техника создания иллюзии трех измерений на двухмерной поверхности. Важнейший метод создания реалистичных рисунков.

Пигмент

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

Плоскость

Плоскость – это плоская поверхность внутри картины, изображения или скульптуры. Термин также используется для обозначения плоской поверхности, на которой создается изображение.

Портрет

Портрет – это произведение искусства, где в центре внимания находятся черты лица субъекта. Также существует термин «Портретная ориентация» для обозначения вертикального расположения холста или бумаги для рисования. С помощью этих простых советов вы научитесь рисовать лицо.

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

<style type="text/css">

    #outerspace {
        position: relative;
        height: 400px;
        background: #0c0440 url(/images/outerspace.jpg);
    }
    div.rocket {
        position: absolute;
        bottom: 10px;
        left: 20px;
        -webkit-transition: all 3s ease-in;
        -moz-transition: all 3s ease-in;
        -o-transition: all 3s ease-in;
        -ms-transition: all 3s ease-in;
        transition: all 3s ease-in;
    }
    div.rocket img {
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }
    #outerspace:hover div.rocket {
        -webkit-transform: translate(540px,-200px);
        -moz-transform: translate(540px,-200px);
        -o-transform: translate(540px,-200px);
        -ms-transform: translate(540px,-200px);
        transition: all 2s ease-in-out;
    }
    #outerspace:hover div.rocket img {
        -webkit-transform: rotate(70deg);
        -moz-transform: rotate(70deg);
        -o-transform: rotate(70deg);
        -ms-transform: rotate(70deg);
        transform: rotate(70deg);
    }

</style>

Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.

Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!

.rocket
#outerspace

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

Space Invader

CSS

#space-invader{

box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;

background: red;
width: 1em;
height: 1em;
overflow: hidden;

margin: 50px 0 70px 65px;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

#space-invader{ box-shadow 1emred, 1em1emred, -2.5em1.5em.5emred, 2.5em1.5em.5emred, -3em-3emred, 3em-3emred, -2em-2emred, 2em-2emred, -3em-1emred, -2em-1emred, 2em-1emred, 3em-1emred, -4emred, -3emred, 3emred, 4emred, -5em1emred, -4em1emred, 4em1emred, 5em1emred, -5em2emred, 5em2emred, -5em3emred, -3em3emred, 3em3emred, 5em3emred, -2em4emred, -1em4emred, 1em4emred, 2em4emred; backgroundred; width1em; height1em; overflowhidden; margin50px70px65px; }

Блок в виде круга и овала

Текст

Делается аналогично квадрату и прямоугольнику, только добавляется ещё CSS свойство border-radius.

HTML:

PHP

<div class=»circle-block»>Текст</div>

1	<div class=»circle-block»>Текст<div>

CSS:

PHP

.circle-block {
width:70px; /*ширина*/
height:70px; /*высота*/
background:#2F73B6; /*фоновый цвет*/
color:#fff; /*цвет шрифта*/
text-align:center; /*выравнивание текста по центру*/
text-transform:uppercase; /*написание текста заглавными буквами*/
line-height:70px; /*высота строки текста*/
border-radius:100%; /*радиус скругления углов*/
}

1 2 3 4 5 6 7 8 9 10 11

.circle-block{ width70px;/*ширина*/ height70px;/*высота*/ background#2F73B6; /*фоновый цвет*/ color#fff; /*цвет шрифта*/ text-aligncenter;/*выравнивание текста по центру*/ text-transformuppercase;/*написание текста заглавными буквами*/ line-height70px;/*высота строки текста*/ border-radius100%;/*радиус скругления углов*/   }

Сохраняйте жёсткую структуру ваших стилейСкопировать ссылку

Это приводит нас к структуре. Старайтесь избегать плоской DOM-структуры для вашей иллюстрации. Сохранение вещей атомарными позволяет проще двигать части вашей иллюстрации. А ещё так гораздо проще показывать или прятать части иллюстрации или даже потом анимировать их. Рассмотрим демо CSS Snorlax. Руки, ноги, голова и прочие части являются отдельными элементами. Это сделало анимирование руки гораздо проще, чем если бы я пытался держать всё вместе, так как я смог просто применить анимацию к классу .

Вот ускоренная запись того, как я делал это демо:

Попытался собрать таймлапс создания CSS Snorlax, которого мы делали вчера ночью. Забавно пересматривать! @jh3yy

Эллипс

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

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

Разница между и состоит в том, что эллипс имеет два радиуса — rx и ry, или же радиус по оси x и радиус по оси y. Значит, представленный выше пример можно также записать так:

Параметры расположения для кругов и эллипсов одинаковы. Радиус — это не только единица измерения. Он также может включать опции и .

относится к длине от центра до ближайшей стороны «коробки ссылок». А , наоборот, относится к расстоянию от центра до наиболее удаленной стороны «коробки ссылок». Это значит, что данные два значения никак не влияют на расположение, если не установлена позиция не по умолчанию.

Ниже продемонстрирована разница при повороте с использованием и для эллипса с 25% смещением от осей X и Y.

Infinity

CSS

#infinity {
position: relative;
width: 212px;
height: 100px;
}

#infinity:before,
#infinity:after {
content: «»;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

#infinity { positionrelative; width212px; height100px; }   #infinity:before, #infinity:after { content»»; positionabsolute; top; left; width60px; height60px; border20pxsolidred; -moz-border-radius50px50px50px; border-radius50px50px50px; -webkit-transformrotate(-45deg); -moz-transformrotate(-45deg); -ms-transformrotate(-45deg); -o-transformrotate(-45deg); transformrotate(-45deg); }   #infinity:after { leftauto; right; -moz-border-radius50px50px50px; border-radius50px50px50px; -webkit-transformrotate(45deg); -moz-transformrotate(45deg); -ms-transformrotate(45deg); -o-transformrotate(45deg); transformrotate(45deg); }

Грязные градиенты → чистые градиенты

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

Изображение: Skillbox Media

Убрать ненасыщенную область сероватого оттенка можно несколькими методами.

Промежуточная точка

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

Увеличивать насыщенность можно на глаз, передвигая кружок на цветовом поле. А можно перейти в  и увеличить значение параметра S (Saturation — насыщенность) — это позволит сохранить цветовой тон и яркость без изменений.

Изображение: Skillbox Media

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

По дуге

Когда мы строим градиенты по прямой, линия проходит через ненасыщенную середину, поэтому градиенты лучше строить по дуге.

UI Gradient Generator строит градиенты по дуге автоматически. Сервис сам сделает плавный цветовой переход, обойдя ненасыщенную середину круга RGB.

Изображение: сайт learnui.design

Для более качественного градиента переключите параметр Easing (смягчение градиента) на In/Out, а Precision (количество промежуточных точек градиента) выберите максимально возможный. Далее градиент можно перенести в Figma вручную, копируя каждый цвет, либо скачать SVG-файл с градиентом через кнопку Export as SVG. Этот векторный файл нужно перетащить мышью в графический редактор. Если свойство градиента требуется перенести на другой объект, то выделите в Figma объект с градиентом, в свойстве Fill выделите градиент и нажмите Ctrl (⌘) + С. Затем выделите другой объект и нажмите Ctrl (⌘) + V.

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

Скриншот: сайт learnui.design

RGB → LAB

Раз проблема грязных градиентов связана с устройством RGB, то можно воспользоваться альтернативным цветовым пространством . Оно спроектировано с учётом восприятия цветов глазом человека, поэтому градиенты будут не только плавными, но и с понятной логикой перехода цветов.

В Figma градиенты исправляются через плагин Chromatic Figma. Выделите фигуру с градиентом, запустите плагин Chromatic Figma, выберите Fix Gradient и нажмите Apply.

Изображение: Skillbox Media

В качестве альтернативного метода создания градиента в LAB можно воспользоваться инструментом Lch and Lab colour and gradient picker Дэвида Джонстона.

Выберите два цвета, между которыми надо проложить градиент, и введите желаемое количество ступеней. Чем больше ступеней, тем более плавным будет переход.

Скриншот: архив сайта Дэвида Джонстона

Затем перенесите цвета из колонки Lab в редактор.

Изображение: Skillbox Media

В Figma для того, чтобы расставить точки градиента на равном расстоянии, можно использовать плагин Precise Gradients. Сначала расставьте точки на случайном расстоянии, сохранив порядок цветов, затем запустите плагин и нажмите на иконку выравнивания, которая расположена в строке Gradient stops справа.

Как итог

Работа с градиентами требует не только отменного художественного вкуса и знаний колористики, но и серьёзной технической базы.

1. Не ограничивайтесь стандартными инструментами. При работе в Figma используйте плагины:

• Webgradients и uiGradients в качестве набора готовых градиентов;
• Easing Gradients или Easing Gradient для смягчения градиентов;
• Chromatic Figma, чтобы сделать градиенты яркими без серых переходов.

2. Если вы работаете с другим редактором или не хотите устанавливать плагин, то используйте онлайн-сервисы:

• веб-версию плагина WebGradients для выбора красивого готового градиента;
• UI Gradient Generator — он поможет создать чистый градиент, убрав серые оттенки при соединении противоположных цветов;
• Lch and Lab colour and gradient picker для создания чистого градиента по методу Дэвида Джонстона.

3. Не стоит и пытаться создать сетчатый градиент стандартными средствами. Используйте:

• базы готовых градиентов meshgradients.design или products.ls.graphics;
• плагин Mesh Gradient для Figma;
• веб-сервис Mesh.

4. Прокачайте знания по теории цвета, в этом вам помогут наши материалы:

• статья о цветовом круге Иттена;
• подробный гайд по теории цвета Иоханнеса Иттена;
• подборка из девяти лучших книг о цвете;
• большой обзор цветовых пространств.