Not a bug  Use RGBA instead of Hex values for shadows...

Erik

Well-known member
I've noticed that across the site, you're using Hex values for drop shadows (typically on buttons) instead of RGBA values. I would highly encourage you to convert everything to RGBA so that shadows work against any background.

With the Hex values, buttons with shadows look very ugly against a dark background because the shadow is just a light gray color, not a transparent gray.

Examples:
St1de.png

ibwFN.png


Instead, if you use an RGBA value with a high transparency (like rgba(0,0,0,.25)), it looks much better:

ZS03x.png

eNQhi.png


Thanks guys! :)
 
I think the devs are trying to make xF work on all browsers and the RGB might work on older browsers but the alpha im not sure is supported by old browsers.
 
The particular feature he's referring to doesn't work in old browsers anyway.

Rgba is great, but simultaneously evil. Quick technical note: if you dig through the CSS and find an rgba background color, check out the approach to allow it to work in IE. :)
 
The particular feature he's referring to doesn't work in old browsers anyway.

Rgba is great, but simultaneously evil. Quick technical note: if you dig through the CSS and find an rgba background color, check out the approach to allow it to work in IE. :)

Yeah, as you mentioned box-shadows aren't even supported on older browsers anyway, so RGBA support doesn't really matter. Although you could always specify a fallback hex color by declaring background: twice.

Edit: see here:
http://css-tricks.com/rgba-browser-support/#more-2151

And yeah:
Code:
rgba.php?r=0&g=0&b=0&a=153
Very very sneaky! I like it! :D Although it would be even better if you did 0-1 for the alpha scale instead of 0-255. Then it would stay consistent with the other declarations in the CSS. :)

Edit: or support both:
PHP:
if($_GET['a'] <= 1 && $_GET['a'] > 0 ) {
	// we're on the 0-1 scale
	$a = $_GET['a']*255;
} else  if($_GET['a'] < 255 && $_GET['a'] > 1 ) {
	// we're on the 0-255 scale;
	$a = $_GET['a'];
} else die();

// GD code
 
Top Bottom