Привет друзья! Сегодня вам расскажу, как сделать тень в HTML с помощью стилей CSS. Сделать тень бывает полезно, когда вы хотите добавить тень у картинки, или у каких-то элементов на сайте, что дает прикольный трехмерный эффект.
Видеоурок
Стиль для создания тени — box-shadow. У нее есть шесть значений.
box-shadow: 4px 4px 15px 1px #d43e3ed1;
Первое значение — это слово inset, которое делает, так что тень находится внутри элемента. Второе значение — это сдвиг тени по горизонтали, например обычно можно поставить 4 пикселя и этого бывает достаточно.
Третье значение — это сдвиг тени по вертикали, и тоже 4 пикселя бывает достаточно. Четвертый параметр — это радиус размытия тени, при установке в 0 размытия нет и тень имеет четкие контуры, а если 15 пикселей — то это вполне нормальная тень получается.
Пятый параметр — это масштаб тени, когда мы увеличим значение, то она становится больше, когда уменьшаем значение, то она начинает сжиматься. Шестой параметр — это, конечно, цвет тени.
Вот пример кода из видео:
[div style=»width: 400px;
position: absolute;
left: 100px;
top: 100px;
background-color: #b4f8ff;
padding: 10px;
box-shadow: 19px 19px 15px 1px #d43e3ed1;»] Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 [/div]
Если вы сделаете тень слишком «широкой» то, она может выйти за пределы видимой части окна браузера и появится горизонтальная полоса прокрутки.