Remove Ad, Sign Up
Register to Remove Ad
Register to Remove Ad
Remove Ad, Sign Up
Register to Remove Ad
Register to Remove Ad
Signup for Free!
-More Features-
-Far Less Ads-
About   Users   Help
Users & Guests Online
On Page: 1
Directory: 2 & 21
Entire Site: 7 & 304
Page Staff: pokemon x, pennylessz, Barathemos,
09-26-22 07:33 PM

Forum Links

Related Threads
Coming Soon

Thread Information

Views
2,688
Replies
15
Rating
0
Status
OPEN STICKY
Thread
Creator
pi0x
05-06-12 11:56 PM
Last
Post
BigBob85
01-26-15 05:51 AM
Additional Thread Details
Views: 657
Today: 0
Users: 5 unique
Last User View
09-06-21
Allysa8th

Thread Actions

Order
 

Layouts: Use RGBA over Opacity Filters

 

05-06-12 11:56 PM
pi0x is Offline
| ID: 581714 | 220 Words

pi0x
Level: 97


POSTS: 2395/2709
POST EXP: 93078
LVL EXP: 9255394
CP: 2508.3
VIZ: 258949

Likes: 0  Dislikes: 0
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'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.
Vizzed Elite

Affected by 'Laziness Syndrome'

Registered: 12-09-10
Location: Rock Bottom
Last Post: 2777 days
Last Active: 2004 days

Related Content

Content Coming Soon

05-06-12 11:59 PM
legacyme3 is Offline
| ID: 581721 | 65 Words

legacyme3
Lord Leggy - King of IT
Level: 263


POSTS: 16150/27250
POST EXP: 2003421
LVL EXP: 298223024
CP: 42475.5
VIZ: 2977659

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
6-Time VCS Winner

One Leggy.
One Love.
One Dream.


Affected by 'Laziness Syndrome'

Registered: 09-14-10
Location: https://discord.gg/YCuUJz9
Last Post: 742 days
Last Active: 742 days

05-07-12 12:04 AM
pi0x is Offline
| ID: 581728 | 50 Words

pi0x
Level: 97


POSTS: 2396/2709
POST EXP: 93078
LVL EXP: 9255394
CP: 2508.3
VIZ: 258949

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite

Affected by 'Laziness Syndrome'

Registered: 12-09-10
Location: Rock Bottom
Last Post: 2777 days
Last Active: 2004 days

05-07-12 12:14 AM
legacyme3 is Offline
| ID: 581736 | 34 Words

legacyme3
Lord Leggy - King of IT
Level: 263


POSTS: 16153/27250
POST EXP: 2003421
LVL EXP: 298223024
CP: 42475.5
VIZ: 2977659

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
6-Time VCS Winner

One Leggy.
One Love.
One Dream.


Affected by 'Laziness Syndrome'

Registered: 09-14-10
Location: https://discord.gg/YCuUJz9
Last Post: 742 days
Last Active: 742 days

05-07-12 12:22 AM
Lazlo Falconi is Offline
| ID: 581745 | 69 Words

Lazlo Falconi
Level: 97


POSTS: 1316/2750
POST EXP: 199963
LVL EXP: 9023059
CP: 3100.7
VIZ: 181954

Likes: 0  Dislikes: 0
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?
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?
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 832 days
Last Active: 707 days

05-07-12 12:51 AM
soxfan849 is Offline
| ID: 581754 | 82 Words

soxfan849
Level: 75


POSTS: 548/1490
POST EXP: 106261
LVL EXP: 3761770
CP: 5154.6
VIZ: 218780

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
The Reaper


Affected by 'Laziness Syndrome'

Registered: 01-09-11
Location: soxfan849
Last Post: 2142 days
Last Active: 1978 days

05-07-12 05:58 PM
hackerman is Offline
| ID: 582093 | 59 Words

hackerman
Level: 128


POSTS: 4927/5147
POST EXP: 140083
LVL EXP: 24344478
CP: 1108.9
VIZ: 9318

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
2nd Place In The June 2011 VCS 7th Place In the July 2011 VCS


Affected by 'Laziness Syndrome'

Registered: 11-02-10
Last Post: 3695 days
Last Active: 2024 days

05-07-12 06:50 PM
pi0x is Offline
| ID: 582125 | 37 Words

pi0x
Level: 97


POSTS: 2397/2709
POST EXP: 93078
LVL EXP: 9255394
CP: 2508.3
VIZ: 258949

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite

Affected by 'Laziness Syndrome'

Registered: 12-09-10
Location: Rock Bottom
Last Post: 2777 days
Last Active: 2004 days

05-07-12 07:44 PM
Lazlo Falconi is Offline
| ID: 582187 | 128 Words

Lazlo Falconi
Level: 97


POSTS: 1318/2750
POST EXP: 199963
LVL EXP: 9023059
CP: 3100.7
VIZ: 181954

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 832 days
Last Active: 707 days

06-24-12 04:07 PM
Nksor is Offline
| ID: 606401 | 108 Words

Nksor
the_casualty
Level: 136


POSTS: 5752/5856
POST EXP: 228223
LVL EXP: 29657139
CP: 1165.6
VIZ: 131363

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
Timecube


Affected by 'Laziness Syndrome'

Registered: 09-30-10
Location: From:
Last Post: 1877 days
Last Active: 468 days

(edited by the_casualty on 06-24-12 04:09 PM)    

06-24-12 07:43 PM
Lazlo Falconi is Offline
| ID: 606510 | 11 Words

Lazlo Falconi
Level: 97


POSTS: 1524/2750
POST EXP: 199963
LVL EXP: 9023059
CP: 3100.7
VIZ: 181954

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

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

Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 832 days
Last Active: 707 days

06-24-12 10:56 PM
pi0x is Offline
| ID: 606594 | 44 Words

pi0x
Level: 97


POSTS: 2465/2709
POST EXP: 93078
LVL EXP: 9255394
CP: 2508.3
VIZ: 258949

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite

Affected by 'Laziness Syndrome'

Registered: 12-09-10
Location: Rock Bottom
Last Post: 2777 days
Last Active: 2004 days

06-25-12 03:40 PM
Nksor is Offline
| ID: 606796 | 71 Words

Nksor
the_casualty
Level: 136


POSTS: 5753/5856
POST EXP: 228223
LVL EXP: 29657139
CP: 1165.6
VIZ: 131363

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
Timecube


Affected by 'Laziness Syndrome'

Registered: 09-30-10
Location: From:
Last Post: 1877 days
Last Active: 468 days

10-02-12 08:11 AM
leod is Offline
| ID: 661868 | 105 Words

leod
Level: 23


POSTS: 11/100
POST EXP: 9291
LVL EXP: 60400
CP: 442.5
VIZ: 6950

Likes: 0  Dislikes: 0
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.
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.
Trusted Member

Affected by 'Laziness Syndrome'

Registered: 09-30-12
Location: Germany
Last Post: 2141 days
Last Active: 616 days

10-02-12 07:38 PM
Lazlo Falconi is Offline
| ID: 662546 | 76 Words

Lazlo Falconi
Level: 97


POSTS: 1978/2750
POST EXP: 199963
LVL EXP: 9023059
CP: 3100.7
VIZ: 181954

Likes: 0  Dislikes: 0
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.
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.
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 832 days
Last Active: 707 days

01-26-15 05:51 AM
BigBob85 is Offline
| ID: 1129832 | 21 Words

BigBob85
Level: 149

POSTS: 6358/6381
POST EXP: 217397
LVL EXP: 41095172
CP: 159.2
VIZ: 48643

Likes: 0  Dislikes: 0
Seems reasonable to me. Is RGBA a CSS3 standard or earlier?

Either way, not using a CSS3 compatible browser, you what?
Seems reasonable to me. Is RGBA a CSS3 standard or earlier?

Either way, not using a CSS3 compatible browser, you what?
Vizzed Elite
Member Of The Year 07


Affected by 'Laziness Syndrome'

Registered: 12-09-04
Location: Melbourne, Australia
Last Post: 1026 days
Last Active: 661 days

Links

Adblocker detected!

Vizzed.com is very expensive to keep alive! The Ads pay for the servers.

Vizzed has 3 TB worth of games and 1 TB worth of music.  This site is free to use but the ads barely pay for the monthly server fees.  If too many more people use ad block, the site cannot survive.

We prioritize the community over the site profits.  This is why we avoid using annoying (but high paying) ads like most other sites which include popups, obnoxious sounds and animations, malware, and other forms of intrusiveness.  We'll do our part to never resort to these types of ads, please do your part by helping support this site by adding Vizzed.com to your ad blocking whitelist.

×