Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    I'm working on a makover for of a friends company site, and I'm stuck with the following problem:

    She wants a blue gradient as a left margin (small image with repeat-y), and the banner should float on top of this. The problem is that she wants a drop shadow on her banner. There will eventually also be some sort of low opacity non-figurative elements in the background. The banner floats on top of all this, and needs a transparent background (so that background elements are visible) as the banner can't be cropped square (It has an arched ending on the right side).

    The problem arises when the drop shadow is introduced. The shadow itself (which is a gradient), needs to fade into a background/foreground color. In the attached photo, it's white. Apperantly I can only choose a solid color, and not a gradient. The ideal thing would be to make the drop shadow fade into transparency, but I have no idea wether that's even possible.

    The way it looks now, is that the drop shadow has a an ugly white square below it, that covers any page-background design. (see attached photo).

    Is there any way of making the white area in the photo transparent?

    I know smoseley made a successful transparent drop shadow on the fancy "Motorola" site a couple of years ago, but I have no idea of how you managed that
    Attached Images Attached Images
    S. Rosland

  2.  

  3. #2
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    A follow up question;

    Is it possible to have two repeat-images in the background, meaning one would be the blue gradient left-justified, and the other a repeat-image right justified?

    If not, could I have one image as a background <body> property, and the other repeat-image inside the "main-content-div"?

    (see attached example for clarification)
    Attached Images Attached Images
    S. Rosland

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    The motorola thing was layers of on top of each other - a drop shadow in the BG and a curved image in a div over the scrolling div. It was a good hack, but wasn't perfect. For true alpha transparency, you need to use PNGs, but then you have backwards-compatibility issues.

    This will allow you to have two BG images in one "area".
    HTML Code:
    <div style="background: url('bluebg.gif') repeat-y left top">
        <div style="background: url('whitebg.gif') repeat-y right top">
            Content in here.
        </div>
    </div>

  5. #4
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Great Steve!

    I'll play around with that for a while and get back.
    S. Rosland

  6. #5
    Junior Member
    Join Date
    Oct 2008
    Posts
    13
    Member #
    17644
    Yeah, PNGs are great for transparent gradients and shadows. Never use a GIF, they're just horrible. LOL

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    PNGs are more efficient, too (i.e., yield smaller filesizes). Keep in mind that in IE pre-7 you'll need a fix to get PNG transparency working, and that that fix triggers a bunch of other bugs that you need to watch out for. Here's the IE PNG fix.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

adding shadows to transparent gif
,
drop shadow photoshop gif
,
gif image shadow
,

gif shadow

,
gif with shadow
,
how to create a shadow for a gif
,
how to create transparent gifs with gradient shadow
,
html gif image shadow
,
make transparent by shadow gif
,
transparent gif with drop shadow
Click on a term to search for related topics.
All times are GMT -6. The time now is 06:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com