Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

20100124

How to get a contrasting font color for a given background ?

This is a sample code to give a font color with a good contrast for a given background color.

That php code snipped could be useful in case you give your users the option to set a custom background but not the font color (to avoid too many options) and you want that your text are always visible.

It simply returns a font color white or black depending on the background, but you can modify the function get_contrast if you want something more sophisticated.

The main function is:


function get_font_color($color)
{
$ar=html2rgb($color);
return get_contrast($ar[0], $ar[1], $ar[2]);
}


Supporting functions:

function get_contrast ($r, $g, $b)
{// returns white or black depending on the background
// in red green and blue
$a = 1 - ( 0.299*$r + 0.587*$g + 0.114*$b)/255;
if ($a<0.5)
{
return '#000';
}
else
{
return '#fff';
}
}

function html2rgb($color)
{// gets an array of R,G,B from an hexadecimal
// color in html format
if ($color[0] == '#') $color = substr($color, 1);

if (strlen($color) == 6)
{
list($r, $g, $b) = array($color[0].$color[1],
$color[2].$color[3],
$color[4].$color[5]);
}
elseif (strlen($color) == 3)
{
list($r, $g, $b) = array($color[0].$color[0],
$color[1].$color[1],
$color[2].$color[2]);
}
else
{
return false;
}
$r = hexdec($r); $g = hexdec($g); $b = hexdec($b);

return array($r, $g, $b);
}


Unit testing:

$i=0;
while ($i<1600000)
{
$rgb='#'.strtoupper(str_pad(dechex($i), 6, '0', STR_PAD_LEFT));
echo '<div style="background-color:'.$rgb.'; color:'.get_font_color($rgb).'">'.$rgb.'</div>';
$i++;
}


Thanks to this web entries:
Determine font color based on background color
Convert RGB from an HTML Hex Color

20070122

Bug in animateClass jquery extension

If you have tried to use the excellent animateClass extension to jquery maybe you have found that doesn't work in IE.

For example this sample code changes dynamically a h1 element from class "inicial" to class "final" producing a nice transition animation when you enter the page.


<script type="text/javascript">
$(document).ready(function()
{
$('#titolseccio').animateClass('final', 500);
});
</script>


With this release of animateClass (January 2007) this example only works in some browsers (particularly Firefox, the most popular in the developers community), but fails in Internet Explorer 6 and 7 (shamefully the most broadly used by the rest of the mortals (including customers))

You can solve this particular problem patching the animateClass.js

You have to download the uncompressed version of animateClass.js and look for a line like this:

if( typeof newStyle[n] != "function" && newStyle[n] /* No functions and null properties



and add this two conditions:

&& typeof newStyle[n] != "boolean" && typeof newStyle[n] != "number"


Resulting in this line:

if( typeof newStyle[n] != "function" && typeof newStyle[n] != "boolean" && typeof newStyle[n] != "number" && newStyle[n] /* No functions and null properties */


Now you can save your patched version of animateClass.js and reload your html page in Explorer (remember to Shift+Reload to avoid cached .js confusions)

The explanation of the problem is that javascript IE doesn't allow you to use string functions (like replace) on booleans and numbers, causing an unhandled exception.

Watch Out, this is not a generic patch, I'll warn the animateClass developer to patch it properly. For example, with this patch, you will not be able to animate any number CSS value (in the example the animation is from "20px" to "40px" the px makes it a string value, not a number).