Jump to content
xisto Community
Saint_Michael

Website Drop Shadow Effect Help

Recommended Posts

Well I am in a need of help, I want to add this cool drop shadow effect to a website I am building, but unfortunately for me I can't seem to get it right. I want to apply this drop shadow effect to this website

default.css
index.html

The first person to effectively apply this drop shadow to this website will get a 50 credit prize

All the files are provided, you have to download the OSWD file to get the images and style effect, there is no rush but if you can get it done right away I be much appreciated.

Edited by Saint_Michael (see edit history)

Share this post


Link to post
Share on other sites

Which drop-shadow are you looking for? The one on the centre portion of the page?

Share this post


Link to post
Share on other sites

oops :lol:, yeah I want the center shadow, but I still want the original design from the attachments, so basically your transplanting drop shadow from the link to the attachments.

Edited by Saint_Michael (see edit history)

Share this post


Link to post
Share on other sites

In your case, you've made it simple to work with—you have a fixed width for the content. Do this:

Make a DIV element that surrounds everything.

Open up an Image manipulation program.

Make the width of the document slightly wider (maybe 30px wider) than the width of the content ID.

Make a bi-linear gradient that looks good to your liking (make sure the background is transparent on all layers).

Fade the bottom half out to your liking. Export, PNG.

Fill that newly created DIV element with a none-repeating background of that PNG.

Optional: Set a min-height for that new DIV element.

Share this post


Link to post
Share on other sites

Heres my solution I checked in firefox and safari and it works. IE7 fails lol theres like a huge gap between the drop shadow of the top and middle. Have a look maybe somone can point out what the error is for IE 7.

sm.zip

Share this post


Link to post
Share on other sites

Thanks sonsay and yeah I was able to figure out why it wouldn't work in IE, took about 20 minutes, but I got it. Interesting enough you just missed one word, and if you take a look at the coding you will see which one word is that.

#wrapper-menu-top {background: url('images/bg02-trans-left.png') repeat-y left top;width: 918px;margin:0pt auto;}#wrapper-menu-top-right {background: url('images/bg02-trans-right.png') repeat-y right top;}#wrapper-content-top {background: url('images/bg02-transf-left.png') no-repeat left top;width: 918px;margin:0pt auto;min-height: 200px;}#wrapper-content-top-right {background: url('images/bg02-transf-right.png') no-repeat right top;min-height: 200px;}

So Yeah, thanks for the big help sonesay, the website doesn't look as flat anymore.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.