Welcome to WebmasterWorld Guest from 54.227.1.130

Forum Moderators: not2easy

Message Too Old, No Replies

Creating a glass effect

     

StoutFiles

1:50 pm on Aug 13, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I'd like to simulate glass using a div with opacity over an image background. Anyone have any experience with this?

LouiseMarie

9:55 am on Aug 18, 2010 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month