Shadow effect around web-layout?

MagSafe

MagSafe

MagSafe

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
Hi there,

I'm looking for tutorials on how to create this look on a web-layout:
http://www.apple.com/macosx/leopard/index.html (the shadow effect surrounding the curved content area)

I *think* i've seen a few people on here successfully create it and i'm just looking for the best way, or a way of doing it at all really ... at the moment i'm mucking around with div's and a stylesheet but rather know the best way of achieving this.

Thanks for any help! :)
 
I've done a similar thing with my site in that it has a shadow down each side.

It is created with a 1 pixel high image that is repeated in the CSS . I guess the corners would be full size images in the footer CSS.

Will have a look when at home later and i have the webdevelopers tool bar.
 
Yep, Apple 'cheat' and use big background images for the header and footer, and then -for some peculiar reason - a huge 920x3000px image for the side shadows (instead of a simple y-repeating 1px image).

Header: http://images.apple.com/macosx/leopard/images/headerspotsbg20060807.gif
Sides: http://images.apple.com/macosx/leopard/images/whitepagebg20060807.gif
Footer: http://images.apple.com/macosx/leopard/images/whitebottomcap20060807.gif

It is the easiest way (and often the cleanest) without having to add extra non-semantic markup to hook nice rounded corner shadows images on to.
 
pfft, i didn't release that ... thats quite appauling actually, the amount of bandwidth it must use up!

Unfortunately my company doesn't have the luxury of unlimited storage and bandwidth :p, and we actually care about our dial-up users!

Anyways, thats basically why i'm looking for the 'proper' way of doing it, using as little images as possible and clean, cross-platform compatible css & xhtml coding :)

Cheers :)
 
MagSafe said:
Cheers Harib0 :)

I know ruffly how its done but would like the proper way :)
Click to expand...

Ah i take they way i and apple have done it with images isn't the proper way then? ;)
 
MagSafe said:
pfft, i didn't release that ... thats quite appauling actually, the amount of bandwidth it must use up!

Unfortunately my company doesn't have the luxury of unlimited storage and bandwidth :p, and we actually care about our dial-up users!

Anyways, thats basically why i'm looking for the 'proper' way of doing it, using as little images as possible and clean, cross-platform compatible css & xhtml coding :)

Cheers :)
Click to expand...

hmm 3.88 kB for an image (mine) is hardly a big bandwidth hog, nor does it require unlimited storage.

When you find the 'proper' way of creating a shadow like that be sure to post and let us all know
 
You must log in or register to reply here.
Back
Top Bottom