Динамические тени с использованием CSS | Руководства по веб-дизайну

Введение

В этом практическом занятии мы изучим, как создавать динамические тени с использованием CSS. Вы научитесь использовать псевдо-элемент ::after и различные свойства CSS, такие как background, filter, opacity и z-index, чтобы создать эффект, который имитирует тень от коробки, но основан на цветах самого элемента. В конце этого практического занятия вы сможете добавить дополнительный уровень глубины и трехмерности в свои дизайны.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35194{{"Создание динамических тени с использованием CSS"}} css/colors -.-> lab-35194{{"Создание динамических тени с использованием CSS"}} css/width_and_height -.-> lab-35194{{"Создание динамических тени с использованием CSS"}} css/positioning -.-> lab-35194{{"Создание динамических тени с использованием CSS"}} css/backgrounds -.-> lab-35194{{"Создание динамических тени с использованием CSS"}} css/pseudo_elements -.-> lab-35194{{"Создание динамических тени с использованием CSS"}} end

#Динамическая тень

В ВМ уже предоставлены index.html и style.css.

Чтобы создать тень, основанную на цветах элемента, следуйте шагам:

Используйте псевдо-элемент ::after с position: absolute и width и height, установленными в 100%, чтобы заполнить доступное пространство в родительском элементе.
Наследуйте background родительского элемента, используя background: inherit.
Немного смещайте псевдо-элемент с использованием top. Затем используйте filter: blur() для создания тени и установите opacity, чтобы сделать ее полупрозрачной.
Разместите псевдо-элемент позади своего родителя, установив z-index: -1. Установите z-index: 1 на родительском элементе.

Вот пример кода HTML и CSS:

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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