Как использовать тени коробки в качестве фона смахивания при наведении курсора

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень.

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как использовать тени блоков в качестве фона при наведении курсора. Мы рассмотрим три разных примера, которые потрясающе выглядят на домашней странице Personal Stylist Layout Pack, но ваши возможности поистине безграничны. Мы шаг за шагом воссоздадим каждый фон смахивания, используя только встроенные параметры Divi.

Давайте приступим к делу!

Предварительный просмотр

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

Пример # 1

Пример # 2

Пример # 3

Загрузите домашнюю страницу пакета макетов личного стилиста на новую страницу

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

Воссоздать пример №1

Цвет тени блока кнопок

Приступим к воссозданию первого примера! Этот пример поможет вам выделить раздел героя. Первое, что вам нужно сделать, это открыть модуль кнопок, который вы можете найти в первом столбце, и изменить цвет тени блока. Мы делаем это, чтобы убедиться, что цвет хорошо сочетается с розовой тенью прямоугольника, которую мы добавляем при наведении курсора.

Настройки раздела

Цвет фона по умолчанию

Продолжите, открыв настройки раздела. Убедитесь, что цвет фона по умолчанию остается прежним.

• Цвет фона: # 2a2a2a

Цвет фона при наведении

Измените фон при наведении.

• Цвет фона: #ffffff

Тень бокса по умолчанию

Продолжите, добавив в раздел тень по умолчанию.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: rgba (255,137,159,0.82)
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените горизонтальное положение тени блока. Добавьте любое значение выбора.

• Горизонтальное положение тени блока: 800 пикселей

Если вы хотите, чтобы эффект смахивания отображался сверху вниз, вы можете вместо этого изменить вертикальное положение тени блока.

• Положение прямоугольной тени по вертикали: 650 пикселей

Переходы

И последнее, но не менее важное: уменьшите продолжительность перехода на расширенной вкладке, чтобы создать быстрый переход между цветом фона и фоном смахивания тени прямоугольника.

• Продолжительность перехода: 200 мс
• Кривая скорости перехода: легкость

Воссоздать пример №2

Изменить первый текстовый модуль

Настройки текста при наведении

Переходим к следующему примеру! Откройте текстовый модуль, который вы можете найти в первом столбце, и измените цвет текста при наведении курсора.

• Цвет текста: светлый

Граница при наведении

Продолжайте, изменяя цвет границы при наведении курсора на вкладку дизайна.

• Цвет границы: rgba (255,137,159,0,82)

Тень бокса по умолчанию

Затем перейдите к настройкам тени блока и добавьте тень блока по умолчанию.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: rgba (255,137,159,0.82)
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените горизонтальное положение при наведении.

• Горизонтальное положение тени блока: 520 пикселей

Переходы

И последнее, но не менее важное: увеличьте продолжительность перехода на расширенной вкладке, чтобы создать плавный переход.

• Продолжительность перехода: 700 мс
• Кривая скорости перехода: легкость

Скопировать и вставить стили модуля в третий текстовый модуль

Мы используем те же стили модуля и для третьего текстового модуля. Чтобы сэкономить время, мы просто скопируем стили модуля первого текстового модуля и вставим их в третий текстовый модуль.

Изменить второй текстовый модуль

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

Однако второй текстовый модуль немного отличается. Откройте модуль и перейдите в настройки текста. Единственное, что вам нужно сделать, это изменить цвет текста при наведении курсора.

• Цвет текста: светлый

Граница при наведении

Продолжите, перейдя к настройкам границы и изменив цвет границы при наведении.

• Цвет границы: rgba (255,137,159,0,82)

Тень бокса по умолчанию

Пришло время добавить фон смахивания! Начните с добавления тени блока по умолчанию, используя следующие настройки:

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: rgba (255,137,159,0.82)
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените вертикальное положение тени блока при наведении курсора.

• Положение прямоугольной тени по вертикали: 500 пикселей

Переходы

И последнее, но не менее важное: также увеличьте продолжительность перехода этого текстового модуля.

• Продолжительность перехода: 700 мс
• Кривая скорости перехода: легкость

Воссоздать пример №3

Изменить настройки строки

Размеры

Переходим к следующему и последнему примеру! Начните с открытия настроек строки и внесите некоторые изменения в настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2

Интервал

Продолжите, также добавив к строке несколько пользовательских отступов.

• Левое заполнение: 10vw
• Правое заполнение: 10vw
• Поле слева в столбце 2: 15vw (рабочий стол), 0vw (планшет и телефон).

Тень бокса по умолчанию

Затем добавьте к строке тень блока по умолчанию.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: # ff899f
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените горизонтальное положение при наведении.

• Горизонтальное положение тени блока: 50 пикселей

Переходы

Мы также меняем длительность перехода и задержку перехода на вкладке «Дополнительно».

• Продолжительность перехода: 1000 мс
• Задержка перехода: 700 мс
• Кривая скорости перехода: легкость

Изменить настройки раздела

Удалить размер

После того, как вы закончите изменять настройки строки, откройте настройки раздела. Перейдите на вкладку «Дизайн» и сбросьте ширину, щелкнув правой кнопкой мыши и выбрав «Сброс».

Удалить границу

Проделайте то же самое с шириной границы.

Тень бокса по умолчанию

Продолжите, добавив тень окна по умолчанию.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Цвет тени: # 2a2a2a
• Положение тени коробки: внутренняя тень

Hover Box Shadow

Измените горизонтальное положение тени блока при наведении курсора.

• Горизонтальное положение тени блока: 60 ​​пикселей

Переходы

А чтобы закончить дизайн, увеличьте продолжительность перехода в расширенной вкладке.

• Продолжительность перехода: 1000 мс

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз рассмотрим три различных примера, которые мы воссоздали шаг за шагом.

Пример # 1

Пример # 2

Пример # 3

Последние мысли

В этом посте мы показали вам, как использовать тени блоков в качестве фона для смахивания только с помощью встроенных опций Divi. Это руководство является частью нашей текущей инициативы по дизайну Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов. Мы надеемся, что этот урок вдохновит вас на уникальное и творческое использование теней блоков. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!