Тени

Тени (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).