Solved

Adding left drop shadow to website

Posted on 2014-02-17
7
263 Views
Last Modified: 2014-02-17
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
Comment
Question by:nsitedesigns
  • 4
  • 2
7 Comments
 
LVL 12

Expert Comment

by:Chris
ID: 39865060
My advice would be don't. Looks much better without the drop shadow.
0
 

Author Comment

by:nsitedesigns
ID: 39865068
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39865109
In your .container css add
box-shadow: -5px -5px 5px 5px #808080;

just amend the colours and widths as needed
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:nsitedesigns
ID: 39865128
Is there a way to add opacity to this?  It does the job but is very harsh.
0
 

Author Comment

by:nsitedesigns
ID: 39865207
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
 
LVL 58

Expert Comment

by:Gary
ID: 39865222
Try
-15px -15px 30px 0 #404040

Just play with the colour and the last two measurements.
Your background kinda negates the shadow effect.
0
 

Author Comment

by:nsitedesigns
ID: 39865254
Nice.  I changed your color which was too gray for my tastes to #000 and it looks good.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Form Processing in PHP 11 32
Centering Vertically 3 28
Advice on Xojo as a development tool over VB. 4 40
P tag not forcing line space 2 23
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now