Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Website Drop Shadow Effect Help
Saint_Michael
post May 10 2008, 03:27 AM
Post #1


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,305
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew



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

Attached File  default.css ( 2.8k ) Number of downloads: 6

Attached File  index.html ( 3.62k ) Number of downloads: 6


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.

This post has been edited by Saint_Michael: May 10 2008, 03:35 AM
Go to the top of the page
 
+Quote Post
sonesay
post May 10 2008, 03:49 AM
Post #2


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 642
Joined: 20-June 07
From: Auckland
Member No.: 45,102



I could use 50 credits biggrin.gif. I'm going to give it a shot you want the final html + CSS updated?
Go to the top of the page
 
+Quote Post
jlhaslip
post May 10 2008, 04:00 AM
Post #3


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,880
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol



Which drop-shadow are you looking for? The one on the centre portion of the page?
Go to the top of the page
 
+Quote Post
Saint_Michael
post May 10 2008, 04:09 AM
Post #4


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,305
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew



oops laugh.gif, 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.

This post has been edited by Saint_Michael: May 10 2008, 04:10 AM
Go to the top of the page
 
+Quote Post
truefusion
post May 10 2008, 06:04 AM
Post #5


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,864
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew



In your case, you've made it simple to work with—you have a fixed width for the content. Do this:
  1. Make a DIV element that surrounds everything.
  2. Open up an Image manipulation program.
  3. Make the width of the document slightly wider (maybe 30px wider) than the width of the content ID.
  4. Make a bi-linear gradient that looks good to your liking (make sure the background is transparent on all layers).
  5. Fade the bottom half out to your liking. Export, PNG.
  6. Fill that newly created DIV element with a none-repeating background of that PNG.
Optional: Set a min-height for that new DIV element.
Go to the top of the page
 
+Quote Post
sonesay
post May 10 2008, 06:15 AM
Post #6


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 642
Joined: 20-June 07
From: Auckland
Member No.: 45,102



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.
Attached File(s)
Attached File  sm.zip ( 171.32k ) Number of downloads: 3
 
Go to the top of the page
 
+Quote Post
Saint_Michael
post May 10 2008, 07:05 AM
Post #7


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,305
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew



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.

CODE
#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.
Go to the top of the page
 
+Quote Post
sonesay
post May 10 2008, 07:15 AM
Post #8


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 642
Joined: 20-June 07
From: Auckland
Member No.: 45,102



No problem thanks for the credits it was well worth the time spent biggrin.gif. I still don't see the error, what was it?

This post has been edited by sonesay: May 10 2008, 07:20 AM
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. The Most Annoying Website(57)
  2. The Best And Free Website/html Editors + Text Editors(48)
  3. Give Me Website Ideas..(30)
  4. Oldest Website?(37)