Некоторые виды теней, которые используются в дизайне пользовательского интерфейса:
- Внешние (падающие) тени (Drop Shadow). ux.pub blog.logrocket.com Это распространённый эффект, при котором объект как будто парит над поверхностью. kurshub.ru Обычно такие тени бросают в направлении, противоположном источнику света. blog.logrocket.com С их помощью выделяют кнопки и интерактивные элементы, создают эффект «подъёма» для карточек и контейнеров, обозначают модальные окна и всплывающие меню. kurshub.ru
- Внутренние тени (Inner Shadow). kurshub.ru В отличие от внешних, такие тени помещают внутри границ элемента. blog.logrocket.com Они создают эффект углубления или вдавленности элемента. kurshub.ru Этот тип теней используют для создания эффекта нажатой кнопки, оформления полей ввода, имитации глубины в элементах интерфейса. kurshub.ru
- Тени для текста. blog.logrocket.com Для таких элементов существует специальное свойство CSS — text-shadow. webformyself.com
- Тени с эффектом размытия фона. ux.pub blog.logrocket.com Объект с таким эффектом размывает всё, что находится под ним. ux.pub Этот приём используют, например, для достижения эффекта дымчатого стекла. ux.pub
Также выделяют отбрасываемую тень и тень фигуры. webformyself.com Отбрасываемая тень проявляется, когда объект блокирует источник света. webformyself.com Тень фигуры — это сторона объекта, обращённая от источника света, её форма имеет более мягкие, менее чёткие края. webformyself.com