Professional Web Applications Themes

How do I create a rounded box with a drop shadow with transparencyon a gradient background? - Macromedia Fireworks

Hi I trying to create a content box on my website with rounded edges placed on a gradient background (top-down). I have created a box the way I would like it in Fireworks 2004, and I have exported the top, bottom and a bit of the right edge as web slices. The problem I have is that when publish this to my test site - then around the corners I see a white color - how do I make the image transparent so the gradient background shines through? /Peter...

  1. #1

    Default How do I create a rounded box with a drop shadow with transparencyon a gradient background?

    Hi

    I trying to create a content box on my website with rounded edges placed
    on a gradient background (top-down).

    I have created a box the way I would like it in Fireworks 2004, and I
    have exported the top, bottom and a bit of the right edge as web slices.

    The problem I have is that when publish this to my test site - then
    around the corners I see a white color - how do I make the image
    transparent so the gradient background shines through?

    /Peter
    Peter Guest

  2. #2

    Default Re: How do I create a rounded box with a drop shadow with transparency on a gradient background?

    Do you have a URL?

    Cheers,
    Sam

    "Peter Binderup" <dk> wrote in message
    news:btoh1u$4a5$macromedia.com... 


    Sam Guest

  3. #3

    Default Re: How do I create a rounded box with a drop shadow with transparencyon a gradient background?

    Sam Poikail wrote: 

    http://home.binderup.org/

    Please note that it is a work inprogress - so things might look strange
    and different for each reload :-)

    /Peter
    Peter Guest

  4. #4

    Default Re: How do I create a rounded box with a drop shadow with transparencyon a gradient background?

    I have made it sort of work - I use PNG32 images instead - now my
    problems are only with IE (God I hate that browser more and more).

    /Peter
    Peter Guest

  5. #5

    Default Re: How do I create a rounded box with a drop shadow with transparency on a gradient background?

    Peter Binderup wrote:
    || I have made it sort of work - I use PNG32 images instead - now my
    || problems are only with IE (God I hate that browser more and more).
    ||
    || /Peter

    Peter,

    It should work fine if you set the backgrond matte of your image to the same
    colour as the background of your html page without having to use png.

    Peter R.



    Peter Guest

  6. #6

    Default Re: How do I create a rounded box with a drop shadow with transparencyon a gradient background?

    Peter R wrote: 

    It works fine now with Mozilla (my main browser) - I plan to do a
    version for IE where I don't have a gradient background.

    I have searched Google and it does appear that IE doesn't support PNG
    files with transpatent Alpha channels (IE 5.5 for Mac does however...)

    /Peter
    Peter Guest

  7. #7

    Default Re: How do I create a rounded box with a drop shadow with transparency on a gradient background?

    In article <btp5hs$nu3$macromedia.com>,
    Peter Binderup <dk> wrote:
     

    Your backgroud gradient is so subtle that I think you could get by with
    placing the appropriate part of it behind your shadowed box in
    Fireworks, then exporting as GIF. Crop tightly to the edge of the
    shadow. The blue might not match exactly, but it should be close enough.
    You'd only have visible problems if the content stretched the box too
    far.

    --
    Lanny Chambers, St. Louis, USA
    http://www.hummingbirds.net/
    Lanny Guest

  8. #8

    Default Re: How do I create a rounded box with a drop shadow with transparencyon a gradient background?

    Peter Binderup wrote:
     

    There are a number of workarounds.

    http://www.playingwithfire.com/test/pngbehavior/demo.html

    Linda Rathgeber
    ----------------------------------------------------------------------
    Design Aid: 10-Palette Pack for Fireworks & Flash
    http://www.webdevbiz.com/graphics.cfm
    Playing with Fire | http://www.playingwithfire.com
    Victoriana | Theme Pack 03 - Club | http://www.projectseven.com
    Team MM Fireworks Volunteer | www.macromedia.com/go/team
    ----------------------------------------------------------------------

    Linda Guest

  9. #9

    Default Re: How do I create a rounded box with a drop shadow with transparencyon a gradient background?

    Linda Rathgeber wrote:
     

    I did take a look at those links before, but they seem to apply only
    when using <img src="".....

    I have defined the background-image in CSS and there it doesn't fix the
    problem.

    /Peter
    Peter Guest

  10. #10

    Default Re: How do I create a rounded box with a drop shadow with transparency on a gradient background?

    Really wish there was a map to you playground, but then again maybe there
    would be bandwidth issues :o/

    Cheers,
    Sam

    "Linda Rathgeber" <rr.com> wrote in message
    news:btp7m8$q9o$macromedia.com... 
    >
    > There are a number of workarounds.
    >
    > http://www.playingwithfire.com/test/pngbehavior/demo.html
    >
    > Linda Rathgeber[/ref]


    Sam Guest

  11. #11

    Default Re: How do I create a rounded box with a drop shadow with transparency on a gradient background?

    Peter Binderup wrote:
    || Linda Rathgeber wrote:
    ||
    ||| There are a number of workarounds.
    |||
    ||| http://www.playingwithfire.com/test/pngbehavior/demo.html
    |||
    ||
    || I did take a look at those links before, but they seem to apply only
    || when using <img src="".....
    ||
    || I have defined the background-image in CSS and there it doesn't fix
    || the problem.
    ||


    I happened across this earlier today but I haven't had a chance to check it
    yet. It might be worth a try.

    http://www.skyzyx.com/scripts/sleight.php

    Peter R.


    Peter Guest

  12. #12

    Default Re: How do I create a rounded box with a drop shadow with transparency

    The usual way of overcoming this problem is to be smart and use backgrounds and plan the design well. There are also a number of methods to created "fake" alpha, which I've used in some of my designs for forums.
    Also remember that a lot can be achieved using standard JPEGs and playing around with the design.

    Jakob Persson 


    Solipsist Guest

Similar Threads

  1. Drop shadow text background not transparent
    By David_C_Anderson@adobeforums.com in forum Adobe Indesign Windows
    Replies: 7
    Last Post: August 4th, 11:22 PM
  2. Drop Shadow over CMYK background
    By AlexTham in forum Macromedia Freehand
    Replies: 5
    Last Post: December 14th, 12:38 PM
  3. Create a drop shadow inside the photo frame using InDesign??
    By Insight@adobeforums.com in forum Adobe Indesign Windows
    Replies: 4
    Last Post: July 26th, 03:48 AM
  4. Add drop shadow to photo on colored background
    By Jerry Schwartz in forum Adobe Photoshop 7, CS, CS2 & CS3
    Replies: 1
    Last Post: August 10th, 04:10 PM

Bookmarks

Posting Permissions

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139