Ever want to alert your users to a really important message? Ever care to have some effect that looked like dasboard?
I wanted to do this for numerous sites so I finally I decided to scan the web for some resources. I didn’t find any real conclusive matches on Google. I mean what do you search for?
So, I started thinking about what we were actually doing and then finally I got code working. I’ll post the code and then briefly explain it. Here is a picture so you can get the idea of what it does, or you can simply go to my new website and click on either “About” or on “Contact.”
Add this to your css file or inside your “head” tags:
.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}
Basically, this says set a style in CSS to have a black background, 70% transparent, filling the entire screen.
We then add this code anywhere inside our “body” tag:
This places our black box on the screen, and then the javascript hides it. We can then show it later on by putting this javascript in an event handler like onclick:
document.getElementsById(”darkBackgroundLayer”).style.display = “”;
This will show our darkened layer using javascript.
I hope that helps you make some neat effects. Post in the comments if you have any interesting twists.
[Updated] One problem I have run into with this is that the dark black shade cuts off at the end of the browser window, meaning that if you scroll down the page, the effect does not continue. This has to do with how css repeats vertically. If any one knows a fix, please comment as well.
[Updated x2] Fixed the scrolling bug. Thanks to all the great comments. Also changed the opacity options so hopefully works on more browsers. Changes are in red. Thanks to digg, story is here.
Thanks
http://dbachrach.com/blog/2006/10/09/a-cool-css-effect-dashboard/
This will show our darkened layer using javascript.