Игра теней / Смещение тени по горизонтали [2/17]
×
Курс «Игра теней»

Смещение тени по горизонтали [2/17]

Мы создали простую тень, теперь разберемся с синтаксисом свойства. Вот он:

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

Ключевое слово inset, растяжение, размытие и цвет не являются обязательными. Порядок следования цифровых значений важен. Первое цифровое значение означает смещение по горизонтали.

Смещение по горизонтали может быть положительным и отрицательным.


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

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

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

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

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