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

Drop shadow for web page

How do I create a drop shadow on the right and left edges of the content area in the web page I am creating.  See similar effect here: http://www2.aacc.nche.edu/fallmeeting/index.html.  It looks as though in this template the effect is part of the background image.  How can I duplicate the effect for myself.  I've tried to do so in photoshop, but am having no luck.  If there is a good tutorial online, I'd be happy to go through it.  Just point me in the right direction.

Thanks,
Delinda
0
sis2sweet
Asked:
sis2sweet
  • 2
3 Solutions
 
ajitha75Commented:
You need to create style for that. example would be ..

<html>
<style>
body
{
      text-align: center;
      background: url(bgd.gif) repeat;
      background-position: 50% 0;
}
</style>
<body><div id="main">This is Content Area</div></body></html>

The gif file should be something like they have in their website - http://www2.aacc.nche.edu/fallmeeting/img/bgd.gif.  Is this what you are looking for
0
 
sis2sweetAuthor Commented:
Hi ajitha,  

I understand how how the gif is used. What I don't understand is how to create the gif.  And if I can use CSS to add a drop shadow to the left and right sides of the content area, then I'd like to know how to do that.  I want to learn how to do this so I can add some interest to the websites I am designing.  They just look so flat around the edges, like there shouls be some sort of border (see my latest http://www.student.nvcc.edu/home/dfrazier/pasi/).  Drop shadow seemes like a simple solution.
0
 
SheharyaarSaahilCommented:
here is the background which they are using
http://www2.aacc.nche.edu/fallmeeting/img/bgd.gif

its a simple photoshop design, which they have applied to the body tag and then have placed their contents according to the bg :)
0
 
ajitha75Commented:
This URL will help you create a gradient in photoshop

http://iit.bloomu.edu/vthc/Photoshop/DRAWING/gradients.htm
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.

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