Support Thread - Responsive Color Changes for 155

[dbltoe]

EVERYTHING is optional. -- NOTHING is forever.

Here's the background. RGBA was added for three purposes.

First, and primary, is that it gives an illusion of items floating over or under a menu, etc. That feature alone alerts the mobile user that information may be above or below what is currently on the screen.

Second, it removes some of the "harshness" that results from using web-safe colors (did you know there are only 216?!?). Anything other than a web-safe color is just throwing the dice and hoping the customer's browser will get close to the color you selected.

Third, it was not added in case the browser could not handle hex but, the hex was added for browsers that could not handle the rgba as rgba and css3 are the next steps in web design. In fact, the browser has to accept CSS3 in order for the rgba call to work. You can google "css3 compliant browsers" to get a gist of which ones work presently.

That said, I have to reemphasize the beauty of open source. DO WITH AS YOU PLEASE.

If you want strict colors, either remove the rgba calls or change the percentage to 1 from 0.whatever. Shouldn't be any problem unless you miss a 0 or . in your replace.
Some would say you might be "clinging tenaciously to the trailing edge of technology."

[Feznizzle]

That was an absolutely fabulous reply, thank you!

Man, I googled the heck out of "rbg vs hex", read gobs of articles, and found almost zip pointing to the advantages of rgb. Your explanation was concise, succinct, and straight to the point. Awesome.

Ok, so rgb is the way of the future. And hex covers legacy browsers. Neither hex nor rgb are "web safe" colors, in the sense that I can be sure every screen will represent exactly the same.

Alright, I'm on board with using both.

But I'm still nervous about using anything other than strict rgb colors, unless I can be certain an opacity is being applied to the correlated hex. I'd hate to go to the effort of building in backward compliance, only to accidentally make mistakes like putting black text over a dark hex/rgb color, never realizing the rgb was less than 1 but no opacity applied to the hex.

I mostly use the Chrome inspector while working. But default, the hex is usually struck out. Guess I'll just start checking the hex by disabling rgba in the inspector when I see them.

Thanks again. I'm really not clinging to *anything*, I'm just trying to learn!

[dbltoe]

No problem, learning is what I try to do every day.

The reason you see the hex un-selected is that your browser is CSS3 Compliant. No browser will attempt to show both, just the one that is most compatible.
It's a work in progress, but look at allpecansDOTcom/155e for an example of the background "peeking" through.

Note that the background image can be seen as you scroll up and down BUT, the sideboxes have a background that allows the text to still be legible without blocking the picture.

You'll note that the background-color for the left/right containers, productDescription, and cartInstructions have ONLY the rgba call in the stylesheet. While the white background is a good way to "clear up" the text, you would not want it to divert to solid white if the browser were not CSS3 compatible.

Now do the F12, find the indexDefaultMainContent and add the call background-color:rgba(255,255,255,0.2); to that element.

Note how it makes the text more legible. Excellent discussion at the link in post #33
/* background-color: rgba(255,255,255,0.3); */

[Feznizzle]

Very educational, thanks!

I fiddled with your site. Tagging indexDefaultMainContent with the white rgba worked right out of the bag, of course. But interestingly (to me), I couldn't get the same effect with hex. I could have sworn I'd been able to achieve similar translucency with hex before. The hex for white is #FFFFFF and adding 33 (#FFFFFF33) should have gotten me there, but I couldn't do it. Maybe I used a webkit or something before? Or maybe I was thinking about applying translucency to layers in photoshop, totally unrelated to CSS. Dunno.

Anywho, rgba has firmly proved it's value to me! :)

[dbltoe]

Translucence is often misused when talking about transparency. Transparency is generally associated with clear. The more correct term for how well you can "see" through something is opacity.

Where you may be confused is that, in order to have 20% opacity in the #FFFFFF, the 33 is added at the beginning rather than at the end AND the result should be eight (8) versus six (6) characters. Had you entered #33FFFFFF, it would have worked IF your browser supported it.

It is the old method and doesn't give the non-compatible browser any alternative. Another reason for the dual calls in the css.

Mentioned it in an earlier thread but, http://tinyurl.com/y929h5f6 is a good read. Especially near the end of the article. Click on View Demo just before the Conclusion.

[Feznizzle]

My browser must not support it because that's how I had it originally, with 33 in front.

Fabulous article, hit the nail right on the head. And the demo was highly cool, thanks!