Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 311
  • 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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