Если добавить тень для своего блока через CSS, то можно значительно улучшить восприятие пользователя информации, которая в нем находится. В этой статье вы научитесь добавлять своему блоку тень. Многие дизайнеры добавляют тени в интерфейсы ради того, чтобы улучшить восприятие пользователя. Таким образом информация внутри более читабельна и визуально лучше отделена от других элементов страницы.
CSS — Как сделать тень
Наверное стоит оговориться, что тени можно накладывать друг на друга и более того, их можно добавлять неограниченное количество. Естественно, если вы представляете изначально, как должен выглядеть ваш блок, можно создать произведение искусства. Но мы бы советовали для начала обойтись лишь одной. Перечислим возможные значения для настройки тени:
- none — отменяет добавление тени.
- inset — тень отрисуется внутри блока.
- сдвиги по x/y — позволяет задать направление сдвига тени. Параметр является обязательным.
- Размытие — позволяет установить радиус размытия. Чем выше данное значение, тем тень прозрачнее и светлее.
- Цвет — здесь, на наш взгляд, все понятно. Можно задать свой цвет для тени.
Примечание: если вы добавляете тень, к своему блоку, то увеличиваются общие размеры блока, что может привести к появлению полосы прокрутки.
Приведем пример:
Сериал «Доктор Хаус»
Сериал «Доктор Хаус»
|
1 2 3 |
.someclass { box-shadow: 0 5px 10px rgba(0,0,0,0.3); } |
Параметры тени не так сложно разобрать. Возьмите этот пример, создайте файл и поиграйтесь в тенями для своих блоков.
Сделать тень через CSS — пустяковое дело, зато будет радовать ваш и пользовательский глаз. Надеюсь данный материал был для вас полезен. Подписывайтесь на нашу группу в ВК и ютубчик!