Comments on: Shady Backgrounds

By: Jason Beaird

Jason Beaird — Wed, 01 Jun 2005 16:27:17 +0000

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.

By: Julian

Julian — Wed, 01 Jun 2005 07:17:48 +0000

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. :)

By: Justin P

Justin P — Wed, 01 Jun 2005 03:56:49 +0000

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?).

By: maratz

maratz — Tue, 31 May 2005 11:46:26 +0000

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

By: Jason Beaird

Jason Beaird — Tue, 31 May 2005 00:32:20 +0000

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.

By: Ryan

Ryan — Mon, 30 May 2005 20:04:34 +0000

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.

By: Jason Beaird

Jason Beaird — Sat, 28 May 2005 16:02:50 +0000

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.

By: maratz

maratz — Sat, 28 May 2005 02:05:06 +0000

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.

By: Justin P

Justin P — Sat, 28 May 2005 01:12:17 +0000

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.