Эффекты CSS позволяют изменить внешний вид элементов или задать параметры их наложения друг на друга. Эти эффекты можно переопределить или сделать анимированными с помощью правил обработки мультимедиа.
Выбрав один элемент, вы сможете настроить его внешний вид на панели Эффекты CSS. Если ее нет в рабочей области, включите нужный параметр в меню Окно.
Учтите, что эффекты CSS нельзя применять к маскам.
Режимы наложения
Эти режимы определяют, как содержимое элемента и его фон влияют друг на друга с учетом их тона, насыщенности и яркости.
Чтобы применить режим наложения, сделайте следующее:
- Выберите нужный элемент.
- На панели Эффекты CSS нажмите на подходящий пункт в раскрывающемся списке Режимы наложения.
Попробуйте применить разные варианты, чтобы посмотреть, как они повлияют на внешний вид. Если вам не удалось получить нужный визуальный эффект, проверьте, находится ли выбранный элемент поверх тех, с которыми вы хотите его совместить.
Список режимов наложения
- Обычный (без эффекта). Наложение не применяется.
- Цвет. Используется тон и насыщенность цвета элемента, а свечение берется от цвета фона.
- Затемнение основы. Цвет фона инвертируется, его значение делится на значение цвета элемента, а затем результат снова инвертируется.
- Осветление основы. Значение цвета фона делится на значение инвертированного цвета элемента.
- Замена темным. Используется цвет элемента или фона. Это зависит от того, который из них темнее.
- Разница. Из значения более светлого цвета вычитается значение более темного.
- Исключение. Действует так же, как режим Разница, но в результате получается менее контрастный цвет.
- Направленный свет. Если цвет элемента темнее, чем цвет фона, применяется режим Умножение, а если наоборот – Осветление.
- Тон. Используется тон цвета элемента, а насыщенность и свечение берутся от цвета фона.
- Замена светлым. Используется цвет элемента или фона. Это зависит от того, который из них светлее.
- Свечение. Используется свечение цвета элемента, а тон и насыщенность берутся от цвета фона.
- Умножение. Перемножаются значения цвета элемента и фона.
- Перекрытие. Если цвет элемента светлее, чем цвет фона, применяется режим Умножение, а если наоборот – Осветление.
- Насыщенность. Используется насыщенность цвета элемента, а тон и свечение берутся от цвета фона.
- Осветление. Цвета элемента и фона инвертируются, их значения перемножаются, а затем результат снова инвертируется.
- Рассеянный свет. Действует так же, как режим Направленный свет, но эффект получается более мягким.
Фильтры
Фильтры позволяют добавить к элементам визуальные эффекты, например размытие или тень, с помощью CSS.
В видеодокументах и графических объявлениях с помощью инструмента заставки можно применить фильтры CSS к области за элементом.
Как добавить фильтр
Чтобы применить новый фильтр, сделайте следующее:
- Выберите нужный элемент.
- На панели Эффекты CSS нажмите кнопку
Добавить фильтры.
- Выберите подходящий фильтр. Доступны следующие варианты:
- При необходимости измените параметры фильтра. Подробные сведения о настройке вы найдете ниже.
Добавить фильтры.Если к одному элементу применено несколько фильтров, их порядок можно изменить.
Список фильтров
РазмытиеК элементу применяется размытие.
Параметры настройки
- Радиус. Позволяет задать радиус размытия. Может принимать значения от 0 до 100 пикс.
Позволяет изменить яркость элемента.
Параметры настройки
- Процент. Если задать значение 0 %, элемент станет черным, если 100 % – он не изменится. Максимальная величина – 1000 %.
Позволяет изменить контраст элемента.
Параметры настройки
- Процент. Если задать значение 0 %, элемент станет серым, если 100 % – он не изменится. Максимальная величина – 1000 %.
Позволяет добавить к элементу тень.
Параметры настройки
- X-смещение. Позволяет задать расстояние до тени по горизонтали. Допустимые значения: от -100 до 100 пикс.
- Y-смещение. Позволяет указать расстояние до тени по вертикали. Допустимые значения: от -100 до 100 пикс.
- Радиус. Позволяет настроить радиус размытия тени. Допустимые значения: от 0 до 100 пикс.
- Цвет. Позволяет выбрать цвет тени.
Позволяет заменить цвета элемента на оттенки серого.
Параметры настройки
- Процент. Если задать значение 0 %, элемент не изменится, если 100 % – его цвета будут полностью замещены оттенками серого.
Позволяет изменить цвета элемента.
Параметры настройки
- Угол. Количество градусов, на которое нужно переместиться по цветовому кругу. Может принимать значения от 0 до 360°.
Позволяет заменить цвета элемента на противоположные.
Параметры настройки
- Процент. Если задать значение 0 %, элемент не изменится, если 100 % – его цвета будут полностью инвертированы.
Позволяет изменить прозрачность элемента.
Параметры настройки
- Процент. Если задать значение 0 %, элемент станет полностью прозрачным, если 100 % – он не изменится.
Позволяет изменить насыщенность элемента.
Параметры настройки
- Процент. Если задать значение 0 %, элемент полностью потеряет насыщенность, если 100 % – он не изменится. Максимальная величина – 1000 %.
Позволяет заменить цвета элемента на оттенки сепии.
Параметры настройки
- Процент. Если задать значение 0 %, элемент не изменится, если 100 % – его цвета будут полностью замещены оттенками сепии.
Как изменить порядок фильтров
Если к одному элементу добавлено несколько фильтров, они применяются в том порядке, в котором перечислены на панели Эффекты CSS.
Чтобы изменить порядок фильтров, сделайте следующее:
- Наведите указатель мыши на название нужного фильтра. Появится значок с тремя точками
.
- Используя этот значок в качестве маркера, перетащите фильтр на нужное место.
Как скрыть фильтр
Фильтр можно скрыть. В этом случае его эффект не будет виден в рабочей области или при предварительном просмотре и не появится в опубликованных файлах.
Чтобы скрыть фильтр, сделайте следующее:
- Наведите указатель мыши на название нужного фильтра.
- Нажмите на значок Скрыть
.
- Чтобы отменить это действие, выберите значок Показать
.
Параметры скрытых фильтров нельзя изменить.
Как удалить фильтр
Для этого сделайте следующее:
- Наведите указатель мыши на название нужного фильтра.
- Нажмите на значок Удалить
.