1

Topic: Transparent tinted table cells

Not sure if this has anything to do with a css file, or other codeing, but I have seen a fixed image in the bottom right corner (done through css), but there is a content cell that cutes into the picture. But instead of picture covered, the content cell appears to be transparent, with a grey tint. Like I said before, I don't think this was done throuhg css. But if it can be done, can someone tell me?

Do, or do not.

Re: Transparent tinted table cells

If you had a link to what you've seen it would help.

But in general that could be (1) the image is a background image (2) the content 'above' the image is in a div (layer) which is set in zorder (z index) 'above' the image in question.

To get it to look translucent... there are GIF images whereby you get an on/off alpha... You can use these to dither a pattern which looks like a filled area of approx 50% 'transparency' (every other line horizontally, vertically, or every other pixel in a checkerboard pattern). If you were to use for example a tiled GIF image which is a 'checkerboard' dither of medium grey in a layer 'above' other content, it would appear to be a translucent window of grey (on closer inspection you'd see the dither).

The PNG image format also supports transparency, and actually supports alpha transparency (like photoshop layer opacity/masking/etc.). Problem is none of the browsers ever fully/properly supported PNG rendering -- you can technically save a PNG as 8-24 bit with alpha -- much more flexible than GIF. It compresses via color reduction and then some basic file compression (like GIF), so its really too bad it was never fully implemented.

The only 'hack' method I could think of that could get your true translucency/alpha channel would be to bring PNG8/24 images exported from Macromedia Fireworks (very important as ones from Photoshop/IR do not work the same way in this method) and put them in a Flash movie. Then -- only for Internet Explorer and I believe only on PC -- you can embed the flash movie on your page with the background property set to 'transparent'.

What happens is, the flash movie in a layer on the page will have no solid bounding background... and if there are any alpha images/soft edges/etc. in the movie, it will render right on top of your page.

Of course this limits you to pretty much IE/PC users only (any version of flash from 4 up). A significant number of people -- but not everyone.

Hope this helps,
Neil

alinear.net

3

Re: Transparent tinted table cells

I have been looking for that page. If I could remember the page, a quick look under the hood would solve the problem. I'll look for it. Thanks, I'll try what you suggested.

Do, or do not.

4 (edited by Louis 2004-02-11 02:29)

Re: Transparent tinted table cells

alinear wrote:

The only 'hack' method I could think of that could get your true translucency/alpha channel would be to bring PNG8/24 images exported from Macromedia Fireworks ... and put them in a Flash movie. Then -- only for Internet Explorer and I believe only on PC -- you can embed the flash movie on your page with the background property set to 'transparent'.

To clarify, forget Flash and Fireworks. Just use this workaround provided by Internet Explorer Alpha filters, as explained on HowToCreate.co.uk and first posted somewhere in the discuss section of an alistapart article.

If you're thinking of something like the complexspiral demo, the all CSS approach used will not work in Internet Explorer, as explained on that page. However, using an alpha transparent background image instead of a background transparency CSS property would work around it, with the IE filters explained above.

5

Re: Transparent tinted table cells

Well, seeing that only a select few are using the open source goodness. we can't leave IE. I have been working on on css a bit, made a nice bg image for the time being. I'll leave IE filter tweaking for the weekend, thanks.

Do, or do not.

6

Re: Transparent tinted table cells

zc923 wrote:

I'll leave IE filter tweaking for the weekend, thanks.

Bah, you're no fun! =p

You're welcome, though ;)

7

Re: Transparent tinted table cells

Had some time this today, so tried something. Can someone tell me if this is correct?

BODY { background-image: url("1.png");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='2.png') }

TD {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #333333
}

INPUT, SELECT {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #333333
}

TEXTAREA {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #333333
}

FORM { margin: 0 }

PRE {
    font-size: 11px;
    margin: 0
}

TABLE.punmain {
    border: none;
    width: 100%;
    background-color: #606060
}
TABLE.punplain {
    border: none;
    width: 100%
}
TABLE.punspacer {
    border: none;
    width: 100%
}

TR.punhead { background-image: url("2.png";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) }
TR.puncon1 { background-color: #DEDFDF }
TR.puncon2 { background-color: #EEEEEE }
TR.puncon3 { background-color: #C0C0C0 }
TR.puntopic { height: 1.5em }

TD.punhead { color: #102945 }
TD.punheadcent {
    color: #102945;
    text-align: center
}
TD.puncon1 { background-color: #DEDFDF }
TD.puncon1cent {
    background-color: #DEDFDF;
    text-align: center
}
TD.puncon1right {
    background-color: #DEDFDF;
    text-align: right
}
TD.puncon2 { background-color: #EEEEEE }
TD.puncon2cent {
    background-color: #EEEEEE;
    text-align: center
}
TD.puncon3 { background-color: #C8C8C8 }
TD.puncent { text-align: center }
TD.punright { text-align: right }
TD.puntop { vertical-align: top }
TD.puntopright {
    text-align: right;
    vertical-align: top
}
TD.punquote {
    background-color: #F6F6F6;
    border: #606060;
    border-style: dashed;
    border-width: 1px
}

A:link, A:visited {
    text-decoration: none;
    color: #005CB1
}
A:link.punhot, A:visited.punhot { color: #C03000 }
A:link.punclosed, A:visited.punclosed { color: #888888 }
A:hover {
    text-decoration: none;
    color: #0099DD
}
A:hover.punhot { color: #F43E00 }
A:hover.punclosed { color: #AAAAAA }

IMG.punavatar {
    margin-top: 3px;
    margin-bottom: 3px
}

.puntext { font-size: 11px }
.punedited {
    font-size: 10px;
    font-style: italic;
}
.punsignature { font-size: 10px }
.punheadline {
    font-size: 12px;
    font-weight: bold;
}
.puntitle {
    font-size: 14px;
    font-weight: bold
}
.punhot { color: #C03000 }

The only thing that has changed is the bg color to bg image, and the tr.punhead. This is from the site HowToCreate.co.uk

Do, or do not.

8 (edited by Louis 2004-02-23 04:15)

Re: Transparent tinted table cells

No, that is not correct, unfortunately. This is the CSS example they give, further down:

<!--[if gte IE 5.5]>
<style type="text/css">
#alImg1 img, #alImg2 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png'); }
#alImg2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphaTwo.png'); }
</style>
<![endif]-->

...

<span id="alImg1" style="width:400px;height:32px;">
<img src="varyAlpha.png" width="400" height="32" border="0" alt=""></span>
<span id="alImg2" style="width:30px;height:50px;">
<img src="alphaTwo.png" width="30" height="50" border="0" alt=""></span>

The way it's done in the first example is to group the statements together in one huge [if gte IE 5.5] conditional comment (which means only IE 5.5 will render that part of the CSS).

I would experiment further with the technique to see if I can directly apply it to background-images, but otherwise, try to achieve the effect with IMG tags and position them above everything with z-index and in the bottom corner with a variation of this technique: http://www.alistapart.com/articles/footers/

9

Re: Transparent tinted table cells

Hmn, in deep thought...

Where should I exactly put this code?

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='whatever.png');

Here:

BODY { background-image: url("1.png"); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.png') }

or here:

TR.punhead { background-image: url("2.png");
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='2.png') }

And Should the second version have the src= to the bg image, or to itself? And the other way arround if it is the first version?

Do, or do not.

10 (edited by Louis 2004-02-12 18:21)

Re: Transparent tinted table cells

Do you want an effect like this? http://www.virtuelvis.com/gallery/opaci … ydemo.html (Look at it in Mozilla/Firefox/Opera 7)
Compare the page with the screenshot without transparency.

View the source to see how he did it, then experiment with the DirectX filters above if you want it to look transparent in IE 5.5+.

Or read this page for another JavaScript-based technique that should validate:
http://www.alistapart.com/articles/pngopacity/

11

Re: Transparent tinted table cells

Well, I was going for the link you just posted. 1.png is just a test image for the background, and 2.png is the tint color I want in the cells. Maybe I didn't explain this properly in the first place. I want to be able to use a static Image in the background of punbb, then all the cells to be transparent, with a tint color. 2.png is a blue color, so if it becomes semi opaic, the bg image will show through, however, 2.png's color will add a tint effect.
Do I make sence now? Probably not but...

Do, or do not.

12

Re: Transparent tinted table cells

Hmm cool. Yeah, that makes sense. I'll try experimenting with it and get back to you on that one.

13

Re: Transparent tinted table cells

Problem is none of the browsers ever fully/properly supported PNG rendering

Mozilla does...
Firefox does...
Opera does...
Netscape does...
IE >5.0 does with a hack...

PNG is the way to go.

14

Re: Transparent tinted table cells

Anyone have any success yet?

I have been working on this for a while now, and recently, I have been getting a parsing error with a png image. Strange....

Do, or do not.

15

Re: Transparent tinted table cells

http://www.csszengarden.com/?cssfile=/0 … amp;page=1

I have figured out how this effect was done (the menu). This is not what I orignaly saw, but if someone can help me intigrate this idea into punbb style, I would appreciate it.

Do, or do not.

16

Re: Transparent tinted table cells

To clarify, forget Flash and Fireworks. Just use this workaround provided by Internet Explorer Alpha filters, as explained on HowToCreate.co.uk and first posted somewhere in the discuss section of an alistapart article.

Use Sleight from http://youngpup.net

17

Re: Transparent tinted table cells

Found the site that I was looking for: http://www.xanga.com/home.aspx?user=increaseTHEvelocity

Look at it In IE.

Do, or do not.