Тени и border

iziToast предоставляет гибкий набор опций для стилизации уведомлений, включая работу с тенями и границами. Эти параметры позволяют создавать визуально выразительные уведомления, подчёркивающие важность сообщения или гармонирующие с дизайном сайта.

Параметр boxShadow

boxShadow управляет тенью всего уведомления. Его значение передается в виде строки CSS, аналогичной свойству box-shadow.

Примеры использования:

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление с тенью',
    boxShadow: '0 4px 12px rgba(0,0,0,0.25)'
});

Ключевые моменты:

  • Значение поддерживает стандартный синтаксис CSS: offsetX offsetY blurRadius color.
  • Можно задавать множественные тени через запятую.
  • Тень применяется только к контейнеру уведомления, не к кнопкам или иконкам внутри него.

Параметр border

Для управления рамкой уведомления используется объект border, который позволяет задать цвет, ширину и стиль:

iziToast.show({
    title: 'Предупреждение',
    message: 'Уведомление с границей',
    border: {
        color: '#FF0000',
        width: 2,
        style: 'solid'
    }
});

Описание свойств:

  • color – цвет рамки. Можно использовать HEX, RGB или ключевые слова CSS.
  • width – толщина рамки в пикселях.
  • style – стиль рамки: solid, dashed, dotted и другие стандартные CSS-значения.

Комбинирование теней и границ

boxShadow и border можно использовать одновременно, создавая более выразительный эффект уведомления:

iziToast.show({
    title: 'Успех',
    message: 'Сообщение с границей и тенью',
    boxShadow: '0 6px 20px rgba(0,0,0,0.35)',
    border: {
        color: '#4CAF50',
        width: 3,
        style: 'solid'
    }
});

Особенности:

  • Тень визуально отделяет уведомление от фона.
  • Граница придает четкость и структуру.
  • Цвет и интенсивность тени можно подстраивать под цвет фона сайта.

Работа с границами отдельных сторон

iziToast позволяет управлять отдельными сторонами рамки через CSS-переменные в параметре border:

iziToast.show({
    title: 'Стороны границы',
    message: 'Граница только сверху и снизу',
    border: {
        top: { color: '#2196F3', width: 2, style: 'solid' },
        bottom: { color: '#2196F3', width: 2, style: 'solid' },
        left: null,
        right: null
    }
});
  • Значение null отключает границу для соответствующей стороны.
  • Позволяет создавать уникальные эффекты рамок без дополнительного CSS.

Анимация тени и границы

iziToast поддерживает плавное появление и исчезновение уведомлений, поэтому тени и границы естественно анимируются вместе с элементом. Для усиления визуального эффекта можно использовать кастомные CSS-анимации:

.iziToast {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
  • Параметры transition позволяют контролировать скорость и стиль появления тени и изменения цвета границы.
  • Можно комбинировать с динамическими изменениями через Jav * aScript:
let toast = iziToast.show({
    title: 'Динамика',
    message: 'Меняем цвет рамки',
    border: { color: '#FFC107', width: 2, style: 'solid' }
});

setTimeout(() => {
    toast.style.borderColor = '#FF5722';
}, 1500);

Рекомендации по использованию

  • Для легких уведомлений выбираются мягкие тени и тонкие рамки.
  • Важные сообщения можно выделять более яркой границей и контрастной тенью.
  • При использовании темных фонов следует увеличивать непрозрачность тени для лучшей читаемости.
  • Границы и тени должны гармонировать с общим стилем сайта, не создавая визуального шума.

Тонкая настройка теней и границ позволяет создавать уведомления, которые выглядят современно, аккуратно и легко воспринимаются пользователем, обеспечивая визуальное разграничение контента и акцент на ключевых событиях.

Оглавление