Меню

Как определить градиент цвета



Больше цвета! Гид по градиентам для начинающих

Плоский дизайн, или Flat дизайн, теперь выглядит скучно. Вместо минимализма хочется добавить немного красивых переходов, сделать дизайн объемнее. Вновь появляется градиент в оформлении известных брендов: Google, Instagram, Apple.

Марк Гринберг, специалист по UX в компании Resumes Planet , объясняет: «В отличие от плоского дизайна градиенты предлагают большой выбор возможностей для импровизации. Градиент – это якорь современного веб-дизайна».

Многие думают, что работать с градиентом можно только в фотошопе. Но это не так! В статье вы узнаете, как в редакторе Canva в режиме онлайн можно сделать красивый переход оттенков и как наложить градиент на фото за несколько кликов.

Что такое градиент

Градиент – это плавный переход от одного цвета к другому. Сочетание цветов позволяет создать новый оттенок и сделать красивый переход, добавляя глубины объекту или фону. Океан возможностей для творчества!

Не бойтесь добавлять градиент при оформлении постов для Инстаграм. В Canva есть готовые шаблоны, на которых вам остается только изменить текст и картинку.

Виды градиентов

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

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

Учтите, что линейный градиент рекомендуется использовать только для квадратных или многоугольных областей, а радиальный – для круглых. Кстати, логотип Instagram создан с использованием радиального градиента.

Как сделать красивый дизайн с градиентом

В 2020 году градиент можно найти повсюду: в брендинге, иллюстрациях, типографике, оформлении упаковки и т. д. Начните обращать внимание и заметите эту тенденцию! Итак, делимся идеями, как легко сделать крутой дизайн с градиентом в редакторе Canva.

1. Правильно выбирайте цвета для градиента

Чтобы дизайн с градиентом выглядел хорошо продуманным, нужно правильно подобрать оттенки с помощью цветового круга. Лучше всего смотрятся монохроматические и комплементарные комбинации. Подробнее можете прочитать в нашей статье «Цветовой круг: инструкция для дизайнера» .

Если коротко, то лучше всего выбирать цвета, которые ближе друг к другу на цветовом круге. Например, градиент из фиолетового и зеленого будет выглядеть «грязным». Посмотрите на пример!

Источник: UX Planet

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

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

Если ваша цель – что-то продать или привлечь внимание, выбирайте смелые сочетания. Можете использовать готовые шаблоны Canva для социальных сетей.

Источник

Градиенты в CSS

Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах.

Читайте также:  Горшок для цветов с автополивом как работает

В CSS существует два типа градиентов:

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

Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.

linear-gradient

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

  • определить желаемые цвета;
  • где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
  • в каком направлении должен идти градиент.

Давайте начнём с простого градиента из двух цветов:

  • направление вертикальное, сверху вниз;
  • первый цвет в начале (вверху);
  • второй цвет в конце (внизу).

Изменение направления

Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:

  • определить назначение градиента, с помощью таких ключевых слов, как to left top ;
  • определить конкретный угол в градусах, вроде 45deg .

Это направление должно быть установлено перед цветом:

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

  • 0deg — снизу вверх;
  • 20deg — немного по диагонали, идущей по часовой стрелке;
  • 90deg — подобно 15 часам, слева направо;
  • 180deg — это значение по умолчанию, сверху вниз.

Добавление большего количества цветов

Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:

  • два цвета: 0% и 100%
  • три цвета: 0%, 50% и 100%
  • четыре цвета: 0%, 33%, 67% и 100%

Определение конкретных точек цвета

Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета, используя либо проценты (%), либо пиксели (px):

В данных параметрах:

  • у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
  • цвет grey ближе к верху, на 10% вместо 50%;
  • цвет yellow занимает половину градиента, от 50% и до конца 100%.

radial-gradient

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

  • форму: круг или эллипс;
  • начальную точку: которая будет центром круга или эллипса;
  • конечную точку: где будет край круга или эллипса.
  • градиент является эллипсом;
  • первый цвет начинается в центре;
  • последний цвет заканчивается в самом дальнем углу.

Начальная позиция

Начальная позиция работает как background-position. Вы можете установить её через ключевое слово at .

Конечная позиция

По умолчанию форма завершается в самом дальнем углу. Вы можете выбрать:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

Разница одновременно трудна для понимания и представления, поэтому я не буду вдаваться в подробности. У Mozilla есть хорошее описание различных значений.

Фиксированный размер

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

Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.

Примеры на этой странице умышленно сделаны «некрасивыми», с ярко выраженными различиями цветов, чтобы лучше объяснить, как работает каждое свойство.

Но довольно легко писать едва уловимые градиенты, особенно для кнопок:

Источник

Несколько слов о градиентах

Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.

Читайте также:  Какая температура желтого цвета

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

Что такое градиент?

Давайте, для галочки, вспомним, что такое градиент.

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении

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

Форма записи градиентов в css

Давайте коротко рассмотрим, из чего же состоит классический градиент.

Градиент может быть записан двумя способами:

background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);

Какую форму записи использовать — решать вам.

В коде, приведенном выше, мы указали три значения свойств background:

  • 1. То, каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
  • 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ], где угол измеряется в deg, то есть — градус, или вторым способом — указанием позиции от и до. Например, to top, to right, to bottom left и т.д.
  • Значение цвета #******, которым будет начинаться и заканчиваться градиент.

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

Написание цвета градиентов

Цвет градиента может быть записан любым доступным обозначением:

  • Hex Color Code — #000000 или сокращением #000;
  • RGB Color Code — rgb(0, 0, 0);
  • Color Name — black;
  • HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

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

Градиенты с изображениями

Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background. Давайте рассмотрим на двух примерах:

В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).

Градиент для текста

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

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

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode

Совсем недавно появились еще три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:

  • background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
  • mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
  • isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.

Давайте немного поговорим о первом.

Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели — паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background <
background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
>


И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.
.plaid-background <
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50%
), white;
background-blend-mode: multiply;
background-size: 100px 100px;
>

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:
.circles-background <
background:
radial-gradient(
khaki 40px,
transparent 0,
transparent 100%
),
radial-gradient(
skyblue 40px,
transparent 0,
transparent 100%
),
radial-gradient(
pink 40px,
transparent 0,
transparent 100%
), snow;
background-blend-mode: multiply;
background-size: 100px 100px;
background-position: 0 0, 33px 33px, -33px -33px;
>

Результат превосходит все ожидания,

Эффект ночного видения

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

Возьмем обычное изображение

и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient
.night-vision-effect <
background:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radial-gradient(
rgba(0,255,0,.8),
black
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
background-blend-mode: overlay;
background-size: cover;
>

И вот результат.

Сайты-генераторы градиентов

Ниже я приведу подборку сайтов, позволяющих генерировать те самые градиенты, делать из них canvas, png и svg форматы и копировать код для установки в ваши проекты.

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

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Источник