Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Красный прямоугольник, отбрасывающий тень на деревянный фон.

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

Простой способ нарисовать падающую тень прямоугольного объекта - нарисовать серую или черную область под ней со смещением от объекта. В общем, тень - это копия объекта черного или серого цвета, нарисованная в немного другом положении. Реализм можно повысить за счет:

  1. Затемнение цветов пикселей, на которые отбрасывает тень, вместо того, чтобы делать их серыми. Это можно сделать с помощью альфа-смешивания тени с областью, на которую она падает.
  2. Смягчение краев тени. Это можно сделать, добавив размытие по Гауссу к альфа-каналу тени перед смешиванием.

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

Используйте [ редактировать ]

Как правило, оконные менеджеры , способные к компоновке, допускают эффекты тени, тогда как неспособные оконные менеджеры - нет. В некоторых операционных системах, таких как macOS, тень используется для различения активных и неактивных окон.

Веб-сайты могут использовать эффекты тени через тень окна свойств CSS, тень текста и фильтр. [1] Первые два используются для элементов и текста соответственно, а тень отфильтровывается дополнительно к содержимому элемента, позволяя поддерживать элементы странной формы или прозрачные изображения.

Внешние ссылки [ править ]

Ссылки [ править ]

  1. ^ [1] , функция фильтра drop-shadow (), Mozilla Developer Network