Тень блока (box-shadow): Тренажер CSS

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

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

Список тем

Простая тень со смещением

Добавьте элементу `div` с классом `box` простую тень. Тень должна быть смещена на 5 пикселей вправо и на 10 пикселей вниз, без размытия и рассеивания, черного цвета.

CSS

.box {
  width: 150px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень */
  input1: 5px 10px #000;
}

                     .box {
  width: 150px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень */
  input1: 5px 10px #000;
}

HTML

<div class="box">
  Простой блок
</div>

Используйте свойство `box-shadow`. Первые два значения отвечают за смещение по горизонтали (X) и вертикали (Y). Положительные значения смещают тень вправо и вниз соответственно. Цвет можно указать в конце.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Тень со смещением и цветом

Примените к элементу `div` с классом `colored-box` тень серого цвета (`#888888`). Тень должна быть смещена на 8 пикселей вправо и на 8 пикселей вниз.

CSS

.colored-box {
  width: 120px;
  height: 120px;
  background-color: lightblue;
  margin: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте серую тень со смещением */
  input1: 8px 8px #888888;
}

                     .colored-box {
  width: 120px;
  height: 120px;
  background-color: lightblue;
  margin: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте серую тень со смещением */
  input1: 8px 8px #888888;
}

HTML

<div class="colored-box">
  Цветной блок
</div>

Свойство `box-shadow` принимает значения смещения по X и Y, а затем цвет тени. Убедитесь, что вы указали правильное свойство для добавления тени.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Тень со смещением и размытием

Добавьте элементу `div` с классом `blur-box` тень. Смещение тени: 6 пикселей по горизонтали и 6 пикселей по вертикали. Добавьте размытие тени радиусом 5 пикселей. Цвет тени - черный.

CSS

.blur-box {
  width: 180px;
  height: 90px;
  background-color: lightcoral;
  margin: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень со смещением и размытием */
  input1: 6px 6px 5px #000;
}

                     .blur-box {
  width: 180px;
  height: 90px;
  background-color: lightcoral;
  margin: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень со смещением и размытием */
  input1: 6px 6px 5px #000;
}

HTML

<div class="blur-box">
  Блок с размытой тенью
</div>

Для добавления размытия используйте третье значение в свойстве `box-shadow` (blur-radius). Оно указывается после значений смещения по X и Y.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Тень со смещением, размытием и цветом

Задайте элементу `div` с классом `full-shadow-box` тень со следующими параметрами: смещение 4px по X, 4px по Y, радиус размытия 8px, цвет тени `rgba(0, 0, 0, 0.5)` (полупрозрачный черный).

CSS

.full-shadow-box {
  width: 160px;
  height: 110px;
  background-color: lightgoldenrodyellow;
  margin: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень со смещением, размытием и цветом */
  input1: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

                     .full-shadow-box {
  width: 160px;
  height: 110px;
  background-color: lightgoldenrodyellow;
  margin: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень со смещением, размытием и цветом */
  input1: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

HTML

<div class="full-shadow-box">
  Полная тень
</div>

Свойство `box-shadow` принимает значения в порядке: смещение по X, смещение по Y, радиус размытия (blur-radius), цвет. Убедитесь, что вы используете правильное свойство.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Тень с рассеиванием

Добавьте элементу `div` с классом `spread-box` тень. Параметры: смещение 0px по X, 0px по Y, радиус размытия 10px, радиус рассеивания (spread) 5px, цвет тени `gray`.

CSS

.spread-box {
  width: 140px;
  height: 140px;
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень с размытием и рассеиванием */
  input1: 0 0 10px 5px gray;
}

                     .spread-box {
  width: 140px;
  height: 140px;
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте тень с размытием и рассеиванием */
  input1: 0 0 10px 5px gray;
}

HTML

<div class="spread-box">
  Тень с рассеиванием
</div>

Радиус рассеивания (spread-radius) указывается четвертым значением в `box-shadow`, после радиуса размытия. Положительное значение увеличивает размер тени.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Полная тень с рассеиванием

Создайте для элемента `div` с классом `full-spread-box` тень со всеми параметрами: смещение 5px по X, 5px по Y, размытие 15px, рассеивание 3px, цвет `#333`.

CSS

.full-spread-box {
  width: 200px;
  height: 80px;
  background-color: lightgreen;
  margin: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  /* Добавьте тень со всеми параметрами */
  input1: 5px 5px 15px 3px #333;
}

                     .full-spread-box {
  width: 200px;
  height: 80px;
  background-color: lightgreen;
  margin: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  /* Добавьте тень со всеми параметрами */
  input1: 5px 5px 15px 3px #333;
}

HTML

<div class="full-spread-box">
  Полная тень
</div>

Полная запись `box-shadow` включает: смещение X, смещение Y, размытие, рассеивание, цвет. Убедитесь, что используете правильное свойство.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Внутренняя тень (inset)

Добавьте элементу `div` с классом `inset-box` внутреннюю тень. Тень должна быть направлена внутрь элемента. Параметры: смещение 3px по X, 3px по Y, размытие 5px, цвет `#666`.

CSS

.inset-box {
  width: 180px;
  height: 120px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 40px;
  padding: 20px;
  box-sizing: border-box;
  /* Добавьте внутреннюю тень */
  box-shadow: input1 3px 3px 5px #666;
}

                     .inset-box {
  width: 180px;
  height: 120px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 40px;
  padding: 20px;
  box-sizing: border-box;
  /* Добавьте внутреннюю тень */
  box-shadow: input1 3px 3px 5px #666;
}

HTML

<div class="inset-box">
  Внутренняя тень
</div>

Чтобы сделать тень внутренней, добавьте ключевое слово `inset` в начало или конец значения свойства `box-shadow`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Полная внутренняя тень

Создайте для элемента `div` с классом `full-inset-box` полную внутреннюю тень. Параметры: смещение 0 по X, 0 по Y, размытие 10px, рассеивание 5px, цвет `rgba(0,0,0,0.2)`. Не забудьте указать, что тень должна быть внутренней.

CSS

.full-inset-box {
  width: 220px;
  height: 100px;
  background-color: #f5f5f5;
  margin: 50px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
  /* Добавьте полную внутреннюю тень */
  input1: input2 0 0 10px 5px rgba(0,0,0,0.2);
}

                     .full-inset-box {
  width: 220px;
  height: 100px;
  background-color: #f5f5f5;
  margin: 50px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
  /* Добавьте полную внутреннюю тень */
  input1: input2 0 0 10px 5px rgba(0,0,0,0.2);
}

HTML

<div class="full-inset-box">
  Полная внутренняя тень
</div>

Используйте свойство `box-shadow` со всеми значениями (смещение X, смещение Y, размытие, рассеивание, цвет) и добавьте ключевое слово `inset`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Несколько теней

Примените к элементу `div` с классом `multi-shadow-box` две тени одновременно: 1) внешняя тень: смещение 5px по X, 5px по Y, размытие 10px, цвет `rgba(0, 0, 0, 0.4)`; 2) внешняя тень: смещение -5px по X, -5px по Y, размытие 10px, цвет `rgba(255, 0, 0, 0.4)` (полупрозрачный красный).

CSS

.multi-shadow-box {
  width: 150px;
  height: 150px;
  background-color: white;
  margin: 50px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте две тени */
  input1: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 0, 0, 0.4);
}

                     .multi-shadow-box {
  width: 150px;
  height: 150px;
  background-color: white;
  margin: 50px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте две тени */
  input1: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 0, 0, 0.4);
}

HTML

<div class="multi-shadow-box">
  Несколько теней
</div>

Чтобы добавить несколько теней, перечислите их определения через запятую в одном свойстве `box-shadow`. Порядок теней имеет значение: первая указанная тень будет сверху.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Эффект свечения (Glow)

Создайте эффект свечения вокруг элемента `div` с классом `glow-box`. Используйте тень без смещения (0 по X и Y), с радиусом размытия 15px и цветом `rgba(0, 150, 255, 0.7)`.

CSS

.glow-box {
  width: 130px;
  height: 130px;
  background-color: #333;
  color: white;
  border-radius: 10px;
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте эффект свечения */
  input1: 0 0 15px rgba(0, 150, 255, 0.7);
}

                     .glow-box {
  width: 130px;
  height: 130px;
  background-color: #333;
  color: white;
  border-radius: 10px;
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Добавьте эффект свечения */
  input1: 0 0 15px rgba(0, 150, 255, 0.7);
}

HTML

<div class="glow-box">
  Свечение
</div>

Для эффекта свечения задайте смещение по X и Y равным 0. Используйте только размытие (blur-radius) и цвет. Можно также добавить рассеивание (spread-radius) для усиления эффекта.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку