Pavel Karinin, к сожалению, да..
Я вот на твой ответ писал, а ты его потёр (вставляю сюда).
Почти, но там тени не суммирует и не накладываются тени на другие объекты вдоль следования теневой дорожки...
А так - да, круто!
Мне и нужна статика в принципе, но для DIV на странице, чтобы можно было выставлять источник света и цвет, а всё остальное CSS-тени, CSS-градиенты и прочее - настраивались автоматом.
Была идея - написать самому такую либу. Но вдруг уже есть подобное?
xmoonlight, Просто в моем случае тоже надо было элементы там по-моему 8 или 10 в ряд стояли, при этом тени не должны были накладываться на соседние объекты... но там вся страница (титул) была нарисована в canvas из-за специфики заказа. Но вот чтоб для div не сталкивался, извини, но это можно в принципе написать.
Pavel Karinin, Конечно, можно. Просто много каких свойств перебирать внутри DIV/IMG/SVG и просчитывать надо будет самому... Например, полупрозрачный объект должен частично пропускать свет и отбрасывать тень своего цвета, расчёт интенсивности затухания в зависимости от расстояния, учитывать z-index, правильно расставлять углы для теней/градиентов, заменять градиенты/тени и т.д.
xmoonlight, все либы, что я видел которые имитируют подобные вещи для DOM элементов, создают лишь плоские тени без рассеивания, без эффекта дифракции... короче a'la Flat UI
Александр Таратин, Нужно, чтобы страница полностью сохранила работоспособность (js, UI/UX), включая адаптивность и поведение элементов интерфейса.
А вариант с картинкой - этого не сможет сделать.
Александр Таратин, тут - вопросов нет. А вот при ресайзе - сработает адаптив и согласно сетке - всё перескочит. А что с подложкой-канвасом в этот момент делать?
xmoonlight, Пересчитывать. Её все равно частично придется обновлять при каждом дрыгании мышкой. Узким местом будет html -> бинарная карта цветных элементов. Этот этап можно будет делать только при изменении геометрии ui.
xmoonlight, Не под web (хотя шейдеры можно применять с минимальными изменениями), просто разжеван сам принцип. Под web другие библиотеки гуглятся.
Оно конечно выглядит сложновато, но вот только
Просто много каких свойств перебирать внутри DIV/IMG/SVG и просчитывать надо будет самому... Например, полупрозрачный объект должен частично пропускать свет и отбрасывать тень своего цвета, расчёт интенсивности затухания в зависимости от расстояния, учитывать z-index, правильно расставлять углы для теней/градиентов, заменять градиенты/тени и т.д.
xmoonlight, ну это же canvas так или иначе, только как предложил Александр Таратин делать подложку, но в адаптиве замучаешься пыль глотать вылавливая тени
Pavel Karinin, ну я вот думаю, 2 варианта:
1. Делать пересчёт исключительно на CSS (менять свойства DOM-объектов через JS)
2. Добавить Canvas-подложку и на основе размеров нужных DOM-объектов рисовать силуэты ("основания") на этой подложке и по ним рассчитывать тени, однако градиент "тел" всё равно придётся менять у DOM-объектов.
П.1 - вроде проще, но там как правильно выставить градиенты - пока не особо понятно
П.2 - больше возможностей даёт, т.к. канвас... Например, можно фон страницы погрузить под реалистичную воду и рыбок пустить или что-то подобное....
И что из этого будет работать быстрее - тоже непонятно...
xmoonlight, Мне кажется второй вариант лучше, больше управляемости, больше возможностей. Много элементов вообще (так ориентировочно) которые должны отбрасывать тени?
Сделать на svg, rect (цветной квадратик) и path (будет выполнять роль тени). В зависимости от положения источника меняй координаты для path. Достаточно 4х координат, две возле квадрата, две за пределами контейнера.
Простой
