Эффект блика на рамке css?

Question

[katrinab]

Здравствуйте! Подскажите, есть ли возможность на css реализовать подобное, но чтобы блики и тени перемещались во время прокрутки, к примеру. (эффект реального стекла)
Спасибо.

Comments

[Дархан]

Выглядит словно бордер разукрасили чем-то или поверх него нанесли,но не уверен.

Answer 1

[MrStan1slav]

https://jsfiddle.net/MrStan1slav/1n0Lj5w2

Comments

[Николай]

ни в хроме, ни в сафари ваши блики не видны)

[Анатолий Медведев]

Николай, поставьте нужные префиксы

Answer 2

[Виталий Першин]

Вот накидал блики, при желании можно раскачать до вполне приемлемого состояния https://jsfiddle.net/l2banners/tjm7p1r6/4/

по поводу косых линий на фоне, они сплошные, их можно в ксс сделать и под низ положить впринципе это не сложно, ну а сами блоки сделать белыми почти прозрачными... Ну и все, тени тоже не проблема, тени можно через js двигать при прокрутке

Answer 3

[mletov]

А эта штука адаптивная? И по вертикали должна тянуться? А как ведут себя эти блики при растяжении?
Очень уж все жестко нарисовано, возможностей для маневра мало. Где-то чуть больше текста - и все поплывет.
Ощущение, что очередной дизайнер полиграфии решил себя попробовать на поприще веба.

Какие варианты можно попробовать:
1) Делать каждый блик абсолютно позиционированным дивом с box-shadow. Но не уверен, что удастся воспроизвести блики точь-в-точь.
2) Старый добрый хардкорный путь: каждый блик вырезать как png и опять же абсолютно позиционированные дивы.
3) Возможно, что-то такое svg умеет.

PS честно говоря, хотелось бы самому увидеть красивое решение, если такое есть.

Answer 4

[Максим Тимофеев]

во время прокрутки

это событие в js, так что на css никак. css+js можно. Геморройно-ювелирная работа предстоит Вам.

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