homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Creating a glass effect

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4186525 posted 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?



5+ Year Member

Msg#: 4186525 posted 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):
for IE:

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><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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved