Тень текста (text-shadow): Тренажер CSS

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

На этой странице собраны упражнения для отработки навыков использования CSS свойства `text-shadow`. Задания помогут вам научиться добавлять различные эффекты тени к тексту: от простых смещенных теней до сложных многослойных и эффектов свечения. Каждое задание представляет собой HTML-структуру и CSS-стили с пропусками, которые вам предстоит заполнить, чтобы добиться нужного визуального результата. Сложность заданий постепенно увеличивается, позволяя закрепить знания о синтаксисе и возможностях `text-shadow`.

Список тем

Простая тень справа снизу

Добавьте простую тень к заголовку. Тень должна быть смещена на 2 пикселя вправо и на 2 пикселя вниз от текста. Цвет тени уже задан.

CSS

h1 {
  font-size: 36px;
  text-align: center;
  color: dodgerblue;
  /* Добавьте тень */
  input1: 2px 2px #888888;
}

                     h1 {
  font-size: 36px;
  text-align: center;
  color: dodgerblue;
  /* Добавьте тень */
  input1: 2px 2px #888888;
}

HTML

<h1>Текст с тенью</h1>

Используйте свойство `text-shadow`. Оно принимает значения смещения по горизонтали (X), смещения по вертикали (Y), радиуса размытия (необязательно) и цвета тени (необязательно). В данном случае вам нужно указать смещение по X, смещение по Y и цвет. Пример: `text-shadow: 2px 2px #ff0000;`. Вам нужно вставить только имя свойства.

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте тень для параграфа. Тень должна быть смещена на 3 пикселя вниз, без горизонтального смещения, и иметь радиус размытия 5 пикселей. Цвет тени - черный.

CSS

p {
  font-size: 24px;
  padding: 20px;
  color: black;
  input1: input2 input3 input4 #000000;
}

                     p {
  font-size: 24px;
  padding: 20px;
  color: black;
  input1: input2 input3 input4 #000000;
}

HTML

<p>Этот текст должен иметь размытую тень.</p>

Свойство `text-shadow` позволяет задать радиус размытия третьим значением перед цветом. Если горизонтальное смещение не нужно, укажите 0 для первого значения. Формат: `text-shadow: offset-x offset-y blur-radius color;`. Вам нужно вставить имя свойства и первые три числовых значения.

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

Результат

Сообщения

Выполнить

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

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

Белая тень на темном фоне

Добавьте к тексту белую тень, чтобы он лучше читался на темном фоне. Тень должна быть слегка смещена (1px вправо, 1px вниз) и немного размыта (2px).

CSS

body {
  background-color: #333;
}

h2 {
  font-size: 30px;
  color: #555; /* Темный цвет текста */
  text-align: center;
  padding-top: 50px;
  input1: input2 input3 input4 #FFFFFF;
}

                     body {
  background-color: #333;
}

h2 {
  font-size: 30px;
  color: #555; /* Темный цвет текста */
  text-align: center;
  padding-top: 50px;
  input1: input2 input3 input4 #FFFFFF;
}

HTML

<h2>Читаемый текст</h2>

Используйте свойство `text-shadow` с четырьмя значениями: смещение по X, смещение по Y, радиус размытия и цвет. Цвет тени должен быть белым (`#FFFFFF`). Вам нужно вставить имя свойства и значения смещений и размытия.

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

Результат

Сообщения

Выполнить

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

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

Жесткая тень (без размытия)

Создайте эффект 'жесткой' тени для текста, полностью убрав размытие. Сместите тень на 3 пикселя вправо и 3 пикселя вниз. Цвет тени - темно-серый.

CSS

.hard-shadow {
  font-size: 40px;
  font-weight: bold;
  color: orange;
  input1: 3px 3px input2 #555555;
}

                     .hard-shadow {
  font-size: 40px;
  font-weight: bold;
  color: orange;
  input1: 3px 3px input2 #555555;
}

HTML

<div class="hard-shadow">Жесткая тень</div>

Чтобы убрать размытие, установите значение `blur-radius` равным 0. Синтаксис остается прежним: `text-shadow: offset-x offset-y blur-radius color;`. Вам нужно вставить имя свойства и значение радиуса размытия.

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

Результат

Сообщения

Выполнить

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

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

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

Примените к заголовку две тени одновременно: одну темно-синюю, смещенную вправо и вниз (2px, 2px, без размытия), и одну светло-голубую, смещенную влево и вверх (-2px, -2px, без размытия).

CSS

h1 {
  font-size: 38px;
  text-align: center;
  color: white;
  background-color: #666;
  padding: 20px;
  input1: 2px 2px 0 darkblue, input2 input3 0 lightblue;
}

                     h1 {
  font-size: 38px;
  text-align: center;
  color: white;
  background-color: #666;
  padding: 20px;
  input1: 2px 2px 0 darkblue, input2 input3 0 lightblue;
}

HTML

<h1>Двойная тень</h1>

Чтобы добавить несколько теней, перечислите их параметры через запятую в значении свойства `text-shadow`. Формат: `text-shadow: shadow1, shadow2, ...;`, где каждая `shadowN` имеет вид `offset-x offset-y blur-radius color`. Вам нужно вставить имя свойства и параметры второй тени.

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

Результат

Сообщения

Выполнить

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

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

Эффект свечения

Создайте эффект неонового свечения для текста. Используйте несколько теней одного цвета (например, ярко-голубого) с нулевым смещением, но с разным радиусом размытия (например, 5px, 10px, 15px).

CSS

.glow {
  font-size: 40px;
  text-align: center;
  color: white;
  background-color: black;
  padding: 30px;
  /* Добавляем свечение */
  input1: 0 0 5px cyan, 
          input2 input3 10px cyan, 
          input4 input5 15px cyan;
}

                     .glow {
  font-size: 40px;
  text-align: center;
  color: white;
  background-color: black;
  padding: 30px;
  /* Добавляем свечение */
  input1: 0 0 5px cyan, 
          input2 input3 10px cyan, 
          input4 input5 15px cyan;
}

HTML

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

Для эффекта свечения задайте несколько теней через запятую. Все тени должны иметь нулевое смещение по X и Y (`0 0`). Варьируйте только радиус размытия и, возможно, цвет (или его прозрачность) для усиления эффекта. Вам нужно вставить имя свойства и параметры второй и третьей тени.

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

Результат

Сообщения

Выполнить

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

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

Эффект вдавленного текста

Создайте эффект, будто текст вдавлен в фон. Это достигается с помощью двух теней: темной снизу и светлой сверху.

CSS

body {
  background-color: #CCCCCC; /* Серый фон */
}

.inset-text {
  font-size: 32px;
  text-align: center;
  padding: 40px;
  color: #AAAAAA; /* Цвет текста близкий к фону */
  input1: 0 1px 1px rgba(0,0,0,0.5), 
          input2 input3 1px rgba(255,255,255,0.8);
}

                     body {
  background-color: #CCCCCC; /* Серый фон */
}

.inset-text {
  font-size: 32px;
  text-align: center;
  padding: 40px;
  color: #AAAAAA; /* Цвет текста близкий к фону */
  input1: 0 1px 1px rgba(0,0,0,0.5), 
          input2 input3 1px rgba(255,255,255,0.8);
}

HTML

<div class="inset-text">Вдавленный текст</div>

Используйте две тени: первая тень - темная (например, `rgba(0,0,0,0.5)`), смещенная немного вниз (например, `0 1px`) и с небольшим размытием (`1px`). Вторая тень - светлая (например, `rgba(255,255,255,0.8)`), смещенная немного вверх (`0 -1px`) с таким же размытием (`1px`). Порядок теней важен. Вам нужно вставить имя свойства и параметры второй тени.

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

Результат

Сообщения

Выполнить

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

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

Контур текста

Создайте эффект контура вокруг текста с помощью четырех теней без размытия, смещенных на 1 пиксель в каждую сторону (вверх, вниз, влево, вправо).

CSS

.outline {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: white; /* Цвет самого текста */
  padding: 30px;
  background: dodgerblue;
  input1: 1px 0 0 black, 
          input2 0 0 black, 
          0 input3 0 black, 
          0 input4 0 black;
}

                     .outline {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: white; /* Цвет самого текста */
  padding: 30px;
  background: dodgerblue;
  input1: 1px 0 0 black, 
          input2 0 0 black, 
          0 input3 0 black, 
          0 input4 0 black;
}

HTML

<div class="outline">Текст с контуром</div>

Используйте четыре тени с одинаковым цветом и нулевым размытием (`0`). Смещения должны быть: `1px 0`, `-1px 0`, `0 1px`, `0 -1px`. Перечислите их через запятую. Вам нужно вставить имя свойства и параметры трех из четырех теней.

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

Результат

Сообщения

Выполнить

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

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