Shady Backgrounds

May 27, 2005

I’m always looking for new tricks to add to my magical bag-o-css, but as far as I know, there are about 3 good methods to making shadowlike page backgrounds. I’m not going to go in depth on this since I know these have probably been explained in depth over at ALA or somewhere else, so here’s the short, short version:

Method One:

You can define a vertically tiling, horizontally centered background image that has the content area and its casted shadow worked in.

Examples:

Jasongraphix.com - This seems to be the only part of my site that everybody wants to gank.
CameronMoll.com - Another classic example.
MikeIndustries.com - Mike’s vertically tiled background includes the content area, the sidebar, and the gradient that fades to a solid color since he isn’t dealing with a textured background.

Pros: There are a ton. The main one being the ability to add other site background elements to it that you want to continue down the page…like a sidebar.

Cons: Background textures (if you have them) are dependent on that repeating image if you have a drop shadow being cast on them. It’s also difficult to have a bottom on the page for this reason.

Method Two:

Checkered Gif Example If you have a body background that you want to tile vertically and horizontally, and still want that nice drop shadow from your content “layer”, things get a bit more tricky. You can either use a jpeg that has a little bit of the background texture in it being sure to get it to line up by centering the tiled background image, or use what I call the checkered gif. This is just a gif image that is checkered with opaque and transparent squares to make appear translucent.

Examples:

Spoono.com - This is the first place I saw this technique. Notice the left-side drop shadow.
EchoDeep.com - I designed the dark border around the content area on this site using that checkered gif technique.
This silly little “sandbox” experiment - I did this a about a year ago when I was tinkering with background concepts…but it has a checkered gif that also fades out to match the background. (May not be compliant with…well…any browser as it was just an experiment.)

Pros: You get a shadow in IE…

Cons: It’s a very limited technique and using Checkered gifs is really just a hack for not having png translucency support in IE yet. ARGH!

Method Three:

Make ACTUAL SHADOWS using alpha-transparent PNGs for the browsers that support it. What a novel thought. If only Microsoft would get on with releasing IE7 so I can relabel this entire post “obsolete”.

Examples:

Maratz.com - Check it out in Firefox, then go back and see it in IE6.

Pros: It’s the right tool for the job and it’ll revolutionize web design once it’s fully supported.

Cons: It doesn’t work in IE6 for Windows…although the developers of IE7 say it’s already implemented…as well as tabbed browsing.

04:05 PM/ CSS :: Comments (9)

Comments

Justin P at 6:12 PM on Friday, May 27, 2005

Something that is very important to consider with drop shadows, is how they will look in the horizontal areas of the content wrapper. Since you used Mike's site as an example, take a look at it and note the corners (where the vertical and horizontal shadow meet), they don't connect. In Mike's case, it works OK because he has a light shadow on a light background, but in other cases (with a large drop shadow) it can be an area of great headache.

Without a lot of extra markup and image slicing, it's often easiest to go with a fixed width layout in these scenarios.

maratz at 7:05 PM on Friday, May 27, 2005

Top and bottom horizontal shadows should belong to header and footer, which should be then actually wider than the main 'focused' layout. They both should be with adequate paddings, so their backgrounds cover the main vertically repeating image. See how it's done on MirkoBeovic.com.

When I designed maratz.com, I opt for PNGs, simply because I had no alternatives to do horizontal shadow in a footer, since I had tiled background and the height of the content had to be flexible.

Regarding IE7, I'm mostly afraid of its' potential ability of bypassing current 'no-IE' hacks, but without complete support for those hidden rules.

Jason Beaird at 9:02 AM on Saturday, May 28, 2005

Great feedback...

"When I designed maratz.com, I opt for PNGs, simply because I had no alternatives to do horizontal shadow in a footer, since I had tiled background and the height of the content had to be flexible."

This is exactly the type of problem I was working on Friday evening when I wrote this post. I have a layout with a tiling background of diagonal lines. I want to cast a shadow on it...and the content area has to be flexible with a footer. I plan to make a PNG version for everything but IE6 and a JPG version that will not look as good...but will hopefully still have the shadow. I'll post the example on Monday.

Ryan at 1:04 PM on Monday, May 30, 2005

maratz:

Regarding IE7, I'm mostly afraid of its' potential ability of bypassing current 'no-IE' hacks, but without complete support for those hidden rules.

Holy crap, I never even considered that. Last I heard, IE7 was more security focused than web-standards focused, and changing web-standard compliance for them is really an all-or-nothing thing. There are so many sites leaning on IE-specific hacks, and unless they eliminate the need for ALL of those hacks, they end up breaking designs. Because they weren't compliant in the first place, now they need to implement the standard, AND everyone's hacks, essentially needing two rendering engines to ensure they don't break the internet for Grandma.

Man, I'm glad I'm a programmer and not a designer.

Jason Beaird at 5:32 PM on Monday, May 30, 2005

This is where I might normally try to be optimistic and say "At least Microsoft does a good job of forcing the newest version of its browser on Windows users." But the truth is that there are more IE5x users than all Netscape and Opera users combined. To make matters worse the folks at the IEBlog recently announced that "it should be no surprise that we do not plan on releasing IE7 for Windows 2000". Oh well. I guess we'll cross that bridge when we get there.

Anyway, here's that example I promised last week. For IE, I'm using the checkerd gif method...and for all other browsers I'm using transparent PNGs.

maratz at 4:46 AM on Tuesday, May 31, 2005

Yes, this fallback is looking good. And the overall design is cute.

Justin P at 8:56 PM on Tuesday, May 31, 2005

Man, that background is too mesmorizing. I started hallucinating as soon as I opened that page.

It would look a lot better (for me) if the colors where toned down a bit. I don't know, maybe something like this?).

Julian at 12:17 AM on Wednesday, Jun 1, 2005

Got here from Markku's site. I just want to say I loved your design. I hope to have more time learnng how to create styles like yours. More power. :)

Jason Beaird at 9:27 AM on Wednesday, Jun 1, 2005

Thanks Julian!

I see what you mean Justin, but I really like the pop of the white against the lined background. I may tone down the contrast a bit...just for you. :) The sad part is that Friday is my last day with Acceleration. So...it looks like I won't have enough time to redesign the site. I don't think any of the current designers are standards-fans enough to pick this design up and run with it. If they don't, I'll find something fun to do with it...maybe a new skin for this site.