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.
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.
Related
I have been trying to create a grid over a blurry background image which when clicked displays the non-blurry background image.
So far I have been able to display a grid over a blurry background image. The squares within the grid have a hover effect on them which changes their opacity. What I need it to do now is on click of any of the squares, the non-blurry version of the background image is shown, but only within the chosen square. Is this even possible with css? Your help would be greatly appreciated.
The below is the link to where you can see the project. You might need to click load script if you are using chrome.
https://www.theppcpresents.com/test/new/index.html
Thanks in advance for your help
I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.
Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid
I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?
I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.
Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.
How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?
Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.
The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent
Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.
This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.
Just play with the interactive demo:
and go through the docs:
Have fun.
The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.