Fading from one color to another on buttons

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Fading from one color to another on buttons

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

math + css, yes.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

would I also have to use javascript? How could I do math in css?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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']));
		}
	
	}

?>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

It's only 6 boxes. Not worth all that. I'll just do it manually. :)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

I was only thinking of the "re-use-fullness" ;)
Post Reply