CODEWITHSUNDEEP
javascripthtmlcss
ameya kogje
ameya kogje

Reputation: 21

html5 css3 glass effect with refraction

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.

Upvotes: 2

Views: 3749

Answers (1)

tnt-rox
tnt-rox

Reputation: 5558

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.

Upvotes: 2

Related Questions