PDA

View Full Version : Another question about transparency


Andromeda
12-17-2005, 06:27 AM
I'm trying to create a semi transparent rectangle. By that I mean a rectangle which is coloured but see-through.

I've got a canvas with a transparent background, created a rectangle, chosen a fill colour and set the transparency to 20%. Other settings include, alpha transparency, gif, matte-transparent. When I preview it in Fireworks it looks fine. But once I've exported it and placed it in Dreamweaver there is no transparency and it looks like a solid rectangle.

An example can be viewed at http://www.newday.co.nz/test.html ('http://www.newday.co.nz/test.html')

Is anyone able to tell me if there's something I'm doing wrong????

Creative Insanity
12-17-2005, 07:49 AM
Ok not hard and yes you are doing it right. I have no clue about fireworks since I use photoshop but the steps should be the same.

The sample attached was done in this manner.

Select image (I used a simple gradiant.)
Create a new layer.
Create shape.
Lower opacity to 30%
Used PS's save for the web feature as a gif with a matt colour of #FF0000. The save mode should not matter as in PS that just removes some unneeded colours and script crap from the image.

Rest is history.. and yo kiwi!

davidj
12-17-2005, 10:57 AM
i didnt think you could have semi-transparency

i know you can set the background of an image using the alpha channel. You can also set layers above that with transparency values so the layer below shows through.

Creative Insanity
12-17-2005, 06:37 PM
In theory dj you are correct, but in practise with cunning tricks like opacity and fill percentages you can give the 'apperance'.

Andromeda
12-17-2005, 11:48 PM
CI, the image you created looks like you have the jigsaw piece semi transparent with a coloured background behind it. Can you create the same sort of thing but having the background behind it transparent so that when it's placed on a web page you can see the web page background.

DJ, apparently someone has seen a semi transparent background and wants me to create one like it but I won'ty be able to ask him what site it was until after the weekend. It sounds as though it can be done but I'm completely baffled as to what to do. My image even previews in Fireworks ok, it's just when I put it on the web site! :angry:

Thanks heaps to both of you for taking the time to reply.

Creative Insanity
12-18-2005, 12:15 AM
Ahh so that is what dj is refering to. You cannot have a transparant layer as such.. you need to have a colour of some sorts for it to be some degree of opacity or there is no image there at all.

This what you are talking about then?

Andromeda
12-18-2005, 04:39 AM
What I'm trying to achieve is a dropdown menu with a semi transparent background.

If you look at http://www.newday.co.nz/test.html ('http://www.newday.co.nz/test.html') you'll see that I've created a dropdown menu where the background is transparent and all you can see are the words but you can't read the words too well so that's why I want semi transparent rather than all transparent.

Does that help?

ranjan
12-18-2005, 07:22 AM
http://dreamlettes.net/whims/transMenu.html ('http://dreamlettes.net/whims/transMenu.html')

Andromeda
12-18-2005, 08:27 PM
Yes ranjan, that's the sort of thing I'm meaning. Now I just need to know why my images aren't appearing semi transparent when they should be!!

ranjan
12-18-2005, 11:33 PM
The technique uses PNG ('http://en.wikipedia.org/wiki/PNG') as the graphics format. Please read about this format if you are not aware of what its advantages are over gif images.

For purposes of this translucent menu it would however suffice to know that PNGs support alpha transparency, or in other words PNGs can be translucent, while gifs can only be transparent.

That being said the most popular browser IE6 does not have native support for the PNG format. IE7 (due to be released soon) will support PNGs.

With that as a background if you view source of the example I posted, you will see that the background used for all browsers other than IE 6 is a PNG file.

For IE 6 and below we use some CSS hacks as coded below:

<!--[if lt IE 7]>
<style>
#subMenu {
background: none;
}
#subMenu ul {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/transBG.png', sizingMethod='scale');
}
#subMenu ul a {
position: relative;
z-index:1;
}
</style>
<![endif]-->

The above code uses IE conditional comments (<!--[if lt IE 7]>) to hide this piece of code in all bowsers except IE6 and below

It also uses Alpha Image Loader filter of IE to use the translucent PNG as background.

A link bug exists when PNGs are used as background, to get rid of this we use relative links with a z index of 1

Andromeda
12-20-2005, 05:57 PM
Hi ranjan,

Thanks for you reply. Now I understand why my gif wouldn't do what I wanted it to do!!
Thank you!

Thanks also for the code, I appreciate that.