2

Is it possible to show glass effect with 'refraction' using html, css, javascript?

I have an html div "pop up" styled in css (eg: background:rgba(255,255,255,0.5)) to appear transparent. I want portion of the html page underneath the pop up to appear distorted due to refraction. No images are used in foreground or background of the pop up. The underlying html page is dynamic and can have images.

ameya kogje
  • 21
  • 1
  • 3
  • The short answer is "no", unfortunately. It's possible, but it will probably be so inconvenient that you won't want to use it. Say, for example, "capturing" the screen using a big JavaScript library onto a Canvas, then blurring *that*, and finally displaying it in the background. – Ry- Jan 14 '12 at 17:39
  • Depending on your layout, though, you *might* be able to squeak by with a filter. See http://jsfiddle.net/minitech/rZ9cE/ – Ry- Jan 14 '12 at 17:43

1 Answers1

1

If your background is a canvas, you could use caustics to create a refracted image the size and position of your popup. see http://www.klayge.org/material/3_12/Caustics/fastcaustics.pdf

Here is a nice demo of caustics using canvas.

tnt-rox
  • 5,400
  • 2
  • 38
  • 52
  • and what if there was some html between the bg and pop-up? – Joseph Feb 02 '12 at 09:26
  • that question has been answered here [link}(http://stackoverflow.com/questions/2732488/how-can-i-convert-an-html-element-to-a-canvas-element). – tnt-rox Feb 02 '12 at 09:44
  • In my experiments, I have found that when you are distorting an image, only an approximation of the image is needed! – tnt-rox Feb 02 '12 at 09:55