Создайте тени коробки с помощью CSS

Введение

В этом практическом занятии вы изучите мощный CSS-свойство box-shadow и научитесь создавать визуально привлекательные теневые эффекты для веб-элементов. С помощью последовательного подхода вы поймете основную синтаксис теней коробок, примените базовые и продвинутые техники создания теней и узнаете, как настроить свойства теней, чтобы повысить глубину и визуальный интерес HTML-элементов.

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

Изучите синтаксис тени коробки

В этом шаге вы узнаете основы синтаксиса CSS box-shadow и как они могут добавить глубину и визуальный интерес к веб-элементам. Свойство box-shadow - это мощный CSS-фич, позволяющий создавать теневые эффекты для HTML-элементов.

Давайте начнём с создания нового HTML-файла для изучения синтаксиса box-shadow. Откройте WebIDE и создайте файл с именем index.html в директории ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Basic box-shadow syntax */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Разберём синтаксис box-shadow:

5px: Горизонтальное смещение (сдвигает тень вправо)
5px: Вертикальное смещение (сдвигает тень вниз)
10px: Радиус размытия (придает тени размытый вид)
rgba(0, 0, 0, 0.3): Цвет тени с прозрачностью

Базовый синтаксис: box-shadow: [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [цвет]

Пример отображения коробки с тенью:

+------------------------+
|                        |
|    [Серая коробка с    |
|     мягкой тенью]      |
|                        |
+------------------------+

Основные моменты, которые стоит запомнить:

Положительные значения смещения сдвигают тень вправо и вниз
Отрицательные значения смещения сдвигают тень влево и вверх
Радиус размытия размывает края тени
Можно использовать имена цветов, шестнадцатеричные коды, RGB или RGBA значения

Примените базовую тень коробки к div

В этом шаге вы узнаете, как применить базовую тень коробки к элементу div, основываясь на синтаксисе, изученном на предыдущем шаге. Мы изменим существующий HTML-файл, чтобы продемонстрировать разные теневые эффекты.

Откройте файл index.html в WebIDE и обновите его содержимое следующим кодом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Light shadow */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Darker shadow */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

Разберём применение тени коробки:

Мы создали два элемента div с разной интенсивностью тени
.light-shadow использует незначительную тень с:
- 5px горизонтальным смещением
- 5px вертикальным смещением
- 10px радиусом размытия
- Светло-черным цветом с 20% непрозрачностью
.dark-shadow использует более заметную тень с:
- 10px горизонтальным смещением
- 10px вертикальным смещением
- 15px радиусом размытия
- Темно-черным цветом с 50% непрозрачностью

Пример визуального вывода:

+------------------------+------------------------+
|                        |                        |
|   [Light Shadow Box]   |   [Dark Shadow Box]    |
|                        |                        |
+------------------------+------------------------+

Основные наблюдения:

Увеличение значений смещения сдвигает тень дальше от элемента
Увеличение радиуса размытия делает тень мягче
Изменение непрозрачности изменяет интенсивность тени

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

В этом шаге вы изучите расширенные варианты настройки тени коробки, включая вложенные тени, радиус распространения и вариации цвета. Мы обновим файл index.html, чтобы продемонстрировать эти продвинутые свойства.

Откройте файл index.html в WebIDE и замените его содержимое следующим кодом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Customized Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Inset shadow */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Spread radius */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Colored shadow */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

Рассмотрим новые настройки тени коробки:

Вложенная тень:
- Использует ключевое слово inset для создания внутренней тени
- Даёт эффект того, что элемент нажат или врезан
- Синтаксис: box-shadow: inset [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [цвет]
Радиус распространения:
- Добавляет дополнительное значение для расширения тени
- Четвёртое числовое значение контролирует распространение тени
- В примере 10px распространение создаёт границу тени с оттенком синего
Закрашенная тень:
- Использует RGBA для создания закрашенных тени с прозрачностью
- Пример использует красную тень с 40% непрозрачностью

Пример визуального вывода:

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Inset Shadow Box]     | [Spread Shadow Box]    | [Colored Shadow Box]   |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

Основные моменты:

inset создает внутреннюю тень
Радиус распространения расширяет тень
Используйте RGBA для закрашенных, прозрачных теней

Создайте круглую элемент с тенью

В этом шаге вы узнаете, как создать круглый элемент с тенью коробки с использованием свойств CSS border-radius и box-shadow. Откройте файл index.html в WebIDE и обновите его содержимое следующим кодом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* Create circular shape */
        border-radius: 50%;

        /* Add box shadow */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* Center content */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Optional: add text */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Circular Shadow</div>
    </div>
  </body>
</html>

Основные методы создания круглого элемента с тенью:

Круглая форма:
- Используйте border-radius: 50%, чтобы создать идеальную окружность
- Убедитесь, что ширина и высота равны
Тень коробки:
- Первая тень: 0 10px 20px rgba(0, 0, 0, 0.2)
  - Вертикальное смещение на 10px
  - Радиус размытия 20px
  - Нежный черный цвет с 20% непрозрачностью
- Вторая тень: 0 6px 6px rgba(0, 0, 0, 0.15)
  - Добавляет глубину с более близкой и мягкой тенью

Пример визуального вывода:

+------------------------+
|                        |
|    [Circular Element   |
|     with Soft Shadow]  |
|                        |
+------------------------+

Основные моменты:

border-radius: 50% создает идеальную окружность
Несколько теней коробки могут создать глубину
Настройте непрозрачность и размытие для получения нужного эффекта

Пробуйте разные эффекты тени

В этом шаге вы изучите продвинутые методы создания сложных теневых эффектов с использованием нескольких тени коробки. Откройте файл index.html в WebIDE и обновите его содержимое следующим кодом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Shadow Effects</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

      .card {
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;

        /* Multiple shadow effect */
        box-shadow: 
                /* Outer shadow */
          0 10px 20px rgba(0, 0, 0, 0.1),
          /* Inner shadow */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
          /* Colored accent shadow */ 0 15px 25px rgba(0, 123, 255, 0.2);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow:
          0 15px 30px rgba(0, 0, 0, 0.2),
          inset 0 -5px 10px rgba(0, 0, 0, 0.1),
          0 20px 35px rgba(0, 123, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Shadow Experiment</h2>
      <p>Hover to see shadow effect!</p>
    </div>
  </body>
</html>

Основные методы для множества теневых эффектов:

Слоистые тени:
- Первая тень: Нежная внешняя тень
- Вторая тень: Неприметная внутренняя тень
- Третья тень: Закрашенная акцентная тень
Композиция теней:
- 0 10px 20px rgba(0, 0, 0, 0.1): Нежная внешняя тень
- inset 0 -5px 10px rgba(0, 0, 0, 0.05): Неприметная внутренняя тень
- 0 15px 25px rgba(0, 123, 255, 0.2): Синяя акцентная тень
Эффект наведения:
- Увеличьте интенсивность тени при наведении
- Добавьте масштабирование для интерактивного ощущения

Пример визуального вывода:

+------------------------+
|                        |
|   [Card with Complex   |
|    Shadow Effects]     |
|                        |
+------------------------+

Основные моменты:

Объедините несколько теней для создания глубины
Используйте inset для внутренних теней
Создайте интерактивные эффекты при наведении

Резюме

В этом практическом занятии участники исследуют мощное свойство CSS box-shadow, которое позволяет создавать визуально привлекательную глубину и трехмерность для элементов веб-страницы. Изучив базовый синтаксис теней коробки, студенты узнают, как применять теневые эффекты с использованием горизонтального и вертикального смещений, радиуса размытия и параметров цвета, тем самым получая возможность улучшить визуальный дизайн элементов HTML.

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