Игра теней / Размытие тени [4/17]
×
Курс «Игра теней»

Размытие тени [4/17]

Третье цифровое значение задаёт радиус размытия тени.

box-shadow:
[inset] - внутренняя
5px     - смещение по x
10px    - смещение по y
[2px]   <- размытие
[3px]   - растяжение
[red];  - цвет

Чем меньше значение, тем четче тень. Максимальная четкость достигается при нулевом значении. Размытие не может быть отрицательным. Если размытие не указано, то оно равно нулю.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Размытие тени</title> </head> <body> <div class="btn">Кнопка</div> </body> </html>
CSS
body { font-family: "Tahoma", sans-serif; font-size: 18px; background: url("/assets/pcourse1/bg.jpg"); } .btn { width: 150px; margin: 100px auto; padding: 15px 20px; text-align: center; text-transform: uppercase; color: white; background: #3498db; box-shadow: 0 0 0 0 #34495e; cursor: pointer; }
HTML Academy
  1. Задайте исходной тени размытие 5px.
  2. Затем сместите её вниз на 70px.
  3. Затем увеличьте размытие до 10px.
Теория Проверить Следующее задание

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.