PNG transparency based divs

Shoseki

Shoseki

Shoseki

Soldato
Joined
12 Jan 2004
Posts
3,172
Location
Brighton
Hi,

Sorry, I should have elaborated, this is in reference to web development, all of this is to be done in a web page.

I ran across an interesting problem, as I am attempting to make a funky effect in javascript.

I can load an image, such as a PNG, which has transparency. For example :

greenc.png


Now, this image has both transparency (alpha) information, and of course, colour information (it is a simple #0f0 or full green solid colour, with an inverse transparent radial gradient cut out of it).

Now, the interesting thing is, I can pop this image into a div, either using a <img> tag or as the background of a div, either way will display the image wherever I place the div. However, if I decide to assign a background colour to it (for example, red #f00) it will make a single div, fill it with the colour red, and then apply the the image on TOP of the div.

So basically we have

SOLID BACKGROUND COLOR + SEMI-TRANSPARENT IMAGE = FINAL DIV CONTENTS.

Now, I though of a nice little project for myself, but it requires an arbritrary coloured "particle". As far as I can tell, there are 3 ways of doing this :

1) I could make a single PNG for each and every permutation. With 16 million colours, however, this doesn't seem really feasible to have 0f0.png etc etc

2) I could write a piece of PHP using the gd library to autogenerate a png using a simple couple of functions, so that if I wanted particle f14.png it would autogenerate it and pass it to the browser.

The biggest problem with this is, for each and every single particle I produce, I have to talk to the server and get it to generate it, which is horrendously heavy on the server, not to mention wastes tons of bandwidth.

3) I could somehow use a png such as

whiteinner.png


as a MULTIPLICATIVE mask rather than an ADDITIVE mask, so that I could set the background using

bgcolor : #f00 url(whiteinner.png);

and instead of making the background #9fc and then pasting the white particle over the top of it, producing a red square with a white dot, it would actually use the PNG to become a simple red dot, like

redc.png


The model for this would be

SOLID BACKGROUND COLOR * SEMI-TRANSPARENT IMAGE = FINAL DIV CONTENTS

Does anyone know if anything like this is possible, or am I approaching this in the wrong way?
 
Last edited:
Um i think i get what you mean.

The way I would do it is as follows:

Using the black background as an example, have a black png image which has the fade effect to transparent in the middle, so that the colour below the black square image shows through in the middle. Now set the colour of a div below the black square to what ever you want the circle to be, it will show through the black square as the image you want.

Hope you understand that, was hard to explain and not sure its even what you want.
 
Last edited:
Eriedor said:
Um i think i get what you mean.

The way I would do it is as follows:

Using the black background as an example, have a black png image which has the fade effect to transparent in the middle, so that the colour below the black square image shows through in the middle. Now set the colour of a div below the black square to what ever you want the circle to be, it will show through the black square as the image you want.

Hope you understand that, was hard to explain and not sure its even what you want.
Click to expand...

I have attempted to use this technique, however, when I lay one of these divs over another (the basis of the flashy effect), I get a black square outline, where if it were pure transparency based, the layer below would stack with the layer above

for example :

http://www.flashygraphics.co.uk/rotator/linkstshirts/

that I made as a funky demo site (I was going to give the design to someone but they expressed disinterest from the beginning so I was just playing after that).

The effect that I need requires an *arbiritrary* coloured particle, which is why I started this thread :D

@ Tosk : I will read those websites and reply in a bit ^^
 
Ok, I read the complexspiral demo (although I couldn't actually see any code concerning the opacity/transparency of the links, and it was more interested in the viewport / fixed image etc)... but I could not see the effect I want.

I want to be able to make the transparency of the div into PNG, and then allocate the rgb colour of the div, either through another image, or through a solid colour. In this way I could apply a PNG (or indeed any other image format) as the transparency, and then the actual colour of the div could be another image or using CSS.
 
You must log in or register to reply here.
Back
Top Bottom