Розширений інструмент налаштування кольорів Pixpa дозволяє покращити візуальну привабливість вашого веб-сайту, застосовуючи суцільні кольори, лінійні градієнти та радіальні градієнти до розділів та тексту.
Це забезпечує вам високий рівень творчого контролю під час розробки фону, заголовків та тексту абзаців вашого сайту.
У цій статті:
- Доступ до панелі кольорів
- Варіанти типу кольору
- Градієнтні зупинки
- Повзунок обертання
- Параметри форми радіального градієнта
- Вибір кольору та введення шістнадцяткового коду
- Повзунок непрозорості
- Де можна використовувати параметри кольору
Доступ до панелі кольорів
- Наведіть курсор на розділ, який потрібно редагувати, і натисніть на нього Кольоровий стиль (1).
- Тут ви побачите опцію зміни кольору фону, кольору тексту заголовка та кольору абзацу.
- Натисніть на Спеціальний колір (2) опцію поруч з елементом, який потрібно редагувати.
- Новий відкриється спливаюче вікно звідки ви можете налаштувати колір для вибраного елемента.
Варіанти типу кольору
У верхній частині панелі кольорів ви побачите три варіанти:
- Суцільний: Застосуйте один, рівномірний колір до вибраної області. Це простий, зрозумілий варіант для користувачів, які бажають отримати узгоджений кольоровий блок.
- Лінійний градієнт: Створює поступовий перехід між двома або більше кольорами вздовж прямої лінії. Ви можете керувати напрямком цього градієнта за допомогою повзунка обертання.
- Радіальний градієнт: Створює круговий перехід кольору, що розходиться від центральної точки. Це ідеально підходить для створення ефектів у стилі прожектора або для привернення уваги до певної області.
Градієнтні зупинки
Коли ви обираєте будь-який з них Лінійний or Радіальний градієнт, ви побачите горизонтальну кольорову шкалу, де можна керувати зупинками градієнта:
- Кожен градієнтна зупинка (позначено значком краплі) позначає кольорову точку в градієнті.
- Клацніть на зупинці, щоб змінити її колір за допомогою засобу вибору кольору або ввівши шістнадцятковий код.
- Ти можеш додати декілька зупинок для створення плавних багатоколірних переходів.
- Натисніть маленький значок «x» нижче упору, щоб зняти його.
Повзунок обертання (лише для лінійного градієнта)
Для лінійних градієнтів використовуйте повзунок повороту, щоб змінити кут градієнта. Це дозволяє повертати напрямок кольору з горизонтального (0°) на вертикальний (90°) або під будь-яким власним кутом до 360°.
- Попередній перегляд градієнта змінюватиметься в режимі реального часу під час переміщення повзунка.
- Поточний кут відображається в числовому полі поруч із повзунком (наприклад, 270°).
Параметри форми радіального градієнта
При виборі Радіальний градієнт (1), під попереднім переглядом градієнта з’являться два варіанти форми:
- Еліпс: Створює витягнутий радіальний градієнт з горизонтальним або вертикальним розтягуванням. Це корисно для ширшого градієнтного покриття або асиметричних дизайнів.
- Коло: Це створює ідеально круглий градієнт, що розходиться від центру (або вибраної фокусної точки). Ідеально підходить для фонів у стилі прожектора або для привернення уваги до центрального елемента.
Вибір кольору та введення шістнадцяткового коду
Незалежно від того, чи працюєте ви із суцільним кольором, чи з окремими градієнтними зупинками:
- Ввімкніть кнопку колір обличчя візуально вибрати колір.
- Або ж введіть шістнадцятковий код кольору вручну (наприклад, #c14dff) для точного керування кольором.
Якщо ви використовуєте градієнт, вибір точки дозволяє визначити її певний колір за допомогою цього інструмента.
Повзунок непрозорості
Унизу панелі ви знайдете повзунок для керування непрозорістю:
- Встановіть рівень прозорості вибраного кольору або градієнтної точки.
- Значення 1 означає повну непрозорість, тоді як 0 – повну прозорість.
Це корисно для створення багатошарових візуальних ефектів або м’яких фонових накладень.
Де можна використовувати ці варіанти кольорів
Ці розширені інструменти для роботи з кольором доступні в таких областях:
- Фон розділу
- Текст заголовка
- пункт Текст
Кожна область має власну вкладку кольору, тому ви можете стилізувати різні компоненти незалежно для більшої візуальної гнучкості.