Create a Drop Shdaow On A Web Page


Could someone tell me a quick and painless way of creating a drop shadow around the content area of a webpage so that it appears as if the webpage is floating /hovering on the background .

This is a nice effect that also gives a 3d look to the entire website

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


Scot again....what image editing program are you using?  If you're using fireworks, you can use the Drop Shadow filter on the main object.  You can then either output the background by itself as an image to be loaded as a no-repeating background...or you can get complicated and use CSS to create borders with tiled images.
kevinb4940Author Commented:
I have both Photoshop cs2 & Fireworks.
Would the no-repeat background image not be too large of a file and slow my website down?
I know some CSS and understand the concept of  creating a 1 px high image with the marquee tool.

What I don't get is how I get my content area drop shadow to be centred on my page.
I tried the first method you suggested (output the background by itself as an image to be loaded as a no-repeating background.) but How do I get the content area to be centered??
As long as the background image isn't too complicated, then you probably won't run into an issue.  They key is to output the no-repeat image as a .jpg or .gif that isn't too large.  If the image is say 900px wide and 770 px high, you can create your page content in a table that is 880 px wide and 750 px high and center the table.  You can also use the css margin-top and margin-bottom attributes to keep the table content within the span of the image.

If you don't want to use the straight background no-repeat image, you can create an extra row on the top and bottom of your table and an extra cloumn on the left and right of your table and use:
<td style="background-image:url(your-left-border-image-here.gif); background-repeat:repat-y; background-position:left;">
on the left column
<td style="background-image:url(your-right-border-image-here.gif); background-repeat:repat-y; background-position:left;">
on the right column
<td style="background-image:url(your-top-border-image-here.gif); background-repeat:repeat-x; background-position:left;">
on the top column, and
<td style="background-image:url(your-bottom-border-image-here.gif); background-repeat:repat-x; background-position:left;">
on the bottom column...
If you have a rounded corner for the background image, you can create a square of the corner image and crop it into the tables....I use this effect when I'm trying to avoid the boxiness of CSS

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

kevinb4940Author Commented:
Thanks a lot for your help..That makes sense now

I forgot to add on the web site effect question, and again on here that the easiest thing to do is - as you mentioned - to slice or create a 1px x whtever image height you need and vice-versa image, save it seperately, and then tile the image along in the table or where ever you need it.

It really speeds up the load time.

BTW, are you in Northern Ireland?

kevinb4940Author Commented:
Yes I am Scot I live in County Tyrone

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.