В этой статье мы научимся создавать тени вокруг блоков. Свойство с помощью которого это можно сделать выглядит вот так:
Значением этого свойства являются пять важных параметров: горизонтальное смещение, вертикальное смещение, размытие, распространение тени и цвет тени. Для элемента p это будет выглядеть вот так:
Переходим к практике.
Начать можно с создания нужного количества абзацев на веб-странице (в нашем случае их будет пять). Далее открываем файл в формате css и прописываем правило для каждого абзаца (не считая самого первого, т.к. оно будет выполняться для всех элементов p):
Сохраняем css-файл → обновляем html-страницу (не забыв при этом связать html с css. О том как это сделать можно узнать здесь).
Если все сделано правильно Вы должны придти именно к такому результату:
Теперь давайте разберемся в представленных правилах более подробно. Первое, как было сказано выше, является общим для всех, с его помощью мы смогли указать толщину, стиль и цвет границы. Второе относится к первому абзацу, в нем мы указали только три параметра из пяти: горизонтальное смещение, вертикальное смещение и цвет тени. Именно благодаря им мы смогли получить тень в виде сплошной линии слева от блока. В остальных случаях она будет находиться справа и иметь менее четкие границы. Особое внимание стоит обратить на последний абзац. В нем помимо установленных параметров присутствует ключевое слово inset, с его помощью мы можем создать тень внутри блока.
Спасибо за внимание!
Надеюсь все получилось и теперь Вы сделаете свой сайт гораздо более красочным и интересным.
Предлагаю подписаться на канал и следить за выходом новых интересных статей.