Page 1 of 1
Fading from one color to another on buttons
Posted: Thu Aug 24, 2006 12:41 pm
by Luke
Say I have 10 square buttons on the dop of my page (navigation links - probably inline <LI> tags). Is there a way to (mathematically, css, or otherwise) supply two colors (for the beginning button and one for end button) and then have it automatically fade the colors of the buttons from one to the other:
example:

Posted: Thu Aug 24, 2006 12:47 pm
by feyd
math + css, yes.
Posted: Thu Aug 24, 2006 12:52 pm
by Luke
would I also have to use javascript? How could I do math in css?
Posted: Thu Aug 24, 2006 12:56 pm
by matthijs
css is not possible. last i checked css 6.3 wasn't in development yet

so javascript it will be. or server side generation of the background images?
Posted: Thu Aug 24, 2006 1:29 pm
by nickvd
matthijs wrote:css is not possible. last i checked css 6.3 wasn't in development yet

so javascript it will be. or server side generation of the background images?
Or server side generation of the css...
In my travels, I came across a class that deals with gradients, I've never used it, but it seems to do what you're looking for
Code: Select all
<?php
/*----------------------------------------------------------------------
Colour Tools
============
Colour Tools is a class that contains various functions for
manipulating colours in PHP. It includes basic conversion functions,
a gradient function, an invert function and a set of functions for
comparing two colours for brightness and colour contrast, according
to the W3C recommendations.
Usage:
echo ColourTools::compare('ffffff', '000000');
Version 0.5
Copyright Jack Sleight - http://www.reallyshiny.com
This script is licensed under the:
Creative Commons Attribution-ShareAlike 2.5 License
----------------------------------------------------------------------*/
class ColourTools
{
/*--------------------------------------------------
Convert Hex code string to RGB array
--------------------------------------------------*/
function hexToRgb($hex)
{
$hex = preg_replace('/^#/', '', $hex);
return array(
'r' => hexdec(substr($hex, 0, 2)),
'g' => hexdec(substr($hex, 2, 2)),
'b' => hexdec(substr($hex, 4, 2))
);
}
/*--------------------------------------------------
Convert RGB array to Hex code string
--------------------------------------------------*/
function rgbToHex($rgb)
{
return sprintf('%02x', $rgb['r']).sprintf('%02x', $rgb['g']).sprintf('%02x', $rgb['b']);
}
/*--------------------------------------------------
Create a gradient from one colour to another
--------------------------------------------------*/
function gradient($col1, $col2, $steps)
{
$col1 = ColourTools::hexToRgb($col1);
$col2 = ColourTools::hexToRgb($col2);
$step = array(
'r' => ($col1['r'] - $col2['r']) / ($steps - 1),
'g' => ($col1['g'] - $col2['g']) / ($steps - 1),
'b' => ($col1['b'] - $col2['b']) / ($steps - 1)
);
$gradient = array();
for($i = 0; $i <= $steps; $i++) {
$colour = array(
'r' => round($col1['r'] - ($step['r'] * $i)),
'g' => round($col1['g'] - ($step['g'] * $i)),
'b' => round($col1['b'] - ($step['b'] * $i))
);
$gradient[] = ColorTools::rgbToHex($colour);
}
return $gradient;
}
/*--------------------------------------------------
Invert a colour
--------------------------------------------------*/
function invert($col1)
{
$col1 = ColourTools::hexToRgb($col1);
$col2 = array(
'r' => 256 - $col1['r'],
'g' => 256 - $col1['g'],
'b' => 256 - $col1['b']
);
return ColourTools::rgbToHex($col2);
}
/*--------------------------------------------------
Checks if two colours adhere to the W3C
recommendations for brightness and colour
contrast
--------------------------------------------------*/
function compare($col1, $col2)
{
$brightnessDifference = ColourTools::brightnessDifference($col1, $col2);
$colourDifference = ColourTools::colourDifference($col1, $col2);
return (($brightnessDifference > 125) && ($colourDifference > 500)) ? true : false;
}
/*--------------------------------------------------
Get the brightness value of a colour
--------------------------------------------------*/
function brightness($col)
{
$col = ColourTools::hexToRgb($col);
return (($col['r'] * 299) + ($col['g'] * 587) + ($col['b'] * 114)) / 1000;
}
/*--------------------------------------------------
Get the brightness difference of two colours
--------------------------------------------------*/
function brightnessDifference($col1, $col2)
{
return abs(ColourTools::brightness($col1) - ColourTools::brightness($col2));
}
/*--------------------------------------------------
Get the colour difference of two colours
--------------------------------------------------*/
function colourDifference($col1, $col2)
{
$col1 = ColourTools::hexToRgb($col1);
$col2 = ColourTools::hexToRgb($col2);
return
(max($col1['r'], $col2['r']) - min($col1['r'], $col2['r'])) +
(max($col1['g'], $col2['g']) - min($col1['g'], $col2['g'])) +
(max($col1['b'], $col2['b']) - min($col1['b'], $col2['b']));
}
}
?>
Posted: Thu Aug 24, 2006 1:31 pm
by Luke
It's only 6 boxes. Not worth all that. I'll just do it manually.

Posted: Thu Aug 24, 2006 1:53 pm
by nickvd
I was only thinking of the "re-use-fullness"
