• 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.

  • 2
3 Solutions
You need to create style for that. example would be ..

      text-align: center;
      background: url(bgd.gif) repeat;
      background-position: 50% 0;
<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
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.
here is the background which they are using

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

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