Fading-Out Containers
Posted by Andrew Faulkner on September 14th, 2005.
Andrew Faulkner has posted 208 articles.
RSS Feed for Andrew Faulkner
Drop-shadows are a staple web design technique used most often to make otherwise flat, boring containers appear more interesting and realistic. They’re all over the web, especially blogs, giving them depth and variation. So I won’t call them a fad. However, another method for creating interesting looking containers has hit the scene recently that I will call a fad - the “fading-out container”.
I first recall seeing this technique used by YTS. Since then, they’ve made an appearance all over the place. I’ve happily used them myself recently.
As Neil Young says, “It’s better to burn out, than to fade away”. So what do you think, are fading-out containers here to stay or will they fade-out just as quickly as they’ve phased in?
18 Responses to Fading-Out Containers
I can certainly see that technique becoming a trend. It does add a nice touch, if used wisely, as Andy does.
In terms of accessibility, I can’t see any issues with what Andy has done. I don’t think an extra div ever harmed anyone. Could you explain more?
Adding a div probably wouldn’t do any harm except where screen readers are concerned. I’m thinking of the sites that use this approach (and I’m looking for a good example) in an iframe or small content box - not in the main container. I think then it can make it extremely hard to read the text. Covering content is dangerous and can lead to a lack of contrast using this technique.
Dangerous might be a bit too harsh a term, but I see your point. Though I’d be interested to get confirmation on this from someone actually using a screen reade since, to be honest, I’ve never used one.
Here’s an example of usage in a small space. See how about 10% of the text isn’t readable. And if you hide the borders (I’ve seen an example of this but can’t find them) then it can really be an accessibility problem.
Isn’t the whole point hiding 10% of the text?
I know it’s the point. It just seems like if you have content there then it should be easily readable.
That’s your opinion, and not a true accessibility issue then. All design is subjective, especially design aesthetics, so making the claim that this presents an accessibility issue does not seem fair to me.
It is my opinion, yes. I always choose accessibility over aesthetics when designing. This design trend looks excellent but I don’t think it’s suitable for some sites.
Can you set a different stylesheet for screen readers? I haven’t read much up on making sites accessible for them, which is something I want to do. Am I right in presuming that it’s the same style as the site, but in smaller space?
Good question Gavin. From the looks of the w3c spec you can, though I haven’t seen it done very often.
As far as I know it’s almost exactly the same as using a print media style sheet. So should be very easy to implement and would give an answer to the issue raised about accessibility.
I personally like the trend.
In theory, one shouldn’t have to make a different stylesheet (or different pages) for access reasons. The site should be readable to all. My site is accessible using a screenreader but I don’t offer an alternative like large text or different stylesheets. People with access issues often have their own over-riding stylesheet.
Anyway - this is a little off-topic now. You can mail me for a discussion on accessibility. Back to the point:
It’s a nice trend with aesthetic appeal. Wouldn’t like to see it everywhere though.
Hey I found another good example of this, and he’s been experimenting with it a little.
Sorry for the newbie question … but could you “teach” me how to achieve such effect?? or direct me to a good tutorial?
Thanks!
Daniel,
We don’t really do tutorials here. Sorry.
Most of the time it’s done with a simple gradient (5-10px wide) that’s repeated over the central container. The gradient goes from a chosen colour and fades into the background colour. I don’t know of a tutorial but I’m sure others here could help out if I didn’t explain it in much detail.
Andrew,
Thank you for your time! I know you guys don’t do tutorials (pitty!)! I didn’t what to push the envelope!
Even though … thank so much for your explanation!
Faded-out technique at bottom of the page.
Related In Some Way, Shape Or Form
The above post has obviously kept you amused. Why not discover similar material:
The posts Outer Shadow on Site Containers, Gloss V2.0 Sweeps In?, CSS3: what it means, and what it doesn’t, are related to this post.
Or why not take time out to find out about the author of the post.
Sponsors
Recent Comments
- Schmoo:
Fadtastic, ferchrisakes, sort your RTE’s P tags out! It most assuredly told me it was... - Schmoo:
You’re spot on, Synthia, when you say it’s a case of "the newbies learned how... - alex:
very cool tips, hopefully many will benefit from this :))
Search
Topics
Authors
RSS Feeds
- Complete Feed
Everything from fadtastic. - Articles
Just the articles. No news/blog. - Reviews
Our book, brand and service reviews. - Blog/Site News
The 'FadBlog.' Site updates and news.
9rules
Terry,
In addition to the fading container trend, I’ve spotted another up-and-coming trend in the design world. Take Andy Rutledge’s site for instance. It has a fade to white effect over all of the content at the bottom. This is increasingly popular amongst trendy designers - especially when using iframes or equivalent div setups it seems.
It does throw up accessibility issues though.
Andrew Faulkner
September 15th, 2005
#