• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

Adding left drop shadow to website

What is the recommended way to add a left-drop shadow to a website when the shadow involves the header, navigation, body and part of the footer.  

http://nsitedesigns.com/nsitedesigns/lakeshore/index.html
http://nsitedesigns.com/nsitedesigns/lakeshore/lakeshore.css
layout-final.jpg
0
nsitedesigns
Asked:
nsitedesigns
  • 4
  • 2
1 Solution
 
ChrisCommented:
My advice would be don't. Looks much better without the drop shadow.
0
 
nsitedesignsAuthor Commented:
Client liked the "jumping off the page" aspect.  When I did it in ps, I wasn't thinking of how I was going to implement it for the web.  I have done drop shadows before but they were always on the right and I simply incorporated them in the background image.  With all these elements involved, I am not sure how to do that without flattening each item (header, main photo of man working, body copy) so that there is no "break" in the drop shadow.  I was hoping there might be a css technique that I could implement on the html.
0
 
GaryCommented:
In your .container css add
box-shadow: -5px -5px 5px 5px #808080;

just amend the colours and widths as needed
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
nsitedesignsAuthor Commented:
Is there a way to add opacity to this?  It does the job but is very harsh.
0
 
nsitedesignsAuthor Commented:
I found something online that gave me what I was looking for.  It also included some other code that needs to be added so since this is such a new technique.  Thought I would include for my records.

.container {	
	 box-shadow: -5px -5px 20px  #1f1f1f;
}


container {
-moz-box-shadow: -5px -5px 20px #1f1f1f;
-webkit-box-shadow: -5px -5px 20px  #1f1f1f;
box-shadow: -5px -5px 20px  #1f1f1f;
}

Open in new window

0
 
GaryCommented:
Try
-15px -15px 30px 0 #404040

Just play with the colour and the last two measurements.
Your background kinda negates the shadow effect.
0
 
nsitedesignsAuthor Commented:
Nice.  I changed your color which was too gray for my tastes to #000 and it looks good.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now