Александр Таратин, тут - вопросов нет. А вот при ресайзе - сработает адаптив и согласно сетке - всё перескочит. А что с подложкой-канвасом в этот момент делать?
Александр Таратин, Нужно, чтобы страница полностью сохранила работоспособность (js, UI/UX), включая адаптивность и поведение элементов интерфейса.
А вариант с картинкой - этого не сможет сделать.
Pavel Karinin, Конечно, можно. Просто много каких свойств перебирать внутри DIV/IMG/SVG и просчитывать надо будет самому... Например, полупрозрачный объект должен частично пропускать свет и отбрасывать тень своего цвета, расчёт интенсивности затухания в зависимости от расстояния, учитывать z-index, правильно расставлять углы для теней/градиентов, заменять градиенты/тени и т.д.
Pavel Karinin, к сожалению, да..
Я вот на твой ответ писал, а ты его потёр (вставляю сюда).
Почти, но там тени не суммирует и не накладываются тени на другие объекты вдоль следования теневой дорожки...
А так - да, круто!
Мне и нужна статика в принципе, но для DIV на странице, чтобы можно было выставлять источник света и цвет, а всё остальное CSS-тени, CSS-градиенты и прочее - настраивались автоматом.
Была идея - написать самому такую либу. Но вдруг уже есть подобное?
Kadzi,
1. При ховере на ПК - отображать развёрнутую и увеличенную карточку. Что-то вроде эффекта линзы, но только для одной карточки и приподнимать её с помощью эффекта тени.
2. Про ссылку: для отображения доп.инфы - лучше на всю площадь карточки за вычетом зоны с кнопкой и небольшой рамки вокруг неё.
3. Для перехода на страницу товара - только по этой кнопке.
На мобиле, аналог ховера на ПК (п.1), можно сделать триггер: раз нажал увеличило карточку (по аналогии с full-screen), второй раз - вернуло на место.
П.2 - убираем, соответственно.
П3. - также оставить для мобилы.
Про скролл внизу - только для ПК и с отображением миниатюр с названиями товаров пока тащишь ползунок, над ним. Иначе - он не нужен больше нигде.
Kadzi, Ещё есть приём замещения: когда выводятся над фото только основные данные, а по клику на иконку "инфо"/"все данные" - выводится на этом же месте (вместо изображения) уже подробная информация о товаре.
Смена изображения и списка данных - может быть как мгновенная: одно погасили, другое показали. Так и в виде слайдера, который сдвигается влево и вправо (или вверх и вниз, если вертикальный слайдинг). Тут - эффекты могут быть любые, которые позволят чувствовать пространство: всю карточку целиком!
Kadzi, допустимо всё. сложности - никакой. всё зависит от верстальщика и его рук! Банально - это делается через float:left, но лучше - использовать адаптивную сетку.
Андрей, Согласен на 100%!
Остался вопрос: как свет подогнать на общую концепцию?
Вручную следить за углами, градиентами, тенями и т.д. или есть какие-то инструменты, которые позволяют это сделать централизовано?
Михаил Проскурин, ставим свет на группу (слои из растра и SVG вперемешку) и пытаемся сохранить освещение внутри градиента SVG, чтобы потом вставить отдельно на страницу.
Михаил Проскурин, Спасибо!
Мне важнее, чтобы в SVG градиент сохранился после того, как мы осветлили/затемнили всю совокупную группу слоёв из SVG и растра...
Т.е., чтобы новые (вычисленные по освещению) градиенты "запеклись" в SVG-свойства всех SVG-слоёв (если так можно выразиться...).
Зачем это: просто не хочется всю страницу верстать в растре или целиком в SVG... При этом, хочется векторное качество иллюстраций сохранить при масштабировании...
Михаил Проскурин, Я вижу, что тень оно сохранило для растра и для вектора!
А вот градиент с другим градусом при радиальной освещённости (например, синий свет, где-нить в углу) - сохранит интересно?
PS: тень - в разы проще, чем цветовой градиент на основе применённого фильтра...
