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:
Image

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 :wink: 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 :wink: 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" ;)