Discover the best of the web!
Learn more about Digg by taking the tour.
A Cool CSS Effect to Dim the Screen (Dashboard Style)
dbachrach.com — A very simple tutorial on how to create an attractive dashboard-like dimmer for your webpage and draw your user's attention to a certain object. Very cool web effect.
ahdustin- 2077 diggs
- digg it
- wiIbur, on 10/12/2007, -18/+6wow, this is really cool.
- Walt65, on 10/12/2007, -8/+3I agree it was cool.
- coresnake, on 10/12/2007, -1/+1i dunno about the CSS effect but that site is certainly demostrating the Digg effect right now..
- plasticated, on 10/12/2007, -1/+41Use thickbox. You'll have loads of extra features to play with then.
http://jquery.com/demo/thickbox/
It also fixes the scrolling bug found in the above tutorial.- hadiz, on 10/12/2007, -1/+23Yeah, or lightbox JS
http://www.huddletogether.com/projects/lightbox/ - Hemingrubbish, on 10/12/2007, -0/+28or even lightbox JS 2.0
http://www.huddletogether.com/projects/lightbox2/ - EbowUK, on 10/12/2007, -2/+2Cheers for all those links - very cool indeed.
- Xpiatio, on 10/12/2007, -0/+17You people mention Lightbox and Thickbox. Both are good for what they are. I use Greybox. http://orangoo.com/labs/GreyBox/
- skyshock21, on 10/12/2007, -0/+2Wow, Greybox is a DAMN nice looking one! Color me impressed. I could definitely find a few uses for this in my web pages. Thanks for the head's up! Digg rules.
- timdorr, on 10/12/2007, -0/+7I'd skip lightbox. It takes over 100K of JS code and is limited to images. ThickBox is just about 30K and does images, inline content, external files, and AJAX.
- herrin, on 10/12/2007, -0/+2Greybox is awesome. I just finished adding lightbox to a project, i'm definitely switching to Greybox today. The size alone is worth it. Thanks for the link!
- Dotcommer, on 10/12/2007, -0/+1Hey, anyone out there have an idea how to combine the nice scaling effects of Lightbox JS 2.0 with the ability to show flash animations or any other kind of movie file format within the script like pictures are shown? (christ, did that even make sense? haha). Would greatly appreciate it if anyone has any insight. Don't really want to use Thick box or grey box (if i can avoid it) just because I like the animated effects from Lightbox.
- hadiz, on 10/12/2007, -1/+23Yeah, or lightbox JS
- chris9902, on 10/12/2007, -0/+6if you set the postion to fixed not absolute you can scroll the screen and the overlay will never move off screen. The only problem is IE6 doesn't support fixed.
- smoothmedia, on 10/12/2007, -9/+21Sadly this doesnt work in my browser (IE7), it simply makes the screen entirely black
- mindsnare, on 10/12/2007, -2/+44go yell at the IE7 Dev team for that for not developing their browser properly CSS compliant....again
- insidein, on 10/12/2007, -1/+9You have to use filters in IE, here is a link about filters:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp - nauzilus, on 10/12/2007, -0/+7Ew, so it does. God knows why you're getting dugg down for that comment though. Perhaps someone could actually comment why they dugg you down?
I'm happy that it works in Opera, even though I use it as my main browser, it always seems like complicated javascript and css things sometimes confuse it. I like to believe that it's because Opera is flawless and it's just the author playing silly buggers, but I know that's not true ;) - caffiend, on 10/12/2007, -2/+6Sadly, some people still use IE.
- Vizin, on 10/12/2007, -0/+3"filter: alpha(opacity=70);" in place of "opacity: .7;" is the best way to get it to work in IE. Put both in, as filter doesn't work in real CSS.
- stevecole, on 10/12/2007, -2/+0It doesn't dim anything in my default IE 6 config. For that reason, this is worthless to me.
Why? Because I'm required to use IE 6 at work. Because I maintain websites for friends, family, and gamers who are not as computer literate as me and whose systems will never see a browser that is not a default component of their operating system.
Do you care? I think you should.
Before posting a clever web design tip, I would test to ensure it worked on the Top-N browsers in use today (where N is sufficiently great to encompass the vast majority of my audience's browser applications).
Nevertheless, I appreciate the attempt and the ensuing discussion. I wish I could experience and enjoy the feature.
- vibez, on 10/12/2007, -14/+5More of a Javascript trick rather than CSS.
- senfo, on 10/12/2007, -2/+14I don't see how 2 lines of JavaScript to the 9 lines of CSS is more "more of a JavaScript trick". What it really should be called here is DHTML; but whatever.
- tagawa, on 10/12/2007, -7/+1If it was pure CSS, THEN I would digg.
About as likely as M$ going open-source, however.
- pavetheforest, on 10/12/2007, -20/+6that was a ***** rendition/attempt at being "dashboard-like"
- halleyscomet, on 10/12/2007, -5/+11@pavetheforest
You think so?
Well then, show us your example. Show us the code you wrote that does a better job.
Since you were so free and harsh with your criticism, you MUST have written something more impressive, right?
Now, if you DON'T have or know of a better implementation that will run in "most modern browsers," then you're just a troll, in which case I can safely block you without missing out on anything interesting. - kudos, on 10/12/2007, -9/+5I agree with pavetheforest, it is a ***** implementation, why the ***** would you make the browser window black and then depend on javascript to make it visible again, if you have firefox with javascript off you just get a black screen. The correct way would have been to make a fixed layer with display none by default.
And yes halleyscomet, I have written better versions in my sleep. - halleyscomet, on 10/12/2007, -0/+2@kudos
In other words, you not only think it's a poor implementation, but have experience and specific criticisms to back up your opinion!
Are there any other Open Source implementations you would recommend using instead?
- halleyscomet, on 10/12/2007, -5/+11@pavetheforest
- DigitalPirate, on 10/12/2007, -28/+0Awesome Idea. However I wish Direct TV would allow customers to choose there local channel markets. Where I live my zip code is shared by two counties one county receives there locals from NYC & the other receives it from Philly.
Guess what I get stuck with Philly stations. Unlike comcast cable they give customers in this area both local markers so yes you get channel 2,3 both CBS etc.. etc..
One last comment stay away from Direct TV plus DVR this thing is horrible to use and they do not want to issue the old tivo one back to me.- viriiman, on 10/12/2007, -2/+9Umm, Yes?
- Ebeniz, on 10/12/2007, -2/+9huh?
- diggitydank, on 10/12/2007, -1/+20I think this comment belongs here:
http://www.digg.com/hardware/Watch_Satellite_TV_anywhere_just_be_sure_your_facing_south
Careful with those errant clicks. - andreas1999, on 10/12/2007, -0/+19probably due to digg's bad login functionality.. if you check the frontpage via rss and click two stories, try to comment on the first story and you'll be redirected to the second afterwards (last one clicked).. annoying!
- stoppedcode12, on 10/12/2007, -0/+1yeah, digg should use ajax for logging in and allow us to digg the story without reloading the page.
- mindsnare, on 10/12/2007, -0/+7you'd be able to do this with the nice fading effect which frankly is what makes it pretty using.
http://script.aculo.us/
good examples there - roele, on 10/12/2007, -4/+2Not that special... just a 100% x 100% div with a high z-index.I would use script.aculo.us library to fade in the black div from 0% to 75% opacity which works in all browsers... ;-)
PS: sorry mindsnare had the same in mind ;-) - Ramble, on 10/12/2007, -6/+3Looks like the Vista UAC effect.
- kudos, on 10/12/2007, -1/+7Really?? WOW, i bet they came up with the idea....
- noahhoward, on 10/12/2007, -3/+2I'm telling you we wouldn't have any of these nice effects without Vista. Icons, transitions, fades, alpha transparency, oh mighty Bill you spoil us with thy gifts.
- khra0, on 10/12/2007, -11/+0http://zwin.uni.cc/msn --> To Do Like this Page : http://zwin.uni.cc/msn/a4/index.htm
- SyRinX, on 10/12/2007, -3/+2What's with the MSN login form? trying to steal MSN accounts?
- ScnnrDrkly, on 10/12/2007, -6/+5Oh wow,. it's just like dashboard!
Except, the widgets don't zoom into view...
And, the "dimming" doesn't transition...
But besides that, it is just like dash board! Very cool.- pavetheforest, on 10/12/2007, -7/+4EXACTLY WHAT IM SAYING! Just a kid plugging his own blog----LAME
- Braxo, on 10/12/2007, -3/+5I wouldn't label this plugging his own blog. I thought this is a cool effect and an effect I used on a website. Except I did with Adobe's Spry (http://labs.adobe.com/technologies/spry/).
Keep in mind loading spry uses a lot more bandwidth than 12 odd lines of code, so this is a legitimate article in my view.
- upinsmoke570, on 10/12/2007, -0/+2i dont see the effect thats in the screen shot using firefox 1.5.0.8 or ie7. what gives?
- marksy, on 10/12/2007, -1/+4ugh, title says CSS - but it ALSO requires JS.
nice work!- nauzilus, on 10/12/2007, -3/+4Oh God, what a drag!
Your post doesn't say anything about requiring sarcasm. As such, I'm sure the author will appreciate your compliment of their "nice work".
- nauzilus, on 10/12/2007, -3/+4Oh God, what a drag!
- jkaiser, on 10/12/2007, -0/+5i wish this was posted 3 weeks ago. i just spent 20 minutes making my own cause I couldn't find a good one. Oh well...
- guytoronto, on 10/12/2007, -1/+6That's nice and all, but you have now sacrificed functionality for coolness.
I can't select and copy your e-mail address, so I have to manually type it into my address book (sure, I can use the VCard, but I don't like downloading anything foreign). I can't open your contact info and about you in a separate tab. You've spread a 1/2 page of information over three pages of "cool" graphics.
Give me clean and functional any day.- morbidous, on 10/12/2007, -0/+5Yeah, I pretty much agree with you in this one. It's a shame that the large majority of Web Designers prefer to put their efforts on bells and whistles over usability and accessibility design...
- joaob, on 10/12/2007, -2/+1It took him awhile to search for this on Google?
this effect has been around for awhile.....lightbox....- jkaiser, on 10/12/2007, -0/+1Well, when I was looking for it I didn't know what to call the effect. Searching for "background fade" or something similar doesn't return what you want.
- Scarblac, on 10/12/2007, -0/+4What I don't understand is, why does he use Javascript to set "display: none" on the background initially, when he could have just added that line to the CSS in the first place.
- murderdesign, on 10/12/2007, -7/+0looks jacked from: http://murderdesign.com/lab/ajax-portscanner/ - click scan
- codethis, on 10/12/2007, -0/+6just because another website fades the page doesn't mean that it was jacked
the code is totally different
- codethis, on 10/12/2007, -0/+6just because another website fades the page doesn't mean that it was jacked
- gaetanocaruana, on 10/12/2007, -0/+3does not work well on firefox2. There is part of the screen at the bottom that is not covered by the dim effect
- mooninite, on 10/12/2007, -0/+3Works fine with Firefox 2.0 in Linux.
- converge, on 10/12/2007, -1/+4http://www.duggmirror.com
- herkalees, on 10/12/2007, -0/+8To make this same effect also work in IE6 (and 7 too I believe), just add this one line of Microsoft-only code to the CSS style declaration:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
P.S. Digg comments, lately, are filled with many whiney bitches lately.- tigerpaper, on 10/12/2007, -0/+2This opacity filter is still kind of iffy in IE. For instance, when applied to img tags.
Does anyone know how a completely cross-browser css effect such as this can be applied without js?
I'm going for an opacity->opaque effect such as used on the homepage of cssremix.com but for some reason can't seem to get the i.e. css opacity working on imgs.
Help?
- tigerpaper, on 10/12/2007, -0/+2This opacity filter is still kind of iffy in IE. For instance, when applied to img tags.
- adamleon, on 10/12/2007, -2/+0Only thickbox seems to be cross browser compatible... mac safari etc. Does anyone know of others that are properly tested cross browser/platform?
http://script.aculo.us/ ? - Zarthia, on 10/12/2007, -0/+1wow... in IE7 your screen goes black instead of transparent Grey... got Microsoft... not
- shockertwin, on 10/12/2007, -0/+1Once again, you have to use microsoft filters. Untill IE8, you wont be seeing any significant improvements in this CSS *****.
- eljaysun, on 10/12/2007, -1/+3That CSS effect really goes great with the tables used in the example site.
Yikes. Missing the point of CSS? - aychamo, on 10/12/2007, -3/+0I'll never understand why these nerds post their absolutetly horrible pictures all over the net.
- pagani07v2, on 10/12/2007, -1/+2i'll never understand why you care
- JoeDonH, on 10/12/2007, -0/+2Wow, go to his "new" website:
http://www.dbachrach.com/
and click on "Contact". If I didn't know better, I'd swear that was Zach Braff from "Scrubs". - DevilsAdv0cate, on 10/12/2007, -0/+0Is this the one that produces a the fade effect like the one when using the menu at www.damninteresting.com? If so, this is lame.
- nubnub, on 10/12/2007, -2/+1This is not a css effect this would be a javascript effect. Try to avoid javascript at all costs.
- dantan, on 10/12/2007, -1/+0looks nice - I use the lightbox for my gallery.
But when I think about - I actually do not like this - lets wait how long it takes until the ad-industrie covers dozens of webpage with these "pop-ups"
Wonder if there would have been so much interest on pop-ups those days. - antdude, on 10/12/2007, -1/+1Bah, my employer blocked this site. :(
- michaelvaf, on 10/12/2007, -1/+1some cool links here! dugedy dug dug
- buckdog05, on 10/12/2007, -2/+1Doesn't Digg use this when it asks you to login?
- novaworks, on 10/12/2007, -0/+1nice, but there are already a ton of "lightboxy" effects already available.
Also - this doesn't work with IE and although it seems that people sometimes think you can ignore 80% of the browser market, you unfortuanately can not. It doesn't matter that FireFox is 100 times better than IE - if it doesn't work with IE then it's er....totally useless. - cbmeeks, on 10/12/2007, -1/+1I like. Diggy.
cbmeeks
http://www.codershangout.com - codestain, on 10/12/2007, -0/+1Nice job, helped me out with something for my job....
As for those fussing about IE.... the percentages wouldn't work for the width and height. I changed it to pixel values and it works great for me... under IE6 testing anyhow. I'll be testing IE7 later today. I basically ended up with the css something like the following:
.darkenBackground {
background-color: #FFFFFF;
FILTER:Alpha(Opacity=30); /* IE */
opacity:0.3; /* Safari, Opera */
-moz-opacity:0.30; /* FireFox */
z-index: 20;
height: 2100px;
width: 660px; /* Cover our maximum width */
width: 660px;
width: 660px;
background-repeat:repeat;
position:absolute;
left: 0px;
}
I couldn't find this information anywhere after googling... So, maybe it will help others. - codestain, on 10/12/2007, -0/+0oops... duplicate comment.... ignore the triple widths in that last comment...
- gunagns, on 01/08/2008, -0/+0How do i get the code?
I am sorry i can't see any link to download it..
Pls help.
Thank you.
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2008 —
Content posted by