CSS – Как сделать тень

CSSЕсли добавить тень для своего блока через CSS, то можно значительно улучшить восприятие пользователя информации, которая в нем находится. В этой статье вы научитесь добавлять своему блоку тень. Многие дизайнеры добавляют тени в интерфейсы ради того, чтобы улучшить восприятие пользователя. Таким образом информация внутри более читабельна и визуально лучше отделена от других элементов страницы.

CSS – Как сделать тень

Наверное стоит оговориться, что тени можно накладывать друг на друга и более того, их можно добавлять неограниченное количество. Естественно, если вы представляете изначально, как должен выглядеть ваш блок, можно создать произведение искусства. Но мы бы советовали для начала обойтись лишь одной. Перечислим возможные значения для настройки тени:

  • none – отменяет добавление тени.
  • inset – тень отрисуется внутри блока.
  • сдвиги по x/y – позволяет задать направление сдвига тени. Параметр является обязательным.
  • Размытие – позволяет установить радиус размытия. Чем выше данное значение, тем тень прозрачнее и светлее.
  • Цвет – здесь, на наш взгляд, все понятно. Можно задать свой цвет для тени.

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

Приведем пример:

“Он счастлив. Он мертв”
Сериал “Доктор Хаус”
А теперь добавим капельку тени:
“Он счастлив. Он мертв”
Сериал “Доктор Хаус”
Согласитесь так выглядит гораздо лучше. Блок выделяется среди всего текста. В коде строка по добавлению тени выглядит так:

Параметры тени не так сложно разобрать. Возьмите этот пример, создайте файл и поиграйтесь в тенями для своих блоков.

Сделать тень через CSS – пустяковое дело, зато будет радовать ваш и пользовательский глаз. Надеюсь данный материал был для вас полезен. Подписывайтесь на нашу группу в ВК и ютубчик!

0

Автор публикации

не в сети 22 часа

Vapi

0
Комментарии: 19Публикации: 76Регистрация: 14-04-2017

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *