Как сверстать тень?

Создание эффекта тени с помощью языка разметки HTML можно осуществить с помощью CSS. Вот несколько способов, которые позволят вам добавить тень к любому HTML-элементу:

1. **Свойство box-shadow**:
Это CSS-свойство позволяет добавить тень к элементу.
Пример:

   .shadow {
       box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   }

В этом примере мы добавляем тень со следующими параметрами: смещение тени по горизонтали (2px), по вертикали (2px), радиус размытия (4px) и цвет тени (черный с непрозрачностью 0.2).

2. **Свойство text-shadow**:
Данное свойство позволяет добавить тень к тексту.
Пример:

   .text-shadow {
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   }

Этот пример добавляет тень к тексту с теми же параметрами, что и в предыдущем примере.

3. **SVG-тень**:
Также можно использовать SVG для создания тени визуально. Например, с помощью фильтра drop-shadow.
Пример:

   <svg width="200" height="200">
       <filter id="drop-shadow">
           <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
           <feOffset dx="2" dy="2" result="offsetblur"/>
           <feFlood flood-color="rgba(0,0,0,0.5)"/>
           <feComposite in2="offsetblur" operator="in"/>
           <feMerge>
               <feMergeNode/>
               <feMergeNode in="SourceGraphic"/>
           </feMerge>
       </filter>
   </svg>

В этом примере создается SVG-фильтр с эффектом тени с использованием feGaussianBlur, feOffset, feFlood, feComposite и feMerge.

Таким образом, вы можете добавить тень к элементам на вашей веб-странице с помощью различных способов, выбрав наиболее подходящий в зависимости от ваших потребностей и дизайна.