Как такое сверстать, затемненный фон с прозрачной областью?

Question

[massef]

Пример

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

На чистом CSS это не сделать, наверное. По крайней мере я не вижу вариантов, выходит нужно делать скриптом, но как? Помнится я встречал такую библиотечку на jquery, но сейчас не могу найти.

Вообщем кто делал подобный интерфейс, подскажите куда копать?

UPD: Как вариант делать скриншот страницы и вставлять его фоном в этот кружок подгоняя background-position, либо вырезать картинкой нужную область. Но тут проблема в том что это изменчивый интерфейс и будет редактироваться, т.е. могут появится новые области. Манагеры нарезкой заниматься не будут, а мне оно нафиг не нужно))

Answer 1

[Дмитрий]

Я делал через маску SVG, погуглите "mask svg transparent"

Answer 2

[Stalker_RED]

div с огромной рамкой и прозрачностью на чистом CSS. jsfiddle.net/d09qfw7j

Comments

[massef]

Как вариант, еще можно через тень jsfiddle.net/f2erc182/46

Answer 3

[Nikolay Talanov]

Обычно подобные "подсвечивающие оверлеи" делаются под прямоугольные варианты, и тогда просто 4 оверлей-дива ставятся вокруг области и получается нужный эффект. Но так как у вас круг, то в голову лезут такие варианты:
1) Что-то на канвасе. Тут кодом не помогу, с канвасом слабо дружу.
2) Svg маски, возможно css blend-modes (не уверен).
3) Создать глобальный overlay с z-index: 1. Создать блок, в него положить клон всего этого грида. Этот блок сделать таким вот круглым, задать ему z-index: 2. При движении этого блока, клон грида внутри двигаем в противоположном направлении. В итоге будет получаться эффект подсветки.
4) Еще наверняка возможные какие-нибудь варианты с псевдоэлементами, svg, и оверлеем, состоящим из кусков, но у меня сейчас воображения на такое не хватит.

Comments

[massef]

Спасибо, попробую с SVG

Answer 4

[Alex]

Есть готовые решения, библиотеки для обучения работы с сайтом. Именно так и работают, как на вашей картинке.

Comments

[massef]

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