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? Add this to your css file or inside your “head” tags: .darkenBackground { background-color: rgb(0, 0, 0); opacity: 0.7; z-index: 20; height: 100%; width: 100%; background-repeat:repeat; position:absolute; top: 0px; left: 0px; } Basically, this […]

Ever want to alert your users to a really important message? Ever care to have some effect that looked like dasboard?

Add this to your css file or inside your “head” tags:

.darkenBackground { background-color: rgb(0, 0, 0); opacity: 0.7; z-index: 20; height: 100%; width: 100%; background-repeat:repeat; position:absolute; 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 class="&rdquo;darkenBackground&rdquo;" id="&rdquo;darkBackgroundLayer&rdquo;">
<script language="&rdquo;javascript&rdquo;" type="&rdquo;text/javascript&rdquo;">
document.getElementsById(&rdquo;darkBackgroundLayer&rdquo;).style.display = &ldquo;none&rdquo;;
</script>

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(&rdquo;darkBackgroundLayer&rdquo;).style.display = &ldquo;&rdquo;;

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.

Source:→ Dustin blog

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.