Цвета и прозрачность
Настройки цвета используются для стилизации фона элементов, их границ, а также цвета текста. Для установки цвета для каждого из этих свойств нужно выбрать соответствующий раздел на вкладке Стилей правой панели - Фон, Границы или Текст.
Для установки цвета:
- Найдите нужный раздел стилей на вкладке Стилей правой панели (Фон, Границы или Текст для текстового элемента)
- Кликните по текущему цвету
- Установите нужный цвет в открывшемся окне
Способы выбора цвета:
- Ввод значения цвета в поле
- С помощью панели цвета и ползунка
- С помощью средства выбора цвета пипетка (color picker)
Значения цвета можно установить, введя его в поле одним из 3 способов:
- В формате Hex. 6-значный код цвета, состоящий из цифр и/или букв. Например, 000000 - черный цвет, FFFFFF - белый.
- В формате RGB. 3-значный цифровой код цвета, каждая цифра которого имеет значение от 0 до 255 и соответствует одному из трех цветов - красному, зеленому и синему.
- Название цвета. Название цвета может быть одним из стандартных HTML цветов. Например, black, green, darkblue и т.д.
Выбрав значение цвета, вы можете задать его прозрачность, введя в поле рядом число от 0 до 100%.
Выберите нужный цветовой спектр с помощью ползунка, а затем на панели цвета выберите нужных цвет. Прозрачность цвета можно отрегулировать с помощью ползунка прозрачности.
Вы можете настроить цвет, выбрав в качестве образца любой цвет, который есть на Холсте. Это может быть цвет фона другого элемента или цвет фрагмента изображения на вашем сайте.
Для этого:
- Кликните на иконку пипетки:
- Переведите курсор мыши на Холст. Курсор примет вид прицела, который позволяет захватить нужный цвет. Рядом с ним вы увидите лупу с увеличенным фрагментом и значением текущего цвета в формате Hex.
- Передвигайте курсор по Холсту до выбора нужного цвета, а затем кликните в выбранном месте левой кнопкой мыши.
Вы можете сохранять цвета для последующего использования их в проекте. Для этого:
- Выберите нужный цвет и нажмите кнопку “+” в параметре Сохраненные цвета (Saved Colors):
- Напишите название цвета и нажмите кнопку Сохранить. Вы можете оставить в качестве названия Hex-код цвета, написать название цвета или описать, какую роль этот цвет выполняет в проекте (например, текст или основной цвет).
В дальнейшем вы можете редактировать сохраненный цвет, нажав на иконку шестеренки рядом с ним, или удалить, нажав на иконку корзины.
В проекте также сохраняются недавно использованные цвета. Чтобы установить один из них, нажмите на выпадающий список в параметре Сохраненные цвета и выберите Недавно использованные цвета (Last Used Colors):
В открывшемся списке выберите нужный цвет:
Помимо прозрачности цвета (для фона, границ или текста) вы можете установить значение прозрачности для всего элемента целиком. Эта настройка используется, если нужно применить прозрачность не к отдельным свойствам элемента (например, фону), а ко всему элементу и его дочерним элементам.
Настройка прозрачности влияет на прозрачность как самого элемента, так и его дочерних элементов.
Прозрачность можно применять для создания визуальных эффектов. Например, можно менять видимость элемента при наведении на него курсора мыши.
Установить прозрачность можно на вкладке Стилей правой панели в разделе Размер.
Она может принимать значение от 100% (полностью непрозрачный) до 0% (полностью прозрачный).
При установке значения 0% элемент становится полностью невидимым, но при этом продолжает занимать выделенное ему место на странице (в отличие от установки параметра отображения Display: None, когда элемент полностью пропадает со страницы, освобождая занимаемое им место).