| Creating a glass effect
|
StoutFiles
msg:4186527 | 1:50 pm on Aug 13, 2010 (gmt 0) |
I'd like to simulate glass using a div with opacity over an image background. Anyone have any experience with this?
|
LouiseMarie
msg:4188557 | 9:55 am on Aug 18, 2010 (gmt 0) |
You can set up a body css class that has an image as the background (create an image in photshop or any graphics program that has a glass ripple effect or whatever pattern you want, i don't know if this can be created using css i only know how to do it with an image) then create a div with the opacity and colour screen that you require.
Opacity css codes work differently for different browsers:
For mozilla and webkit browsers (works in firefox, google chrome, safari, opera):
opacity:0.6;
for IE:
filter:alpha(opacity=60);
css:
body {background-image:url('images/myimage.jpg'); background-repeat:repeat-x;}
div.wrapper {position:fixed; top:0px; left:0px; bottom:0px; right:0px; opacity:0.6; filter:alpha(opacity=60); background-color:#ffff00;}
You can change the positioning or add a height and width to the wrapper div if you do not want it to fill the entire page and the repeat on the image as required.
html:
<html><body><div class="wrapper">Add all you page content here</div></body></html>
The "opacity:0.6" is a css 3 element so you may find that even though it works you code may not validate but it is properly formed css just new.
Hope this helps.
|
|
|
