Not Rated!

A Cool CSS Effect – Dashboard

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?

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:

<div id=”darkBackgroundLayer” class=”darkenBackground”>
<script language=”javascript” type=”text/javascript”>
document.getElementsById(”darkBackgroundLayer”).style.display = “none”;
</script>
</div>

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.

You can then use javascript to show a different window like the above code. This effect is really great and extremely useful in drawing the user’s attention.

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.

Demo: http://dbachrach.com/index_changed.html

Source: http://dbachrach.com/blog/2006/10/a-cool-css-effect-dashboard/

Related Listings:

1. CSS Gradient Effect Do you want to create fancy headings without rendering each…
2. Create a Realistic Hover Effect With jQuery For one of the projects I’m currently working on with…
3. Bounce Effect Script Apply this effect to any element and it’ll bounce up…