[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5573
  • 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


Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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