I'm here to strongly urge the members of Vizzed to use RGBA color over Opacity filters for their text boxes in layouts.

Reasons to use RGBA:

RGBA color is LESS complicated than the opacity filters, because one code works across ALL major browsers(background-color:rgba(numbers)), except lower Internet Explorer, where as opacity doesn't work with just one code.

RGBA also doesn't make the text on the text box transparent with the background, thus making text a lot easier to read.

It's overall better, to be quite frank.

To use RGBA color you put a series of 4 numbers, the first 3 are used to define the actual color, the last number would be the number that defines the opacity(0.5 or so).

Example:

background-color:rgba(0,0,0,0.5)

The 0,0,0 is the color code for black, the 0.5 is the opacity. Put that in place of your div's or table's already existing background-color, and take away the obsolete opacity code and it does the same thing, but better.

This isn't a 'rule', but it is strongly recommended that you do this for the sake of the people that cannot read your posts because the text is so light. It looks a ton better and it looks for more professionally made layouts.

list rgb color codes:
http://web.njit.edu/~kevin/rgb.txt.html

If anyone has any questions feel free to ask me.

I use opacity for one reason and one reason only in 90% of layouts.

It's just easier.

I don't see what's so easy about the RGBA filter. Opacity feels easier. I don't need to look up color codes to know how to make the box a certain color with that. If I want to, I can, but in general opacity is far easier to use.

legacyme3 : Don't you see how much better it it looks when compared to using opacity, though? There is such a huge difference. You can't really tell if you're using a 0.8-0.9 with opacity, unless you're trying to find it, but if you're wanting an opacity of 0.3-0.7 please use rgba.

pi0x :

On the contrary... I find opacity to work better for what I'm trying to get accomplished in a layout. It's easier to get a rough feel for how dark the box should be.

I agree heartily with pi0x, opacity is an old and worthless way to make things transparent in your layouts, and should be ditched in favor of rgba, which isn't as hard as everyone makes it. You say it sucks because you have to pick a color, but I guarantee you don't have the hex code for your layout memorized anyway, so why not just use 105;89;205 instead of #6959CD?

Even if you did memorize the hex code, it's easy to convert from hex into decimal. Every 2 digits in hex corresponds to a color. So it's like #rrggbb, where r is red, g is green and b is blue. Multiply the first of each color and add the second to that number. Then you've got the rgb version of your code.

So #123456 would be rgba(18, 52, 86, 1), where the alpha was just given it's maximum value as an example.

I'm using the rgba code right now but honestly I see no huge difference.

It would be easier to just have a transparent box rather than to find the numbers you would need for a color.

Plus having to go and check it every time would be annoying. Even if you had the hexadecimal memorized opacity is just easier.

hackerman : If you want to see the difference, take a rgba with a transparency of 0.3, and do the same code, but use opacity filters instead. You will see a huge difference in the text and images.

The difference is that if you use opacity, I'm not reading your posts, and if you use rgba(), your post looks better. Look, here's the code needed for my layout if I used opacity:

background-color: #d2d2d2; opacity: .7;

Alternatively, I could use rgba() and only post the following:

background-color: rbga(80,80,80,.7);


What are you people even arguing? Are you really so dense that you think it's more difficult to type fewer characters? Anyway, I'm sticking this thread because it is good advice, whether you want to take it or not. It makes the code look better, it makes your layout look better, and it makes the board look better. If you don't like it, that's fine, keep using opacity:. I need some way to know who's posts to ignore.

To be honest, transparent .pngs are superior to RGBA, but anything is superior to opacity filters, I suppose. The only thing that's bad about RGBA is that it takes a little while to render, which can be annoying for those with lower-end computers.

Opacity filters are poor because browsers render them differently. Something that may look awesome in Firefox may look terrible in any other browser. That's going without saying that a majority of CSS properties are like that, but at least RGBA is a bit more stable.

If you want to be awesome and have your layout render -exactly- the same across all browsers, use transparent .pngs.

the_casualty : >rgba renders slower on older computers
>suggests using transparent .pngs

the_casualty : Some how transparent .pngs completely avoided my mind... I should definitely try that out a few times and see how it turns out for me.

Yet another alternative, I wonder if CSS4 will bring something brand new when it comes out.

Lazlo Falconi : Well, RGBA can seriously chug. pngs are little bit better, at least in my experience. A 1x1 png with transparency loads without much problems even on an old compy.

I'm not saying you shouldn't use RGBA, though. It certainly is the way of the future. Supporting slow computers is like giving alt stylesheets for IE6 users: it's a damned pain and holy hell how hard is it to upgrade.

The only problem with using transparent .pngs is that the place you host it on could potentially have a hiccup and just not serve the file at all.
But that's really not a problem if you use vizzed for the image, since it's logically always going to be up as long as vizzed is.

So yeah, .pngs are definitely the superior choice, especially if you care about compatibility with ancient browsers at all and the loading times are really tiny for an image that is a hundred times smaller than your own avatar, no matter your internet speed, so it can pretty much be neglected.

leod : I don't know about compatibility, versions of Internet Explorer before IE 8 didn't have support for transparent PNGs, and you're more likely to find someone still using IE 7 than any other browser that supports transparent PNGs but not RGBa filters on CSS.

Also it is possible for images uploaded to Vizzed to be down while the board is up, but right now that isn't the case, and probably won't be for the foreseeable future.

Seems reasonable to me. Is RGBA a CSS3 standard or earlier?

Either way, not using a CSS3 compatible browser, you what?