Игра теней / Размытие тени [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.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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