Drop shadow for web page

Posted on 2007-10-03
Last Modified: 2008-01-09
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:  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.

Question by:sis2sweet
    LVL 14

    Assisted Solution

    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 -  Is this what you are looking for

    Author Comment

    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  Drop shadow seemes like a simple solution.
    LVL 65

    Assisted 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 :)
    LVL 14

    Accepted Solution

    This URL will help you create a gradient in photoshop

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
    Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …

    734 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

    18 Experts available now in Live!

    Get 1:1 Help Now