Comments on: Bulletproof, cross-browser RGBA backgrounds, today

By: rgba.php v1.2: Improved URL syntax, now at Github | Lea Verou

rgba.php v1.2: Improved URL syntax, now at Github | Lea Verou — Tue, 15 Nov 2011 23:30:27 +0000

[...] wrote the first version of rgba.php as a complement to an article on RGBA that I posted on Februrary 2009. Many people seemed to like the idea and started using it. With their valuable input, I made many [...]

By: Utilizando CSS3 hoy (2): Colores y opacidad utilizando RBGAemenia.es | emenia.es

Wed, 12 Jan 2011 22:35:08 +0000

[...] Verou, propone un método para poder utilizar fondos RGBA en Internet Explorer: Bulletproof, cross-browser RGBA backgrounds, today 24Ways.com: Working With RGBA Colour Suscribirse a los comentarios de este artículo [...]

By: SWL-Projekt » rgba.php v1.2: Improved URL syntax, now at Github

SWL-Projekt » rgba.php v1.2: Improved URL syntax, now at Github — Thu, 09 Dec 2010 19:42:18 +0000

By: New version of rgba.php is out! « Lea Verou

New version of rgba.php is out! « Lea Verou — Wed, 08 Dec 2010 20:20:18 +0000

[...] It’s been a while since I posted my little server-side solution for cross-browser RGBA colors (in a nutshell: native rgba for the cool browsers that support it, a PHP-generated image for those that don’t). For features, advantages, disadvantages etc, go see the original post. In this one I’ll only discuss the new version. [...]

By: rgba.php v1.2: Improved URL syntax, now at Github « Lea Verou

rgba.php v1.2: Improved URL syntax, now at Github « Lea Verou — Wed, 08 Dec 2010 03:05:36 +0000

[...] wrote the first version of rgba.php as a complement to an article on RGBA that I wrote on Februrary 2009. Many people seemed to like the idea and started using it. With their valuable input, I made many [...]

By: Lea Verou

Lea Verou — Tue, 23 Nov 2010 17:55:33 +0000

Closing comments, since this version is outdated by now. Please anyone, use the new version and post any questions/issues in this post: http://leaverou.me/2009/10/new-version-of-rgba-php-is-out/

By: Lea Verou

Lea Verou — Tue, 23 Nov 2010 17:53:28 +0000

Apparently, there’s an issue when the script tries to fetch the image. I can help you into debugging it, but I just noticed you commented on the original post and not the version 2 post. Are you using the old version? If so, upgrading will probably fix it.

By: Kegan

Kegan — Tue, 23 Nov 2010 06:12:36 +0000

I just replaced:
background: url(http://209.42.194.146/rgba/rgba.php?name=black&a=10) repeat;
with:
background: url(http://209.42.194.146/rgba/colors/color_r0_g0_b0_a114.png) repeat;

And now I can see the .05 transparency.

So I can get it to work temporarily, but why won’t it work with the script in place?

By: Kegan

Kegan — Tue, 23 Nov 2010 06:06:43 +0000

Thank you for your response.

Yes the file does display when I navigate to it directly. http://209.42.194.146/rgba/colors/color_r0_g0_b0_a114.png

I’m using the script to make the menu semi-transparent. Your script works the first time. But as you said, the first time it’s pulling it directly from the script.

I can navigate directly to it… So why won’t it display when after the first time?

By: Lea Verou

Lea Verou — Tue, 23 Nov 2010 04:32:38 +0000

My guess is that for some reason, the file that’s saved on your server has some issue. Have you tried navigating via HTTP to that file? Does it display?

As for when it works: It works in Firefox because Firefox supports RGBA natively, so it doesn’t even use the image.
It also works the first time when no image is saved yet because it’s served directly from the php file, not the saved one.

By: Lea Verou

Lea Verou — Tue, 23 Nov 2010 04:29:25 +0000

In which way it doesn’t work in IE?

By: Kegan

Kegan — Mon, 22 Nov 2010 22:00:12 +0000

I got this to work and I the transparency shows up at first. However when I did a refresh in IE8, the png image seems to disappear. When I go into the ‘colors’ directory on my server and delete the file then do a refresh in IE, it works again. However as soon as I do the refresh it disappears. I can repeat this over and over.

The transparency works fine in Firefox.

I’m using this on a WordPress 3.0.1 install with very few plugins and no caching plugins.

By: Kalarm

Kalarm — Mon, 22 Nov 2010 20:41:40 +0000

Not quite bulletproof since it doesn’t work in IE…

Want it or not, there are still people who use it, and it is our job to make things work for them too, or at least make it so the website doesn’t become a torture for their eyes.

By: matt mcinvale

matt mcinvale — Fri, 05 Nov 2010 16:32:35 +0000

very nice solution! thank you.

By: Lea Verou

Lea Verou — Sat, 11 Sep 2010 17:25:00 +0000

Darek, try using the new version, there’s a link in the beginning of this post.

By: Darek

Darek — Thu, 09 Sep 2010 20:12:28 +0000

Thanks for the fix – but Im having a strange problem….

Everything was working for a minute, then I refreshed, and now I get this error:
“Call to undefined function apache_request_headers() on line 69″

What happened? It worked for one page load, then it broke. Im baffled.

By: Freelance Front End Web Developer, Surrey, Hampshire & London – HTML5, CSS3, JS, jQuery, PHP

Thu, 02 Sep 2010 01:23:35 +0000

[...] filter mechanism to create a transparent gradient, but it’s not recommended (more information). A more practical solution would be to create a fallback based on 24 bit PNGs, and then convert [...]

By: Lea Verou

Lea Verou — Wed, 01 Sep 2010 01:12:01 +0000

Oh, I see. Another workaround could also be to use an .htaccess to make the images have a .png extension. It would also solve the caching issues it has in IE sometimes.

By: How to achieve cross-browser RGBA support with Compass :: Aaron Russell

How to achieve cross-browser RGBA support with Compass :: Aaron Russell — Tue, 24 Aug 2010 13:10:53 +0000

[...] course the plugin doesn’t miraculously fix a broken browser, but it does use a well documented CSS solution that results in non-RGBA supporting browsers falling back to use an alpha-transparent PNG pixel [...]

By: Mantish

Mantish — Mon, 23 Aug 2010 19:21:59 +0000

Well, after reading about DD_belatedPNG, I found out that the images have to have a png extension in order for the script to work. So I had to modify DD_belatedPNG script to get it to work.
I wrote a blog post about it: http://codigoweb.co/fondos-rgba-en-ie6/
It’s in spanish…but anyway, maybe it’s useful for you or any other readers.

By: Fondos RGBA en IE6 | Código Web

Fondos RGBA en IE6 | Código Web — Mon, 23 Aug 2010 19:18:26 +0000

[...] Hace unos meses me encontré con esta solución para implementar fondos con colores RGBA (CSS3), compatible con cualquier explorador (incluyendo internet explorer): Bulletproof, cross-browser RGBA backgrounds, today [...]

By: Lea Verou

Lea Verou — Wed, 18 Aug 2010 17:14:04 +0000

That’s very strange. Try creating a simple test case with a locally stored copy of such a png and sending it to Drew along with a brief description of the bug. You’ll greatly help him and all web developers that use his script.

By: Mantish

Mantish — Tue, 17 Aug 2010 21:36:18 +0000

Actually I’ve been using DD_belatedPNG, and it works ok with regular png images, but not with the ones generated by your script. Maybe there’s something I’m missing?

By: Lea Verou

Lea Verou — Sat, 14 Aug 2010 00:23:09 +0000

PNG alpha transparency in IE6 is probably its most popular bug. Just use any script that fixes it and it should be ok (just ensure it works with background-repeat). I'd suggest DD_belatedPNG by Drew Diller, but it's been a while since I gave up on IE6, maybe there's something even better out there by now.

By: Mantish

Mantish — Fri, 13 Aug 2010 12:41:41 +0000

Hi, I love this solution, it’s awesome, thanks a lot.
However, I haven’t been able to make it work in IE6. Do you know which script works with your PHP script?

By: Fixed the blog in IE! | Hereward Cooper

Fixed the blog in IE! | Hereward Cooper — Tue, 28 Apr 2009 10:46:58 +0000

[...] – meaning the text is actually readable. Jeez it’s a crap browser, but thanks to this awesome link I solved it quickly after discovering the problem. Share and [...]

By: Lea Verou

Lea Verou — Wed, 15 Apr 2009 17:50:54 +0000

@jrosell: Good point. However I can’t think of a workaround, given the fact that this could also be used in a site where the user would be able to customize the theme and select their own rgba colors, so there could be lots of colors created legitimately… Perhaps an idea could be to allow the developer to set a limit?

@Dave DeSandro: Interesting script there! However, I’m afraid you missed my point a bit. Even having to go to your site (or any site) to do the conversion is too much of a hassle just to change a color or it’s transparency a little bit. If you are suggesting that somebody could build a javascript solution for that, your point is valid of course, and such a script would be interesting. However, what happens to this little percentage of users that have disabled js? In most cases where rgba backgrounds are used, the text would be completely unreadable without them.

By: jrosell

jrosell — Wed, 15 Apr 2009 17:41:52 +0000

Good idea!
IMHOO you must check maximum colors generation for robots bursts by kidies

By: Dave DeSandro

Dave DeSandro — Tue, 14 Apr 2009 13:41:18 +0000

Lea, thanks for going into detail on the options for rgba.

You can’t be spontaneous in your CSS and changes are difficult. Every time you want to use RGBA, you have to resort to some converter to create the png and it’s data:// URI. Unless you are some kind of a cyborg with an embedded base64 encoder/decoder in your head

I've been playing around with the canvas element lately. Since the image it outputs is encoded in data URI, I've found a shortcut to for those converters - just create the canvas in HTML. I've developed a quickie canvas creator that uses jQuery so you can just plug in the code for the canvas element and not worry about all the other HTML and JS. Might be of use for some of the rgba work arounds.

By: Lea Verou

Lea Verou — Mon, 13 Apr 2009 22:12:38 +0000

Let me know how it went Matt

By the way, your site is amazing!! Great design!