Grow your CSS skills. Land your dream job.

Creating a dropshadow over a gradient background

  • # December 6, 2009 at 2:50 am

    Hi!
    I’m working on a new site and am having a slight problem with my drop shadow on my content area that is over a gradient background.

    I’ve done drop shadows before but my backgrounds were always a solid color so I would just select that color and the shadow when cropping from photoshop.

    If you look at this site I think it will be more clear the problem I’m running into.
    http://www.auriellaoneill.com/Beta/index.html

    The header and footer are looking good but the middle is a little scary.

    Is there a better way to do this? I was saving the image as a png. I also tried gif.

    Thanks,
    Lyle

    # December 6, 2009 at 4:49 pm

    Yea… you have a couple choices.

    This is your current repeating background image:

    http://www.auriellaoneill.com/Beta/images/bodybg.png

    wtf? Why does this image not have a consistent fade? If you make this image consistent, repeating it will not be so strange looking

    Another option is to make one large background image that covers the entire fade as it should be.

    # December 6, 2009 at 11:02 pm

    This would be a perfect example where using CSS3 box shadows would make quick work of it!

    Just use them on your main content area like:

    Code:
    -moz-box-shadow: 0 0 10px black;
    -webkit-box-shadow: 0 0 10px black;

    You could do your rounded corners in a similar manner as well.

    # December 7, 2009 at 11:10 pm

    Thanks Chris!
    I’m going to mess around with this now. I’m still not the best at coding yet but this seems pretty easy.

    What about in the dreaded Internet Explorer? Any idea how this works or if at all??

    Thanks,
    Lyle

    # December 7, 2009 at 11:21 pm
    "WildSpirit" wrote:
    What about in the dreaded Internet Explorer? Any idea how this works or if at all??

    yea… chances are you still get 30-40% of your visitors from IE6 and IE7, which don’t do CSS3. I don’t even know if IE8 does shadows. (anyone?) That’s why I have been sticking with CSS2.1.

    # December 7, 2009 at 11:41 pm

    That was my fear cause that would have fixed my problem easily.

    So How do I fix this problem. I don’t quite understand the first response I got. Some pages are also really short, like the contact page, so I’m running into another problem with the bottom rounded corner image. You’ll see what I mean if you take a look at it.

    I don’t know why this is being so challenging!

    # December 7, 2009 at 11:54 pm

    Yea… that didn’t really make any sense re-reading it…

    Look at your current repeating bg image
    http://www.auriellaoneill.com/Beta/images/bodybg.png

    Repeating images should be practically the same at the top and bottom of the image, so that when you repeat it over and over, it looks like one long shaddow.

    This isn’t the best example, since it’s horizontal instead of vertical, but look at this image:
    [img]http://www.websitesinaflash.com/images/layout/gold-l.jpg[/img]

    You’ll see that the entire image is exactly the same on the left and right side… so it repeats horizontally on my home page to make a "fadding bar"… w/e

    Does that help?

    # December 10, 2009 at 11:12 pm

    Thanks Ashton,
    Sorry it’s taken so long to post back… been swamped! Anyways, I created my own drop shadow by creating a black box with a gaussian blur instead of using drop shadow from the blending options in photoshop and that seemed to do the trick!

    Thanks for your patience and time for explaining!

    Until next time!
    ~Lyle

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".