Тени в CSS подразделяются на два вида: тени текста и тени блоков.
Тени текста задаются свойством text-shadow, принимающим четыре параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени и её цвет.
Тени блоков задаются свойством box-shadow, принимающим пять параметров: сдвиг по оси X, сдвиг по оси Y, размытие тени, радиус распространения и её цвет.
Рассмотрим пример:
Тени текста задаются свойством тенью внутри блока с тенью</div>
.shadow {
text-shadow: 1px 3px 5px grey;
box-shadow: 0 5px 10px -3px black;
max-width: 320px;
padding: 50px;
font-size: 18px;
text-align: center;
border-radius: 10px;
color: teal;
background: white;
margin: 20px auto;
}
Разберёмся подробнее с параметрами теней. Сдвиги по осям X и Y позволяют перемещать тень относительно текста. Они могут быть как положительными, так и отрицательными,
причём отрицательные сдвиги будут перемещать тень влево и вверх, соответственно. Размытие тени может быть только положительным числом. Благодаря этому параметру можно создать эффект нечёткой тени, положительно влияющий на реалистичность. Радиус распространения тени может быть как положительным, так и отрицательным числом. Это свойство применимо только кbox-shadow. По умолчанию оно равно 0, что означает, что площадь тени будет равна площади блока. Положительные значения увеличат площадь тени относительно блока, а отрицательные — уменьшат, что позволит создать эффект парящего блока.
Поиграть с box-shadow можно здесь:
Box-Shadow CSS Generator, а с text-shadow тут:
Text Shadow CSS Generator.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues