Тени

Тени (Shadows) добавляются снаружи или внутри границы элемента. Тени можно использовать для придания фокуса или глубины секциям, Div-блокам, кнопкам, картинкам или любому другому элементу.

Добавление теней разных типов

Для добавления элементу тени:

  • Выберите элемент на Холсте или на вкладке Слои левой панели

  • Найдите на вкладке Стилей правой панели раздел Внешний вид и нажмите кнопку “+” справа от параметра Тени (Shadows):

Добавить тень

По умолчанию будет добавлена Внешняя тень (Drop Shadow) с предустановленными параметрами.

Внешняя тень

Вы также можете изменить тип тени на внутреннюю. Для этого кликните на ее название и выберите из списка Внутреннюю тень (Inner Shadow).

Выбор внутренней тени

Настройки тени

Для редактирования настроек тени кликните по кнопке слева от ее названия.

Открыть параметры тени

В окне настроек тени имеются следующие параметры:

Параметры тени

  • Направление тени. Значение сдвига тени по оси x и y. Значения можно задавать в px, em, rem, vw, vh. Они могут быть как положительными, так и отрицательными.

  • Размытие (Blur). Параметр влияет на то, насколько сфокусировано размытие тени. Значение можно задавать в px, em, rem, vw, vh.

  • Размах (Spread). Визуально уменьшает или увеличивает тень. Значение можно задавать в px, em, rem, vw, vh. Оно могут быть как положительными, так и отрицательными.

  • Цвет. Цвет и непрозрачность тени.

Многослойные тени

Можно наложить на элемент несколько теней, добавив несколько слоев эффекта (используйте значок "+"). Вы можете также переключать видимость каждого слоя, выбирая значок "глаза", и удалять слой с помощью значка "-". Чтобы изменить порядок слоев теней, перетащите слой с помощью значка слева от его названия.

Перетащить слой тени

Создание границы с помощью теней

Многослойные тени позволяют создавать уникальные визуальные эффекты.

!!! Пример: создание тонкой рамки с тенью

!!!

1-й слой тени — граница рамки:

  • Добавьте внешнюю тень и установите Направление по осям x и y и Размытие равными 0px, а Размах 1px.

  • Установите цвет тени - черный с непрозрачностью 20%.

2-й слой тени — тень рамки:

  • Добавьте вторую внешнюю тень. Установите Направление по осям x и y 2px, Размытие 1px, а Размах 2px.
  • Установите цвет черный с непрозрачностью 20%.

Рамка с тенью

Граница, созданная с помощью тени, не влияет на размер элемента и на контент рядом с ним.

Тени с плавным переходом

При создании теней для разных состояний элемента рекомендуется добавлять Переходы (Transition), чтобы взаимодействие было плавным. Например, добавив элементу тень при наведении курсора, вы получите резкое переключение эффекта при наведении. Добавьте эффект Перехода, чтобы тень появлялась и затухала плавно. Это можно сделать в разделы Внешний вид, нажав “+” рядом с параметром Переходы (Transitions).

Добавить переход