Css градиентная заливка: Линейный градиент | htmlbook.ru

Анимируем linear-gradient (background-image). | by Mostovoy Nikita

При верстке, периодически необходимо создать фон, который является градиентной заливкой (картинкой или чем-то другим, нужное подчеркнуть).
Такую задачу вполне легко сделать, используя background-image (linear-gradient в случае с градиентной заливкой).

Разберем анимирование background-image в случае работы с кнопками:

Её CSS:

При взаимодействии с кнопкой очень желательно получать “отклик”, например, при наведении (hover) на нее.
Один из способов организовать такой отклик — изменить background, как это сделано в разбираемом примере.

Но у нас есть один недостаток — кнопка меняет свою заливку мгновенно, переход получается слишком резким.

Установить просто transition: background не получится, так как background-image является не анимируемым свойством (www.w3schools.com/cssref/pr_background-image.asp)

Что можно сделать в таком случае, чтобы решить задачу?

Самый простой и бронебойный способ — создаем какой-нибудь элемент рядом (или внутри) с нужным нам, скрываем его, а когда наводим курсор на кнопку — отображаем с анимированием прозрачности.

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

1. Создаем кнопку
2. Задаем кнопке position: relative. Это позволит нам растягивать псевдоэлемент по размеру кнопки. Подход практически аналогичный тому, который я описывал в статье “Селекторы на любой вкус” (https://medium.com/@xnim/%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5-select-%D1%8B-%D0%BD%D0%B0-%D0%BB%D1%8E%D0%B1%D0%BE%D0%B9-%D0%B2%D0%BA%D1%83%D1%81-13c9a2a5bb36)
3. Задаем кнопке:
   — размеры (top:0; left: 0; width: 100%; height: 100%),
   — нужный background-image (для состояния hover)
   — z-index: -1 (чтобы контент псевдоэлемента не скрывал наш текст
   — opacity: 0 + transition: opacity для анимаций
4. Добавляем :hover состояние для кнопки, по которому наш псевдоэлемент будет проявляться.

Полученный результат можно посмотреть на СodePen:

Итоговый CSS:

На CodePen также можно поэкспериментировать с временем анимации 🙂

P.S. Я веду в телеграме небольшой канал, посвященный фронтенд-разработке. Ежедневно публикую тот или иной факт или механику из мира JS. https://t.me/FrontEndReicipes

Границы CSS используя градиент — оформление границы на CSS

Благодаря технологии CSS мы можем создавать сайты и использовать при этом меньше изображений. Я думаю вы прекрасно знаете, что изображения действительно замедляют загрузку сайта. Раньше, чтобы создать границы css в виде перехода одного цвета к другому необходимо было использовать именно изображения. Но в CSS3 есть такое новое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Я подобрал некоторые статьи, в которых вместо изображений можно и нужно использовать свойства CSS3:

Границы CSS — СПОСОБ 1

1) Градиент границы сверху вниз

Живой пример:

В HTML это просто блок:

1

<div></div>

А 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

.  box {  
    margin: 50px auto; /* отступ сверху, снизу и центрирование по горизонтали */
    width: 250px; /* ширина */
    height: 250px; /* высота */
    border-top: 20px solid #3ACFD5; /* размер тип и цвет верхней границы */
    border-bottom: 20px solid #3a4ed5; /* размер тип и цвет нижней границы */
 
    /* свойства width и height включают в себя значения полей и границ, но не отступов */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    background-position: 0 0, 100% 0; /* положение фонового изображения */
    background-repeat: no-repeat; /* запрещаем повторение фонового изображения */
 
    /* размер фонового изображения */
    -webkit-background-size: 20px 100%;
    -moz-background-size: 20px 100%;
    background-size: 20px 100%;
 
    /* само фоновое изображение, где указываем в линейном градиенте что цвет начинает меняться сверху (top) */
    background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}

2) Градиент границы слева направо

Вот как это выглядит на реальной странице:

Как в и прошлый раз HTML очень простой:

1

<div></div>

А 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

. box {  
    margin: 50px auto;
    width: 250px; /* ширина */
    height: 250px; /* высота */
    border-left: 20px solid #3ACFD5; /* размер тип и цвет левой границы */
    border-right: 20px solid #3a4ed5; /* размер тип и цвет правой границы */
 
    /* свойства width и height включают в себя значения полей и границ, но не отступов */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    background-position: 0 0, 100% 0; /* положение фонового изображения */
    background-repeat: no-repeat; /* запрещаем повторение фонового изображения */
 
    /* размер фонового изображения */
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    background-size: 100% 20px;
 
    /* фоновое изображение, где указываем в линейном градиенте что цвет начинает меняться СЛЕВА (left) */
    background-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
}

Границы CSS — СПОСОБ 2

Второй способ заключается в использовании CSS3 свойства border-image, которое нам значительно сократит и упростит код. Скоро вы сами в этом убедитесь.

Браузеры, которые поддерживают данное свойство: Chrome, Internet Explorer 11, Firefox, Safari, и Opera.

Также хочу сразу сказать что данное свойство работает только с «квадратными» блоками. То есть вы не сможете сделать закругленные углы границы с помощью свойства border-radius.

1) Градиент сверху вниз

Как видите, результат такой же (если ваш браузер поддерживает данное свойство):

В HTML также различий нет:

1

<div></div>

А вот CSS даже на глаз стал намного меньше:

1
2
3
4
5
6
7
8
9
10
11
12
13

.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная граница */
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1; /* смещение фона границы */
}

2) Градиент слева направо

Также сделаем градиент границы CSS, где цвет меняется слева направо:

HTML:

1

<div></div>

CSS также значительно меньше, чем в прошлом способе:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

. box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная граница */
    -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%); 
 
    border-image-slice: 1; /* смещение фона границы */
}

3) Диагональный градиент

Еще один интересный способ — диагональное изменение цвета границы:

HTML:

1

<div></div>

CSS код также значительно меньше, чем в прошлом способе:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

. box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная диагональная граница, где мы указали что цвет начинает меняться от левого верхнего (top left) угла */
    -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
 
    border-image-slice: 1; /* смещение фона границы */
}

Вывод

Понравился ли вам этот способ оформления границы? Надеюсь что да! Потому что он экономит «килобайты» при загрузке. Я показал вам не только еще один способ как красиво оформить ваш сайт, но и как сделать его загрузку хоть чуточку быстрее 😉 !

Успехов!

С Уважением, Юрий Немец

Градиентная заливка в CSS3.

Описание

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

Синтаксис

background-color: | transparent | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.

Рис. 1. Применение background-color

Объектная модель

document.getElementById(«elementID «).style.backgroundColor

Браузеры

Internet Explorer до версии 7. 0 включительно не поддерживает значение inherit .

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

В качестве заливки и обводки можно задавать none , цвета , ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none , ключевые слова, цвета, паттерны и градиенты . Значение по умолчанию — black .

fill-rule

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

Возможные значения: nonzero , evenodd

Fill-rule=»nonzero»

Fill-rule=»evenodd»

fill-rule=»nonzero» интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк , смотреть в FF).

stroke

Цвет обводки. Значения по умолчанию нет.

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt , round , square . Значение по умолчанию: butt .

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter , round , bevel . Значение по умолчанию: miter .

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray=»1″ нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

Используя обводку и простые фигуры можно получить удивительные вещи:

Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

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

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Не имейте хороших идей, если не хотите отвечать за них.

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

Компьютер позволяет решать все те проблемы, которые до появления компьютера не существовали.

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

Первая заповедь программиста: не знаешь, что делать, делай что-нибудь.

Программирование — это неестественный процесс.

Если мысли не помещаются в голове, заархивируйте их.

Мы сделали «Яндекс» с простым намерением продемонстрировать наши революционные технологии.

Самый страшный вирус всегда сидит перед компьютером.

Если в вашей процедуре 10 параметров, вероятно, какой-нибудь пропущен.

Умный программист всегда сможет занять компьютер дурной работой.

Моя любимая порода собак — @

В программировании средняя наработка на отказ постоянно уменьшается.

Моя родина там, где мой компьютер.

Подумайте, сколько психических сил потрачено на поиски коренного различия между «алгоритмом» и «программой».

Все, что мы делаем в программировании — это частный случай чего-то более общего, и зачастую мы осознаем это чересчур быстро.

Язык HTML — это здорово, но подозреваю, что вы взяли эту книгу, чтобы изучить PHP.

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

PHP — это маленькое зло, созданное некомпетентными новичками, в то время как Perl — это большое и коварное зло, созданное умелыми, но извращёнными профессионалами.

Прежде чем удалить файл, убедись, что он не твой.

Если называть Python заменой BASIC, то тогда и трансформер Optimus Prime — это только замена грузовика.

Легко сделать что-то переменным. Хитрость в том, чтобы измерять продолжительность постоянства.

Трудное детство… Килобайтные игрушки.

Обработать ошибку легко: Постарайтесь исправить программу. Удачный запуск тоже легко обработать: Вы решили не ту задачу. Постарайтесь исправить и эту ошибку.

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

Программист – это не человек, это просто новая форма жизни.

Глупцы игнорируют сложность. Прагматики терпят ее. Некоторые моугт избегать ее. Гении ее устраняют.

Программирование — это не профессия. Это образ мышления.

Иногда мне кажется, что единственным универсумом в программировании является цикл.

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

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

Если программист в 9-00 утра на работе, значит, он там и ночевал.

Лучше, чтобы в 100 функциях использовалась одна структура данных, чем в 10 функциях — 10 структур.

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

Структурированное программирование потверждает закон исключенного третьего.

Как в фотошопе сделать градиентный фон

Градиент в фотошоп

• выделить область, которую нужно заполнить градиентной заливкой. Если область не выделить, то будет залит весь слой;
• активизировать инструмент Gradient (Градиент) на панели инструментов Photoshop или нажать клавишу «G» на клавиатуре;
• установить нужные параметры градиента на панели настраивания параметров;
• щелкнуть мышью в том месте изображения, где должен начинаться градиент и потом протянуть мышь с нажатой левой кнопкой к конечной точке градиента.

Панель настраивания параметров градиента

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

Рядом с полем Градиентов расположены кнопки:

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

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

Редактор градиентов — это диалоговое окно, в котором задаются настройки градиента Чтобы вызвать Редактора градиентов, нужно щелкнуть мышью по изображению градиента на панели параметров инструмента Gradient (Градиент). В результате на экране появится окно редактора.

Как загрузить градиент из коллекции готовых градиентов Photoshop?

1 способ.

1.Откройте редактор градиентов Photoshop 2.Нажмите в окне редактора кнопку Load (Загрузить) 3. Выберите в открывшемся окне файл градиента.

(Примечание: файлы градиентов обычно скачивают в виде архива, сначала нужно распаковать архивный файл)

1.Найдите в главном меню фотошоп вкладку Edit (Редактирование)и выберите команду Preset Manager (Управление наборами) 2.Выберите в списке Preset Type (Тип набора) — Gradients (Градиенты) 3.Нажмите в окне Load (Загрузить)4.Выберите в открывшемся окне файл градиента.

❶ Как в Фотошопе сделать градиент

Инструкция

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

В окне редактора градиента в разделе Presets вы можете выбрать один из стандартных градиентов. Для этого щелкните по нему мышкой и нажмите ОК для подтверждения. Если выбор вас не устраивает, вы можете создать авторский градиент. Раскройте список Gradient Type («Тип градиента») и выберите Solid («Непрерывный») или Noise («Шумовой»).

Чтобы добавить цветовой оттенок в непрерывный градиент, щелкните левой клавишей по нижней кромке цветовой полосы. Добавится новый движок вместе окошком Color («Цвет»). Изменить цвет можно, щелкнув по этому окошку. Раскроется цветовая палитра. Отметьте нужный оттенок и нажмите ОК.

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

Прозрачность заливки регулируется ползунками вдоль верхней кромки полосы. Вызывайте щелчком окошко Opacity (Непрозрачность») и выставляйте нужное значение.

Если вы выбрали шумовой градиент, изменить его вид можно с помощью ползунков R («Красный»), G («Зеленый») и B («Синий») под цветовой полосой. Чтобы оттенки распределялись случайным образом, нажмите Randomize. Уровень резкости переходов определяется в окошке Roughness – чем выше это значение, тем ниже плавность.

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

 Популярнейший фоторедактор Photoshop обладает широким набором инструментов, что обеспечивает качественную и удобную корректировку практически любых изображений, а также формирование разнообразных спецэффектов. Так, например, создать органичный, плавный переход от одного цвета к другому можно с помощью инструмента «Градиент». Его значок размещается на панели слева, между ярлычками инструментов «Ластик» и «Размытие». Использовать и настраивать градиент несложно.

Что помогает сделать градиент в Фотошопе?

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

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

Как начинать делать градиент?

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

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

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

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

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

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

Видео по теме

Источники:

• Градиент от нужного цвета к прозрачному, как сделать? InDesign

Как сделать градиент

Здравствуйте читатели сайта Soohar.ru В этом уроке из рубрики Photoshop КАК вы узнаете, как сделать градиент в фотошопе. Градиент это один из самых полезных  инструментов в работе дизайнера. Он может придать  вашему  дизайну сглаживающий эффект, а при грамотном использовании, его можно применить для придания глубины каким-либо объектам или самой сцены. Урок рассчитан для новичков.

1 — Где находится градиент

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

2 — Как добавить градиент на холст

После того, как вы выбрали этот инструмент, наверху в строке меню, вы увидите небольшое превью грaдиента. Рядом с превью расположены иконки, которые позволяют выбрать тип градиeнта: линейный, радиальный, конусообразный, зеркальный, и ромбовидный:

Принцип добавления грaдиeнта похож на инструмент заливку, но с небольшим отличием. Например для того что бы сделать (добавить) заливку нужно просто выбрать цвет и кликнуть по холсту, но если вы попробуете таким же способом добавить грaдиeнт, то у вас ничего не выйдет. Это потому, что гpадиeнт имеет направление и ширину.

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

3 — Как настроить градиент

Теперь подробнее познакомимся с настройками этого инструмента. По умолчанию ваш гpадиeнт имеет те цвета, которые выбраны для кисти и для фона. (Например, если для кисти выбран черный цвет, а для фона белый, то градиент получится черно-белым). Для того, что бы изменить его цвет и другие параметры нужно кликнуть по пиктограмме предварительного просмотра:

После чего откроется окно  Gradiend Editor со всеми настройками:

В разделе Presets можно выбрать один предустановленных градиентов. В поле Name можно дать название. В поле Gradient Type можно выбрать один из двух типов. Обычно оставляют тип Solid. В поле Smoothness можно изменить мягкость градации цвета.

Как вы уже заметили, грaдиент имеет два цвета, но ведь вам ничего не помешает добавить столько оттенков, сколько захотите. Сделать это просто. Для этого кликните в месте где находятся ползунки оттенков:

После этого появится еще один ползунок:

Что бы изменить его цвет кликните по полю напротив слова Color, которое находится ниже:

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

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

4 — Виды гpaдиeнтoв

Как уже говорилось ранее градиенты бывают пяти видов — линейный, радиальный, конусообразный, зеркальный, и ромбовидный. Ниже показаны примеры каждого из этих видов гpадиентoв:

Линейный (Linear)

Радиальный (Radial)

Конусообразный (Angel)

Зеркальный (Reflected)

Ромбовидный (Diamond)

Ниже вы можете посмотреть короткое видео с демонстрацией создания и настройки гpадиента:

Похожий по теме урок: Как создать кисть Photoshop

Как в фотошопе сделать градиент — стильно и красиво: инструкция

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

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

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

Этот непростой инструмент

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

Применений такого инструмента множество. Обычное фото или картинка под слоем полупрозрачного градиента станет выглядеть иначе. А черно-белое фото преобразится моментально, заиграет яркими красками. Создавая рисунок с нуля, с градиентом можно добиться неповторимости каждого объекта, выбирая всё новые сочетания и распределения цветов.

Попробуйте, градиент это не сложно

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

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

Градиент распределится по этой линии, равномерно покрыв фото цветом. Чем не кнопка «сделать красиво»?

Преобразит что угодно

А как сделать градиент на тексте? Сначала нужно набрать нужный нам текст и подогнать его под требуемый размер. Текст у нас в списке слоёв располагается автоматически отдельным слоем, помеченным буквой Т. По этому слою нужно щелкнуть курсором два раза, тогда появится окно «стиль слоя». Пункт «наложение градиента» это то, что нам нужно. В нём можно регулировать те же параметры, что и в общем инструменте градиента.

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

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

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

Среди всего разнообразия уроков подходящая инструкция найдется и для новичков, и для профессионалов обработки фото.

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

НОУ ИНТУИТ | Лекция | Рисование

Аннотация: Заливка. Атрибуты fill, fill-opacity и fill-rule. Линейная и радиальная градиентные заливки. Прозрачность. Контуры. Атрибуты stroke,stroke-width, stroke-opacity, stroke-dasharray, dashoffset, stroke-linecap, sroke-linejoin, stroke-mitrelimit. Паттерны и маркеры. Элементы symbol, clipPath, mask.

Заливка

Заливка цветом может применяться к фигурам, тексту и элементам Path. При указании цвета допустимы именованные названия (см. Приложение 1), а также RGB — код в десятичной или шестнадцатеричной формах. В табл. 5.1 приводится описание основных атрибутов заливки.

Ранее мы пользовались при заливке только атрибутом fill. Следовательно, мы имели дело с полностью непрозрачными объектами, заполняемыми цветом полностью. В табл. 5.2 приводятся примеры использования атрибутов заливки.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 5. Рисование</title>
  <desc>
    Пример fill1.svg
  </desc>
  <rect x="0" y="25"></rect>
  <rect x="10" y="0"  
        fill="red" fill-opacity="0.1"></rect>
  <rect x="30" y="0"  
        fill="red" fill-opacity="0.2"></rect>
  <rect x="50" y="0"  
        fill="red" fill-opacity="0.3"></rect>
  <rect x="70" y="0"  
        fill="red" fill-opacity="0.4"></rect>
  <rect x="90" y="0"  
        fill="red" fill-opacity="0.5"></rect>
  <rect x="110" y="0"  
        fill="red" fill-opacity="0.6"></rect>
  <rect x="130" y="0"  
        fill="red" fill-opacity="0.7"></rect>
  <rect x="150" y="0"  
        fill="red" fill-opacity="0.8"></rect>
  <rect x="170" y="0"  
        fill="red" fill-opacity="0.9"></rect>
  <rect x="190" y="0"  
        fill="red" fill-opacity="1"></rect>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 5. Рисование</title>
  <desc>
    Пример fill2.svg
  </desc>
  <rect x="0" y="25"></rect>
  <rect x="10" y="0" 
       ></rect>
  <rect x="30" y="0" 
       ></rect>
  <rect x="50" y="0"  
       ></rect>
  <rect x="70" y="0"  
       ></rect>
  <rect x="90" y="0"  
       ></rect>
  <rect x="110" y="0" 
       ></rect>
  <rect x="130" y="0" 
       ></rect>
  <rect x="150" y="0" 
       ></rect>
  <rect x="170" y="0"  
       ></rect>
  <rect x="190" y="0" 
       ></rect>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 5. Рисование</title>
  <desc>
    Пример fill3.svg
  </desc>
  <rect x="0" y="25" ></rect>
  <g>
    <rect x="10"  y="0"></rect>
    <rect x="30"  y="0"></rect>
    <rect x="50"  y="0"></rect>
    <rect x="70"  y="0"></rect>
    <rect x="90"  y="0"></rect>
    <rect x="110" y="0"></rect>
    <rect x="130" y="0"></rect>
    <rect x="150" y="0"></rect>
    <rect x="170" y="0"></rect>
    <rect x="190" y="0"></rect>
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 5. Рисование</title>
  <desc>
    Пример fill4.svg
  </desc>
  <polygon fill-rule="nonzero" fill="red" stroke="black"
           points="50,6 18,86 98,38 2,38 82,86"/>
  <polygon fill-rule="evenodd" fill="red" stroke="black"
           points="151,6 119,86 199,38 103,38 183,86"/>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg   
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 5. Рисование</title>
  <desc>
    Пример fill5.svg
  </desc>
  <polygon
           points="50,6 18,86 98,38 2,38 82,86"/>
  <polygon
           points="151,6 119,86 199,38 103,38 183,86" />
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 5. Рисование</title>
  <desc>
    Пример fill6.svg
  </desc>
  <!--Фоновый черный прямоугольник-->
  <rect x="0" y="25" ></rect>
  <!--Непрозрачный текст-->
  <g font-family="Arial" font-size="40" stroke="white" 
     stroke-width="1">
    <text x="10" y="100" fill="red">
      Red
    </text>
    <text x="10" y="150" fill="yellow">
      Yellow
    </text>
    <text x="10" y="200" fill="green">
      Green
    </text>
  </g>
  <!--Полупрозрачный текст-->
  <g>
    <g font-family="Arial" font-size="40" stroke="white" 
       stroke-width="1">
      <text x="135" y="100" fill="red">
        Red
      </text>
      <text x="135" y="150" fill="yellow">
        Yellow
      </text>
      <text x="135" y="200" fill="green">
        Green
      </text>
    </g>
  </g>
</svg>

Линейная градиентная заливка

Линейная градиентная заливка предназначена для получения плавного цветового перехода в направлении, заданной прямой. Элемент linearGradient определяется в области defs, а затем он может быть применен для произвольной фигуры в качестве заливки:

<defs>
  <linearGradient>
    <stop offset="30%" stop-color="red"/>
    <stop offset="70%" stop-color="yellow"/>
  </linearGradient>
</defs>
<rect x="0" y="0" fill="url(#MyGradient)"/>

Внутри элементов stop задаются цвета градиента в атрибутах stop-color и граница области каждого из цветов в атрибутах offset (рис. 5.1):

Повторяющиеся шаблоны Photoshop — добавление цветов и градиентов

В предыдущем уроке мы изучили основы создания и использования простых повторяющихся узоров в Photoshop. Мы разработали одну плитку, используя Elliptical Marquee Tool и фильтр Offset. Затем мы сохранили плитку как шаблон. Наконец, мы выбрали рисунок и использовали его для заполнения слоя, причем рисунок плавно повторяется столько раз, сколько необходимо для покрытия всей области. Это руководство продолжается с того места, где мы остановились, поэтому вы можете завершить предыдущий раздел, в котором мы создали и добавили наш шаблон «Круги», если вы еще этого не сделали.

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

Вот наш дизайн, как он выглядит до сих пор:

Добавление сплошных цветов

Давайте начнем с замены белого фона на цвет. Мы могли бы использовать команду «Заливка» в Photoshop, чтобы залить фоновый слой цветом, но давайте дадим себе больше гибкости, используя так называемый слой заливки (мы увидим, что я имею в виду, говоря о большей гибкости). Сначала нажмите на фоновый слой на панели слоев, чтобы выбрать его:

Выбрав фоновый слой, щелкните значок « Новый заливочный или корректирующий слой» в нижней части панели «Слои»:

Выберите Сплошной цвет в верхней части списка заливки и корректирующих слоев, который появляется:

Как только вы выберете Сплошной цвет из списка, Photoshop откроет палитру цветов, чтобы мы могли выбрать цвет, который мы хотим использовать. Этот цвет станет новым цветом фона для дизайна. Я собираюсь выбрать средний синий. Конечно, вы можете выбрать любой понравившийся вам цвет, но если вы хотите использовать те же цвета, которые я использую, найдите параметры R, G и B (обозначающие красный, зеленый и синий) рядом с нижним центром Color Picker и введите 98 для значения R, 175 для G и 200 для B :

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

Если мы посмотрим на панель «Слои», то увидим, что произошло. Photoshop добавил сплошной цветовой заливочный слой, который он назвал Color Fill 1, между белым фоновым слоем и черным кругом на слое 1. Причина, по которой мы выбрали фоновый слой перед добавлением заливочного слоя, заключалась в том, что Photoshop добавляет новые слои непосредственно над выбранным в данный момент слоем, и нам нужно, чтобы слой заливки появился над фоновым слоем, но под круговым узором. Круги остаются черными в нашем документе, потому что они находятся на слое над слоем заливки, а это означает, что они на него не влияют:

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

Затем еще раз щелкните значок « Новый заливочный слой» или «Корректирующий слой» в нижней части панели «Слои» и выберите « Сплошной цвет» в верхней части списка, как мы делали раньше. Photoshop снова откроет палитру цветов, чтобы мы могли выбрать цвет, который мы хотим использовать. На этот раз я выберу очень светло-синий, введя 216 для значения R, 231 для G и 239 для B :

Нажмите кнопку «ОК», чтобы выйти из палитры цветов, и теперь наши повторяющиеся круги теперь отображаются в новом голубом цвете:

Подожди, что случилось? Куда делись наши круги? Где фоновый цвет, который мы только что добавили? Почему сейчас все светло-голубое? Если мы посмотрим на панель «Слои», то увидим проблему, и проблема в том, что Photoshop сделал именно то, что мы просили. Он добавил слой заливки сплошным цветом с именем Color Fill 2, заполненный голубым цветом, который мы выбрали в палитре цветов, над шаблоном окружностей на слое 1:

К сожалению, поскольку слой заливки находится над всеми остальными слоями на панели «Слои», он блокирует все остальное от просмотра в документе, поэтому все, что мы видим, — светло-голубой. Нам нужен способ сообщить Фотошопу, что мы хотим, чтобы наш новый заливочный слой влиял только на шаблон окружностей на Слой 1 под ним, и мы можем сделать это, используя так называемую обтравочную маску .

Убедитесь, что слой « Цветная заливка 2» активен на панели «Слои» (активные слои выделены синим цветом. Нажмите на него, чтобы выбрать его, если по какой-то причине он не активен). Перейдите в меню « Слой» в строке меню в верхней части экрана и выберите « Создать обтравочную маску» :

Слой Color Fill 2 будет отображаться с отступом вправо на панели «Слои», сообщая нам, что теперь он «обрезан» до содержимого слоя под ним, что означает, что теперь он влияет только на шаблон круга на слое 1:

И в окне документа мы видим результаты, которые мы ожидали, когда добавили слой заливки. Черные круги теперь кажутся голубыми на темно-синем фоне:

Плагин шорткодов, действий и фильтров: ошибка в шорткоде (ads-basics-middle)

Изменение цвета

Ранее я упоминал, что слои заливки дают нам больше гибкости, чем если бы мы заполняли слой командой «Заполнить» в Photoshop, и причина в том, что мы можем изменить цвет слоя заливки в любое время, когда захотим! Чтобы изменить цвет слоя заливки, просто дважды щелкните его значок на панели «Слои». Давайте изменим цвет нашего фона. Дважды щелкните миниатюру для слоя «Цветная заливка 1», который находится над фоновым слоем:

Это вновь открывает палитру цветов, что позволяет нам выбрать другой цвет. На этот раз я выберу вишневый цвет, введя 204 для моего значения R, 32 для G и 130 для B :

Нажмите кнопку «ОК», чтобы закрыть палитру цветов, и документ мгновенно обновится с помощью нашего нового цвета фона:

Изменить цвет кругов так же просто. Просто дважды щелкните непосредственно на миниатюре для слоя Color Fill 2:

Это снова открывает палитру цветов, чтобы мы могли выбрать новый цвет. Я выберу более светлый розовый, введя 218 для моего значения R, 144 для G и 161 для B :

Нажмите кнопку «ОК», чтобы закрыть окно «Палитра цветов», и снова документ будет мгновенно обновлен, на этот раз с новым цветом для кругов:

Добавление градиентов к повторяющимся узорам

Мы также можем добавить градиенты в наши шаблоны, и шаги очень похожи. Фактически, единственное реальное отличие состоит в том, что вместо добавления слоя заливки Solid Color мы добавляем слой заливки Gradient ! Я удалю два слоя заливки «Сплошной цвет», которые добавил, щелкнув по каждому из них и перетащив его вниз в корзину в нижней части панели «Слои»:

С исчезнувшими слоями заливки рисунок возвращается к своему первоначальному черно-белому цвету:

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

Помните, что произошло, когда мы добавили слой заливки «Сплошной цвет» над узором круга? Весь документ заполнялся выбранным нами цветом, пока мы не исправили проблему с помощью обтравочной маски. Нам также понадобится обтравочная маска для нашего градиентного заливочного слоя, но на этот раз давайте воспользуемся сокращением. Выбрав Layer 1, удерживайте нажатой клавишу Alt (Победа) / Option (Mac) и щелкните значок « Новый слой заливки» или «Adjustment Layer» :

Выберите градиентный заливочный слой из появившегося списка:

Удерживая нажатой клавишу «Alt» («Победа») / «Option» (Mac), нажимая значок «Новый слой заливки» или «Корректирующий слой», Photoshop открывает всплывающее диалоговое окно « Новый слой », в котором можно задать некоторые параметры для слоя заливки «Градиент» до его добавления. Нам интересен вариант, который гласит « Использовать предыдущий слой для создания обтравочной маски» . Нажмите внутри его флажок, чтобы выбрать его. Если выбран этот параметр, слой заливки градиентом будет автоматически обрезан до слоя 1 под ним, что избавит нас от необходимости делать это позже:

Нажмите кнопку ОК, чтобы закрыть диалоговое окно «Новый слой». Откроется диалоговое окно « Градиентная заливка », в котором мы можем выбрать градиент, который мы хотим использовать. Нажмите на эскиз предварительного просмотра градиента:

Откроется редактор градиентов в Photoshop. В верхней части диалогового окна, в разделе « Наборы настроек», находится набор миниатюр, показывающих предварительный просмотр готовых градиентов, из которых мы можем выбирать. Просто нажмите на миниатюру, чтобы выбрать градиент. Каждый раз, когда вы нажимаете на миниатюру, вы увидите предварительный просмотр того, как градиент будет выглядеть в окне документа. Например, если вы хотите что-то действительно яркое и красочное, вы можете попробовать градиент Spectrum, нажав на его миниатюру:

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

По умолчанию Photoshop не дает нам много градиентов на выбор, но есть и другие доступные наборы градиентов. Чтобы найти их, нажмите на маленькую стрелку над миниатюрами градиента:

Нажатие на стрелку открывает меню, содержащее список дополнительных наборов градиентов, которые мы можем загрузить. Очевидно, что мы не будем здесь проходить каждый из них, так как вы можете легко экспериментировать с ними самостоятельно, но в качестве примера я приведу выберите набор Color Harmonies 2 из списка:

После того, как вы выбрали набор градиентов, Photoshop спросит, хотите ли вы заменить текущие градиенты новым набором или просто хотите добавить их, чтобы сохранить текущие градиенты и добавить новые. Выберите Добавить :

Новые градиенты появятся после исходных градиентов в области «Предустановки» редактора градиентов. Как и в случае с оригиналами, вы можете выбрать и просмотреть любой из новых градиентов, нажав на их миниатюру. Я нажму на синий, желтый, розовый градиент, чтобы выбрать его:

Образец круга теперь раскрашен более мягкими цветами нового градиента:

Как только вы нашли градиент, который вам нравится для повторяющегося шаблона, нажмите OK, чтобы закрыть из Градиентного Редактора, затем нажмите OK, чтобы закрыть диалоговое окно заливки Градиента.

Изменение Градиента

Так же, как мы видели со слоем заливки «Сплошной цвет», мы можем вернуться и изменить наш градиент в любое время. Если мы посмотрим на панель «Слои», то увидим наш слой градиентной заливки, который Photoshop назвал «Градиентная заливка 1», расположенный над шаблоном окружностей на слое 1. Обратите внимание, что он имеет отступ справа, сообщая нам, что он обрезан до слоя 1 под ним. Чтобы перейти к другому градиенту, просто дважды щелкните непосредственно на миниатюре слоя градиента заливки:

Это вновь открывает диалоговое окно Градиентная заливка. Чтобы изменить градиент, щелкните, как мы делали ранее на миниатюре предварительного просмотра градиента:

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

Я добавлю эти новые градиенты вместе с остальными, выбрав «Добавить», когда Photoshop спросит меня, и новые миниатюры градиента появятся в области «Наборы» редактора градиентов. На этот раз я выберу зеленый, фиолетовый, синий градиент:

Выбрав мой новый градиент, я нажму OK, чтобы закрыть из Градиентного Редактора, затем я нажму OK, чтобы закрыть из диалогового окна Градиентная заливка. Круги теперь изменились на цвета нового градиента:

Конечно, нам не нужно придерживаться белого фона. Здесь я использовал шаги, которые мы рассмотрели в первой части урока, чтобы добавить слой заливки сплошным цветом над фоновым слоем. Я выбрал средний фиолетовый цвет из палитры цветов в качестве нового цвета для моего фона (R: 85, G: 80, B: 129):

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

Как сделать цвет градиент на металле

Мастер-класс смотреть онлайн: Градиент. Основы нанесения плавного перехода цвета. Видеоурок

Сегодня я хочу рассказать вам о градиенте или омбре…

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

Переход можно делать из любого цвета в любой!

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

Для работы в технике градиент вам понадобится:

• губка для мытья посуды;

• минимум два оттенка, в идеале еще промежуточный;

• кисть на каждый, выбранный вами, оттенок;

1. Сделайте подготовительные слои. Потому что градиент может быть только одним слоем, чтобы оставалось ощущение павного перехода.

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

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

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

В видеоуроке я наглядно показываю как сделать градиент-переход из цвета в цвет плавно и красиво.

Приятного просмотра!

css — Создание цветового градиента с цветом:

1. Около
2. Продукты
3. Для команд

1. Переполнение стека Общественные вопросы и ответы
2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
3. Вакансии

Полное руководство по инструменту Gradient Tool в Adobe Photoshop

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

Изображение на обложке через Ксению Перминову.

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

Следуйте инструкциям, чтобы узнать об особенностях инструмента Gradient Tool в Adobe Photoshop и о том, как применять градиенты для создания визуально потрясающих изображений. После того, как вы разобрались с инструментом «Градиент» в Photoshop, перейдите к нашему руководству по использованию инструмента «Градиент» в Illustrator.

Градиентная заливка

Включите инструмент Gradient Tool в Photoshop, нажав G или выбрав значок прямоугольного градиента , расположенный на левой панели инструментов в программе. После активации инструмента Gradient Tool (G) выберите градиент по вашему выбору на верхней панели инструментов: линейный, радиальный, угловой, отраженный и ромбовидный.

Когда активирована градиентная заливка, появится курсор, напоминающий знак плюс . Найдите начальную точку для градиента, затем щелкните и перетащите курсор в конечную точку градиента, затем отпустите курсор. Удерживайте нажатой клавишу Shift , чтобы сохранить начальную и конечную точки с шагом 45 градусов.Для более плавного градиента расположите начальную и конечную точки дальше друг от друга; более короткие начальная и конечная точки создают более резкую градиентную заливку.

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

Линейный градиент

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

Радиальный градиент

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

Угловой градиент

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

Отраженный градиент

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

Алмазный градиент

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

Библиотека градиентов

Adobe Photoshop предлагает огромную библиотеку предустановленных градиентных заливок, когда выбран инструмент Gradient Tool (G) . Найдите их, щелкнув стрелку раскрывающегося списка рядом с диалоговым окном градиентной заливки.

При активации вы увидите набор градиентов по умолчанию в Photoshop. Добавьте больше градиентов в свою библиотеку, нажав значок настроек и выбрав из библиотек, таких как Pastels , Color Harmonies и другие.Вы можете добавить новый выбранный градиент в вашу текущую библиотеку или полностью заменить их, нажав OK .

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

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

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

Создание твердого градиента

Если тип градиента указан как solid , появляется ползунок плавного градиента, который позволяет полностью настроить внешний вид градиента.

• Гладкость: Влияет на переход цвета в градиенте. При 100% ваш градиент создает более плавный переход; значения менее 100% переходят более резко.
• Color Stop: Указывает цвета в градиенте. Для редактирования дважды щелкните , чтобы открыть диалоговое окно «Палитра цветов ». Вы также можете перемещать каждую цветовую границу внутри ползунка градиента, чтобы влиять на переход цвета.
• Средняя точка: Эта форма ромба управляет потоком вашего градиента. По умолчанию средняя точка равна средней точке, или 50%, между точками цвета для плавного градиента. Вы можете перемещать среднюю точку, чтобы настроить переход и поток.
• Остановка непрозрачности: Эти остановки, расположенные над отметкой цвета, влияют на непрозрачность каждого цвета в градиенте. Просто нажмите на остановку непрозрачности, чтобы отрегулировать ее непрозрачность в меню Остановки .Значения менее 100% покажут узор шахматной доски , указывающий уровни прозрачности.
• Расположение: Влияет на фактическое расположение точек цвета и непрозрачности. Расположение по адресу 0% расположено слева от ползунка, а 100% — справа от ползунка.
• Удалить: Позволяет удалить границы цвета или непрозрачности в пределах ползунка градиента. Нажмите на стоп, чтобы включить черный треугольник , затем нажмите Удалить .
• Добавление точек: Добавьте точку цвета или непрозрачности к ползунку градиента, щелкнув над , ползунок для значений непрозрачности , или ниже , ползунок для остановок цвета .

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

Создание градиента шума

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

• Шероховатость: Значения шероховатости больше 20% создадут четкие цветные линии на ползунке градиента; по мере увеличения значения линии становятся более резкими. Значения меньше 20% будут напоминать плавный градиент.
• Цветовая модель: Выберите из цветовых режимов RGB , HSB и LAB . RGB сочетает в себе красный, зеленый и синий цвета для получения широкого диапазона оттенков. HSB использует Hue , Saturation и Brightness для создания цветов. LAB описывает человеческое восприятие цвета и описывает, как цвет выглядит, что делает его цветовой моделью в зависимости от устройства. Ползунки с серыми стрелками и со стрелками определяют диапазон оттенков, присутствующих в градиенте шума.
• Ограничить цвета: Если этот флажок установлен, цвета, представленные в ползунке градиента, будут ограничены менее насыщенными оттенками.
• Добавить прозрачность: Если этот флажок установлен, к ползунку добавляется шум прозрачности, обозначенный шаблоном шахматной доски .
• Произвольный: Щелкните, чтобы рандомизировать оттенки, присутствующие в ползунке градиента.

Как применять градиенты к фотографиям

Теперь, когда мы рассмотрели все тонкости инструмента Gradient Tool в Photoshop, давайте применим его к фотографии, чтобы получить простой, но модный вид. В этом уроке я буду использовать художественную фотографию в сочетании с моим градиентом.

Загрузите изображение в Photoshop, затем добавьте корректирующий слой Black & White на панели Layers . Настройте внешний вид вашего изображения с помощью ползунков цвета.

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

Чтобы связать градиент с вашей фотографией, настройте Blend Mode на Screen на панели Layers . Та-да! Вы создали визуально интересное наложение градиента на простых изображениях.

Лицензируйте потрясающий контент с планом, который соответствует вашим потребностям.

Посмотреть цены

Хотите расширить свои знания в области Adobe Photoshop? Ознакомьтесь с этими информационными статьями:

android — Как добавить цвет градиента в цвет. Xml

1. Около
2. Продукты
3. Для команд

1. Переполнение стека Общественные вопросы и ответы
2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя

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

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

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

1. Сначала запустите новый проект Photoshop и создайте форму с помощью инструмента «Прямоугольник», расположенного на главной панели инструментов. В этом проекте мы хотим заполнить всю фигуру радиальным градиентом, но Photoshop также позволяет вам выбрать меньшую область фигуры с помощью лассо и применить градиент только к этой части.
2. Выделив фигуру, выберите инструмент «Градиент» на главной панели инструментов.Значок выглядит как прямоугольник, меняющий цвет с черного на белый, и вам может потребоваться сначала нажать и удерживать значок ведерка с краской, чтобы найти его.
3. Инструмент «Градиент» имеет ряд мощных функций, которые можно настроить на верхней горизонтальной панели инструментов. Здесь вы найдете множество значков, соответствующих различным стилям градиента. Чтобы включить радиальный градиент, выберите значок с исчезающим белым кружком посередине.
4. Затем, если вы хотите изменить цветовую схему градиента, дважды щелкните любой из двух цветных квадратов в нижней части главной панели инструментов.Верхний квадрат — ваш начальный цвет (в данном случае цвет исчезающего круга), а нижний квадрат — последний цвет.
5. Наконец, чтобы убедиться, что ваш радиальный градиент начинается в нужном месте (и с правильным цветом), щелкните и удерживайте указатель мыши там, где вы хотите, чтобы градиент начинался. Вы также можете щелкнуть за пределами экрана, если хотите, чтобы на вашей фигуре появлялась только часть затемнения. Затем переместите курсор туда, куда вы хотите, чтобы градиент исчез, продолжая удерживать кнопку мыши.
6. Когда вы отпустите кнопку мыши, к форме будет применен радиальный градиент. Рисование длинной линии до того, как отпустить мышь, приведет к постепенному градиенту, а рисование короткой линии создаст более быстрый градиент. Для еще большего контроля вы можете настроить непрозрачность, гладкость и другие параметры в редакторе градиентов, который можно открыть, щелкнув предварительный просмотр градиента в верхнем левом углу панели инструментов градиента.

Градиентная заливка для значков SVG

В своей статье 2016 года «Как работать с SVG-значками» я завершил раздел «Дополнительно» предупреждением: извините, градиентные заливки не работают.

Я в основном имел в виду такой код, как fill: linear-gradient (красный, синий) , который не работает, потому что fill взят из SVG, у которого есть собственная система градиентов, а linear-gradient — из CSS и сделано в основном для фонов. Эти двое плохо сочетаются.

Я знал, что мы могли бы использовать элемент SVG , но на самом деле не пробовал.Затем, через несколько месяцев, я все же попробовал, и это сработало !, но я забыл написать об этом в блоге. Итак, как мы можем это сделать?

Добавление градиентов в HTML

Самым надежным методом, который я нашел, было добавление элемента SVG на вашу HTML-страницу (например, в начале или конце ). Он должен определять :

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

Затем вы можете использовать этот градиент на своем значке SVG:

Или в вашем CSS:

  .icon {
  / * градиент и резервный цвет * /
  fill: url (# my-cool-gradient) # 447799;
}  

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

Изменение цветов градиента с помощью переменных CSS

Если мы хотим установить цвета градиента из CSS, мы можем сделать это с помощью переменных CSS. Мы собираемся написать наши определения градиента, используя настраиваемые свойства CSS ( var (- my-custom-property) ).

Теперь мы можем установить — и, при необходимости, изменить — эти цвета в нашем CSS:

  # gradient-horizontal {
  --color-stop-1: # a770ef;
  --color-stop-2: # cf8bf3;
  --color-stop-3: # fdb99b;
}
# gradient-vertical {
  --color-stop-1: # 00c3ff;
  --color-stop-2: # 77e190;
  --color-stop-3: # ffff1c;
}  

И, наконец, использовать их как заливку значков:

 .icon-hgradient {
  fill: url (# gradient-horizontal) серый;
  / * Мы также можем использовать его как заливку обводки:
  обводка: url (# gradient-horizontal) серый; * /
}
.icon-vgradient {
  fill: url (# gradient-vertical) серый;
}  

Вот результат (в браузере, поддерживающем настраиваемые свойства CSS):

Использование градиентов во внешних файлах

Этот метод работает в Firefox и использовался для работы в Edge (подтверждено в Edge 14 и 15, регресс в Edge 16 и Insider Preview). В следующем тесте:

1. Оба значка извлекаются из внешнего спрайта: sprite.svg.
2. Первый значок использует градиент из этой HTML-страницы, а второй из sprite.svg .

  .icon-sprite-gradient {
  fill: url (sprite.svg # my-warm-gradient) красный;
}  

Использование градиентов в CSS в качестве URL-адресов данных

Что, если бы я сказал вам, что вы можете определять свои градиенты в SVG, но помещать SVG в свой CSS как URL-адреса данных? Ладно, я просто дурак. Но это работает! По крайней мере, это работает в Firefox: P

  / * Обратите внимание на `id =" grad "` в URL-адресе SVG и на то, как мы его используем в конце. Обратите внимание, что символ `#` в шестнадцатеричном формате должен быть экранирован как `% 23`. * /
.icon-gradient-url {
  fill: url ("data: image / svg + xml,  #grad ") фиолетовый;
}

/ * Тот же SVG в base64 * /
.icon-gradient-base64 {
  fill: url ("data: image / svg + xml; base64, PHN2 ... zdmc + # grad") фиолетовый;
}  

Видите, как мы ссылаемся на идентификатор градиента с #grad в конце URL-адреса? Похоже, только Firefox понимает этот синтаксис. Эх, тоже плохо.

Подведем итоги

1. Да, у вас может быть градиентная заливка!
2. Но вам нужно включить градиенты SVG в свой HTML
3. Цвета могут быть жестко заданы в градиенте SVG (в HTML) или заданы в CSS (с использованием переменных CSS).
4. Все значки, использующие данный градиент, будут использовать одни и те же цвета, вы не можете переопределить определенный цвет, например:

 .icon-gradient-override {
  / * Это работает, как показано ранее * /
  fill: url (# gradient-horizontal) серый;
  / * Но это ничего не даст… * /
  --color-stop-1: белый;
  --color-stop-2: серый;
  --color-stop-3: черный;
}  

Если вам нужно много разных градиентных заливок, этот метод может вам не подойти. Создание 10 или 20 различных градиентов SVG в вашем HTML нецелесообразно. Но для более простых случаев использования это должно работать во всех текущих браузерах (включая IE11, если мы избегаем переменных CSS).

Добавление градиента к тексту с помощью CSS

Градиенты CSS

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

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

  кузов {
  фон: linear-gradient (справа, # ee0979, # ff6a00);
}  

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

Обманом браузера для применения градиента к тексту

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

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
}  

Начните так же, как и раньше, применив градиент к элементу body.Единственное изменение, которое мы сделали до сих пор, — это применение градиента к тегу h2. После этого вы увидите фон позади текста, но теперь он является частью элемента h2. Цвет текста по-прежнему будет черным.

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

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
  фон-клип: текст; -webkit-background-clip: текст; -moz-background-clip: текст; -moz-text-fill-color: прозрачный; -webkit-text-fill-color: прозрачный;}  

Это изменение добавляет к правилу CSS два свойства.Это background-clip и text-fill-color . Установка background-clip для текста скроет фон, который не пересекает текст, а установка text-fill-color на прозрачный сделает текст прозрачным.

Префиксы поставщиков -moz и -webkit необходимы для правильной работы обоих этих правил, поскольку поддержка браузеров все еще нова, и есть несколько ошибок при их использовании с градиентами. Для получения дополнительной информации об ограничениях на использование этих правил посетите caniuse.com

Исправление шкалы градиента для соответствия тексту.

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

Чтобы исправить это, вы можете настроить стиль тега h2 так, чтобы ограничивающая рамка для элемента была такой же, как пространство, занимаемое текстом.Один из способов сделать это — сделать свойство display для тега h2 встроенным блоком .

  h2 {
  font-size: 6rem;
  фон: линейно-градиентный (45deg, # f3ec78, # af4261);
  фон-клип: текст;
  -webkit-background-clip: текст;
  -moz-background-clip: текст;
  -moz-text-fill-color: прозрачный;
  -webkit-text-fill-color: прозрачный;
  display: inline-block}  

Добавление этого должно сделать градиент немного лучше. Имейте в виду, что это изменит поведение тега h2.Он больше не будет занимать все горизонтальное пространство в своем ряду. Если вам это нужно, вы можете добавить вокруг него еще один div со 100% шириной или вы можете попробовать использовать свойство background-size вместо display, чтобы настроить внешний вид вашего градиента.

Чтобы увидеть рабочую демонстрацию всего, что мы только что рассмотрели, это песочница кода, иллюстрирующая 3 этапа процесса. Попробуйте применить разные градиенты и объединить этот трюк с анимацией CSS, чтобы создать свой собственный эффект. Чтобы попробовать классные градиенты, посетите сайт uiGradients

Углы градиента в CSS, Figma и Sketch

Знаете ли вы чувство, когда объект никогда не отпускает вас? В последние годы я работал с различными графическими программами и написал много строк CSS.Несмотря на то, что теперь легко скопировать CSS-код для градиентов напрямую, например, из Figma, у меня всегда было ощущение, что градиенты в графических программах ведут себя несколько иначе, чем градиенты, созданные с помощью CSS. Особенно угол градиента иногда казался мне больше случайным продуктом. В конце концов, копирование кода CSS часто приводит к тонким, но недопустимым различиям в дизайне.

Это становится еще более запутанным, когда вы смотрите на то, как ведет себя градиент при изменении размера элемента (по крайней мере, для меня это сбивало с толку).Итак, я очень глубоко копал, чтобы выяснить, что на самом деле происходит, когда я назначаю угол градиенту в CSS, Figma или Sketch. Если вам это тоже интересно, ну … продолжайте читать. Но позвольте мне вас предупредить. Будет задействована некоторая тригонометрия.

I. Градиенты в CSS

Базовый синтаксис

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

linear-gradient (# f09, # 3023AE, # 0ff)

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

linear-gradient ( вверх справа , # f09, # 3023AE, # 0ff)

Теперь градиент проходит от левого нижнего угла элемента к правому верхнему углу.Угол наклона определяется размером элемента. Для квадрата это дает угол точно 45 градусов. Если соотношение сторон элемента изменяется, угол градиента корректируется в соответствии с углом диагонали. Например, соотношение сторон 2: 1 дает угол примерно 26,5 градусов.

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

Указание точных углов

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

linear-gradient ( 36deg , # f09, # 3023AE, # 0ff)

То, что происходит сейчас, лучше всего описать следующим образом:

Нарисуйте a градиент под углом 36 градусов, но убедитесь, что все указанные цвета видны.

Я пытаюсь объяснить шаг за шагом, что это означает: сначала мы рисуем вертикальную ось и поворачиваем ее на 36 градусов. Назовем это осью градиента .

Затем мы рисуем диагональ прямоугольника, ближайшую к оси градиента . В нашем случае это диагональная линия от левого нижнего угла до правого верхнего. На этой диагонали мы размещаем указанные цветовые точки — розовый на 0%, фиолетовый на 50% и голубой на 100%.

Мы почти на месте. Отсутствуют только три линии, которые проходят через заданные цветовые точки и ортогональны оси градиента .Я буду называть их осями остановки цвета (Внимание: линии , а не , ортогональны диагонали прямоугольника!)

На пересечении двух внешних осей остановки цвета с осью градиента теперь являются начальной и конечной точками градиента.

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

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

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

Интерактивный пример

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

II. Градиенты в Sketch

Итак, как это выглядит, когда мы пытаемся воссоздать тот же процесс в Sketch? Прежде всего, вы должны иметь дело с тем фактом, что невозможно указать точный угол для градиента в Sketch.Итак, давайте начнем с квадрата и перетащим градиент из одного угла в другой. Таким образом, мы точно знаем, что он имеет угол 45 градусов. К счастью, здесь работает умное выравнивание, поэтому попасть в точный угол довольно легко.

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

Теперь становится очень интересно, когда мы растягиваем квадрат в три раза по его ширине и сравниваем результат с соответствующими объявлениями CSS:

Я не хочу слишком утомлять вас математикой .
Здесь важно то, что ни один из двух параметров CSS не ведет себя так, как в Sketch . Градиент в Sketch имеет угол около 71,5 градуса (если вам действительно интересно: это арктангенс 3/1). В версии вверх-вправо угол составляет около 18,5 градусов (то есть 90–71,5 или арктангенс 1/3).

В Sketch ось градиента остается на диагонали, тогда как в CSS ось градиента настраивается так, чтобы оси остановки цвета были параллельны противоположной диагонали.

Наконец, в версии 45deg у нас есть угол (неожиданно) 45 градусов. Если вы хотите воспроизвести этот градиент в Sketch, вам нужно разместить конечные точки градиента на пересечении оси градиента и оси остановки цвета . Это работает только до тех пор, пока вы снова не измените размер объекта.

III. Градиенты в Figma

Наконец, давайте посмотрим на то, как все выглядит в Figma. Опять же, мы начинаем с квадрата и рисуем градиент от одного угла к другому.

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

На самом деле, похоже, что Figma ведет себя точно так же, как версия CSS в правом верхнем углу . По крайней мере, так это выглядит в текущем примере. К сожалению, это не всегда так. Figma принимает созданный градиент как пиксельную графику и искажает его. Таким образом изменяется и угол градиента. Это станет ясно, если мы начнем с прямоугольника 3: 1, заполним его градиентом, а затем уменьшим до квадрата.

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

IV. Заключение

Мы видим, что практически невозможно воспроизвести поведение CSS с помощью Figma или Sketch (по крайней мере, с градиентами, угол которых не кратен 90). Единственное, что можно воссоздать в Figma, — это градиент от одного угла к другому.Но опять же, вы должны сначала создать квадрат, заполнить его градиентом, а затем исказить квадрат до желаемого размера.

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

Как добавить цвет градиента текста с помощью CSS — Techstacker

Узнайте, как добавить цвет линейного градиента к вашим текстовым элементам с помощью CSS и как избежать распространенной ошибки градиента.

Чтобы добавить градиентный цвет текста к вашим текстовым элементам HTML, вам потребуются следующие свойства CSS:

• фон
• -webkit-background-clip
• -webkit-text-fill-color

Почему мы используем свойство background для раскрашивания текста? Этот подход кажется немного взломанным, но я обещаю, что он работает!

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

HTML

Элемент заголовка

   
 Цвет градиента текста! 
   

CSS

Добавьте стили цветового градиента к .text-gradient класс:

  .text-gradient {
  
  фон: линейный градиент (вправо, # ff8a00 0%, # dd4c4f 100%);
  
  -webkit-background-clip: текст;
  
  -webkit-text-fill-color: прозрачный;
}  

Результат:

Цвет градиента текста!

Отлично!

Но подожди секунду!

Вы заметили проблему с применением двух цветов к текстовому элементу? Цвета нанесены неравномерно.

CSS-функция linear-gradient принимает два значения цвета:

• # ff8a00 (оранжевый)
• # DD4C4F (красный)

И он должен распространяться от 0 до 100% равномерно, как указано в CSS:

  (вправо, # ff8a00 0%, # DD4C4F 100%)  

Итак, мы хотим, чтобы это в текстовом элементе:

Но наш текстовый пример почти полностью оранжевый:

Цвет градиента текста!

Совет: если вы переключите цветовую тему на этом веб-сайте в темный режим (щелкните значок Луны), это будет легче увидеть.

Это происходит потому, что элемент заголовка

При этом цвета из класса градиента ( .text-gradient ), который мы добавили к элементу

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

Цвет градиента текста!

Вы это видите?

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

Чтобы исправить это, вам нужно переопределить настройки display: block по умолчанию для элемента

  .text-gradient {
  фон: линейный градиент (вправо, # ff8a00 0%, # dd4c4f 100%);
  -webkit-background-clip: текст;
  -webkit-text-fill-color: прозрачный;
  дисплей: встроенный блок;
}  

Результат:

Цвет градиента текста!

Sweet! Вы видите разницу? Теперь красная часть двухцветного градиента появляется так же сильно, как и оранжевый, потому что они применены 50 на 50.

Совместимость с браузером

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

CSS Gradient text effect

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

Поскольку он основан на CSS , у нас есть возможность даже анимировать его, если мы захотим.(Я оставлю это на ваше усмотрение)

Конечный результат сегодняшней статьи:

Я помогу вам создать этот классный эффект самостоятельно, всего за пару строк CSS !

Что касается HTML, нам понадобится только следующее:

  
 Super Cool 

 Gradient Effect   

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

CSS Gradient text effect Permalink

Теперь давайте перейдем к нашей настройке CSS .

Мы начнем с стилизации нашего тела, поэтому мы центрируем наш элемент внутри

  корпус {
 дисплей: сетка; 
 мест размещения: центр; 
 мин-высота: 100vh; 
 фон: # 000; 
}  

Я использую CSS Grid для идеального центрирования всего.

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

Теперь нам нужно заняться нашим стилем заголовка.

  h2 {
 семейство шрифтов: Roboto, 'Helvetica Neue', Arial, sans-serif; 
 font-size: 6vmax; 
}  

Мы начинаем с определения шрифта, который нам нравится, и делаем его красивым и большим.Я использую 6vmax , который является масштабируемым блоком просмотра.

Это приводит к следующему:

Следующий шаг — добавить наш градиент. Мы используем фоновое изображение для установки градиента.

  h2 {
 семейство шрифтов: Roboto, 'Helvetica Neue', Arial, sans-serif; 
 font-size: 6vmax; 
 цвет фона: # 5390d9; 
 background-image: linear-gradient (45deg, # 6930c3, # 5390d9); 
}  

Как видите, я также установил запасной цвет на случай, если градиент не поддерживается.

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

Вы можете использовать этот классный генератор для градиентов CSS

Наш результат пока довольно странный:

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

Давайте добавим эффект градиента текста.

Мы используем свойство background-clip и устанавливаем text-fill-color на прозрачный.

Фон-клип гарантирует, что градиент идет поверх текста, а заливка текста заставит его выскочить насквозь.

  h2 {
 семейство шрифтов: Roboto, 'Helvetica Neue', Arial, sans-serif; 
 font-size: 6vmax; 
 цвет фона: # 5390d9; 
 background-image: linear-gradient (45deg, # 6930c3, # 5390d9); 
 -webkit-background-clip: текст; 
 -webkit-text-fill-color: прозрачный; 
 -moz-background-clip: текст; 
 -moz-text-fill-color: прозрачный; 
}  

Теперь мы получили этот потрясающий результат, взгляните на этот Codepen.

См. Pen eYdgOVg Криса Бонгерса (@rebelchris) на CodePen.

Вся эта установка не имеет полной поддержки, но элементы в наши дни поддерживаются довольно широко.

Я показал фоновый клип, так как это важная часть.

Спасибо за чтение, давайте подключимся! постоянная ссылка

Спасибо, что прочитали мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Facebook или Twitter.

10 Библиотеки градиентов CSS и веб-приложения для дизайнеров пользовательского интерфейса

Бесплатные онлайн-инструменты являются нормой для современных дизайнеров.Зачем изобретать велосипед, если можно сэкономить время с помощью бесплатного ресурса?

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

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

Панель инструментов вашего веб-дизайнера

Неограниченные загрузки: 500 000+ веб-шаблонов, наборов значков, тем и дизайнерских материалов
От всего 16 долларов.50 / мес!

СКАЧАТЬ

Веб-градиенты

На веб-сайте WebGradients вы найдете множество настраиваемых градиентов на выбор.

Они бывают разных цветов и стилей, но все они уже собраны и готовы к работе. Думайте об этом как о библиотеке градиентов, в которой всего более 180 вариантов .

Если вы посмотрите в верхней части навигации, вы найдете ссылки для загрузки этих градиентов как в PSD, так и в файле Sketch.

Или вы можете скопировать градиенты как код CSS3, а затем добавить их прямо на свой сайт. Здесь нет неправильных ответов — просто много градиентов.

Градиентные кнопки

Если вы веб-дизайнер, то знаете, насколько болезненно бывает подбирать цвета. Это становится еще сложнее, когда вы пытаетесь сопоставить градиенты.

Войдите в GradientButtons, бесплатную библиотеку с открытым исходным кодом, до краев наполненную великолепным дизайном кнопок.

Библиотека очень проста в использовании и содержит множества градиентов на выбор.

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

uiGradients

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

В верхней части навигации (слева) вы увидите кнопку с надписью «показать все градиенты». Выберите его, чтобы просмотреть массивный список различных стилей градиента.Серьезно, их много.

Выберите тот, который вам нравится, а затем скопируйте код для использования на своем сайте. Вы также можете загрузить градиент в виде файла .jpg прямо с панели инструментов (расположенной в правом верхнем углу).

Аниматор градиента

Итак, градиентная анимация. Теперь это вещь. И инструмент Gradient Animator — идеальный способ воплотить это в жизнь. Все может работать прямо через CSS3 без необходимости в JavaScript.

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

Вы быстро поймете преимущества этого инструмента.

Редактор градиентов Colorzilla

К настоящему времени каждый веб-дизайнер должен знать о редакторе градиентов Colorzilla.

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

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

Градиенты CSS

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

Вы получаете доступ ко всему исходному коду и множеству стилей градиента (линейный, радиальный и т. Д.).

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

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

Градиент ColorSpace

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

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

С помощью чего-то вроде Colorzilla вы можете сложить несколько цветов вместе для одного массивного градиента.

Это не означает, что ColorSpace — плохой инструмент. Но лучше всего его использовать для простых градиентов.

Бесконечные градиенты

С другой стороны, у нас есть бесконечные градиенты. И да, это именно то, на что это похоже.

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

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

Если вы хотите узнать больше, есть страница «О нас».

Полифилл с коническим градиентом

В спецификациях W3C есть некоторые подробности о конических градиентах, но они не широко поддерживаются современными стандартами CSS3.

Введите этот полифилл, разработанный для решения проблемы. Это удобный инструмент с открытым исходным кодом, созданный разработчиком Леа Веру, который заставляет conic-gradient () поддерживать через полифилл.

Хотя это не самый популярный инструмент для создания градиентов, он решает настоящую проблему для веб-дизайнеров.

Крошечный градиент

TinyColor — это аккуратная библиотека JS, которая обрабатывает манипуляции с цветом и редактирование в библиотеке кода. Разработчик Дэмиен Сорел взял эту библиотеку и построил поверх нее опцию TinyGradient.

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

Градиенты поддерживают цвета RGB или HSV. Кроме того, вы получите много возможностей управления с помощью этой крошечной, но мощной библиотеки цветов.

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

Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

TailwindCSS Gradients

По состоянию на Tailwind 1.7, вы можете создавать градиенты без единой строчки CSS 🎨. В этом уроке я покажу вам, как легко добавлять градиенты в ваши проекты с помощью Tailwind.

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

Начальный цвет

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

Обратите внимание на приведенный выше код, у нас также есть еще один служебный класс с именем .bg-gradient-to-r ; это должно быть включено, чтобы градиенты работали. Этот класс сообщит нашему элементу, что мы хотим, чтобы фоновый градиент от до переходил к полету r .

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

В приведенном выше примере наш градиент течет вправо .from-blue-600 , на прозрачный фон. Вместо прозрачного фона мы можем указать цвет , конец .

Конечный цвет

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

И мы бы получили следующий градиентный фон:

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

Средний цвет

Чтобы указать средний цвет в нашем градиенте, мы можем использовать класс .via- , например:

И мы бы получили следующий градиентный фон:

Если сформулировать это как предложение, его будет легче запомнить. «Я хочу, чтобы мой фоновый градиент переходил к потоку к r ight, и я хочу, чтобы он был от синего, через бирюзового, от до фиолетового.«

В предыдущем примере мы использовали .bg-gradient-to-r ; однако есть несколько направлений, по которым вы можете захотеть течь градиентом.

Направление градиента

В дополнение к переходу вашего градиента к r ight, вы также можете использовать следующие классы.

• .bg-gradient-to-t от дна до т op
• .bg-gradient-to-r от слева до r на полете
• .bg-gradient-to-bottom от вверху до b ottom
• .bg-gradient-to-l от справа до l eft

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

Есть еще несколько направлений, в которых вы можете создать диагональный градиент. Для этого вы можете использовать следующее:

• .bg-gradient-to-tr от внизу слева до t op r ight
• .bg-gradient-to-br от вверху слева до b ottom r right
• .bg-gradient-to-bl от вверху справа до b ottom l eft
• .bg-gradient-to-tl от справа внизу до t op l eft

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

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

Текстовые градиенты

Вы также можете применять градиенты к своим текстовым элементам, используя служебный класс .bg-clip-text .

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

  

    Скалы попутного ветра!

  

Обратите внимание, что нам также необходимо использовать класс .text-transparent ; в противном случае цвет текста будет располагаться поверх нашего градиента.

Взгляните на пример нашего текстового градиента.

Это слишком круто! 🍻

Заключение

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

Надеюсь, эта статья оказалась для вас полезной, и пусть градиентная сила будет с вами. 🤓