• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Erik

Well-known member
#1
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:



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




Thanks guys! :)
 
#2
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.
 

Mike

XenForo developer
Staff member
#3
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. :)
 

Erik

Well-known member
#4
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