I was excited about this project from the start, as was my team. We immediately started throwing ideas back and forth on what we could do to improve the customer experience for this particular storefront. A number of ideas were laid out on the table, some shelved for later phases of the project, and others tightly integrated into the overall design. I’d like to explain a bit about one feature in particular that ended up garnering quite a bit of the spotlight when the redesign was pushed live.

Color adaptation

I’d like to say that straight from the beginning the seed for this idea had been planted long ago with the publication of an article to A List Apart titled Super-Easy Blendy Backgrounds. Beginning with that article, my eyes had been opened to a new way of thinking when it came to Web design. While there were significant issues with PNGs in IE6, it was obvious to me that alpha transparency will indeed change things on the Web. That article, tied with a great piece written by Jeff Croft, Creative Use of PNG Transparency in Web Design, really got me hooked to the idea of using these unique advantages in upcoming projects.

The advantages of alpha transparency in the PNG image format are great in and of themselves, but for this project I thought we could take things one step further with CSS constants. I recalled reading a number of pieces on this specific subject and taking a liking to the idea. Quite a few designers feel that constants should be a built in feature of CSS, and I agree; it would be useful.

I had never implemented any CSS constant simulations prior to this project, but took comfort in the example with extensive documentation by Christian Heilmann. His sample was exactly what I was looking for.

I thought it would be completely awesome to tie these two features together; a color-changing template which uses a single color to ‘power’ the various shades and hues by taking advantage of alpha transparency by way of PNG.

When it came to the project I’d be working on, my company was merely in the discussion and planning phase with the client, I wasn’t 100% sure I’d be able to implement a feature such as this. I thought a bit about it and we decided it best to simply offer our proposal without specific mention of this feature. After successful test implementations, we’d mention to the client that we will be providing this additional functionality should there be interest.

I teamed with a single designer through the life of this project and he made the conscious effort to use only white and black in the design, but in transparent levels more often than not. He was able to use a solid color bottom-most layer in Photoshop to mimic how things would work in a Web browser. Our tests were quite successful and the idea was presented to the client. They fell in love with it and we began work. As you can imagine, cross-browser support was at times an issue, but I’ve got to say that overall the feature implementation was a very successful. Our client was able to offer an extremely versatile design to their clients, allowing them to customize the colors used throughout the redesign.

Extreme darks or lights

It became apparent almost immediately that we would need three separate variations of the same theme to account for variable choices on the part of our client’s clients. If a solid black background color were chosen, we’d need to make sure that all the design elements are equally visible throughout the design. The same applies for a solid white background color. At the end of the day, I ended up cutting three ‘sets’ of images: one for very dark background colors, one for very light background colors, and a third for mid-range colors.

The inclusion of this hurdle alone required some modifications to Christian Heilmann’s CSS constant simulation example; I had to account for the three ranges of color. The W3C published an algorithm to measure color visibility which I included in the CSS parser originally written by Christian Heilmann. I compared the color chosen as the background color to both black and white and measured the difference between. With some arbitrary testing, I included a tolerance variable which the client could adjust down the line if they’d like. The result came to be:

<?php
/*
	cssconst.php
	written by Chris Heilmann (http://icant.co.uk)
	allows constants to be used in the css
	file sent in the get variable c
	constant format:
	$foo='bar';

	Modification by Jonathan Christopher () to
	include a function to measure the color contrast of a variable set
	in the CSS. That value then sets another variable for use with image
	filenames.
*/

$background 	= '#8094b2';
$mainText 	= '#fff';
$altText 	= '#000';
$tolerance 	= 100;

$white = (hexrgb('ffffff'));
$black = (hexrgb('000000'));

function hexrgb($hexstr) {
    $int = hexdec($hexstr);
    return array("red" => 0xFF & ($int >> 0x10), "green" => 0xFF & ($int >> 0x8), "blue" => 0xFF & $int);
}

header('content-type:text/css');
//header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT");
$c=$_GET['c'];
$css=load($c);
if($css=='') { die('File not Found, sorry!'); }
preg_match_all("/\\$(\w+).*=.*\'(.*)\'/",$css,$constants);

// ---------------------------------
// determine color difference
// ---------------------------------

$targetHex = $background;

if(strlen($targetHex)==4) {
	$hexArray = str_split($targetHex);
	$targetHex  = $hexArray[1];
	$targetHex .= $hexArray[1];
	$targetHex .= $hexArray[2];
	$targetHex .= $hexArray[2];
	$targetHex .= $hexArray[3];
	$targetHex .= $hexArray[3];
} elseif(strlen($targetHex)!=7) {
	$targetHex = '#8094b2';						// worse case: use default
}

$color = (hexrgb($targetHex));

// Determine how different the color is from white
$whiteDiff  = max($color["red"],$white["red"])-min($color["red"],$white["red"]);
$whiteDiff += max($color["green"],$white["green"])-min($color["green"],$white["green"]);
$whiteDiff += max($color["blue"],$white["blue"])-min($color["blue"],$white["blue"]);

// Determine how different the color is from black
$blackDiff  = max($color["red"],$black["red"])-min($color["red"],$black["red"]);
$blackDiff += max($color["green"],$black["green"])-min($color["green"],$black["green"]);
$blackDiff += max($color["blue"],$black["blue"])-min($color["blue"],$black["blue"]);

if(!isset($image_suffix)){
if($whiteDiff<$tolerance) {
	$image_suffix 	= '-light';
} elseif($blackDiff<$tolerance) {
	$image_suffix 	= '-dark';
	} else {
	$image_suffix 	= '';
}}

// ---------------------------------
// apply background
// ---------------------------------
$css=preg_replace('/\\$background/',$background,$css);

// ---------------------------------
// apply suffix
// ---------------------------------
$css=preg_replace('/\\$image_suffix/',$image_suffix,$css);

// ---------------------------------
// apply mainText
// ---------------------------------
$css=preg_replace('/\\$mainText/',$mainText,$css);

// ---------------------------------
// apply altText
// ---------------------------------
$css=preg_replace('/\\$altText/',$altText,$css);

// ---------------------------------
// finish it up and echo
// ---------------------------------
$css=preg_replace("/\\#.*=.*?;\s+/s",'',$css);
echo $css;

/*
	Function load($file)
	reads the content of the file that you send and returns it
*/
function load($filelocation)
{
	if (file_exists($filelocation))
	{
		$newfile = fopen($filelocation,"r");
		$file_content = fread($newfile, filesize($filelocation));
		fclose($newfile);
		return $file_content;
	}
}
?>

If you’ll note, there are four variables to consider when using the above script. These variables were stored in a database and saved as a session variable server side. The $background variable controlled the overall color scheme used in the design by using it as the background color for the body as well as a few other strategic places where it was needed. $mainText was the primary text color used in the design, $altText was used in those certain circumstances where another color spiced things up a bit, and the $tolerance variable controlled how close a color had to be to either white or black before it was decided which background images were to be used to ensure proper contrast.

To implement the variables in the CSS, you simply add them as PHP variables:

body { background-color:$background; color:$mainText; }

The way I was able to distinguish which ‘set’ of images to use was partially twofold. My first step was to name each image accordingly. Much of the time, the same image itself could be, but there were other times were a black gradient on an image needed to me changed to a white gradient when a very dark background color was chosen. To get around the issue, I added a suffix to the filename of applicable images. For example, bg-body.png would have two additional images; bg-body-light.png and bg-body-dark.png. I was able to take advantage of this naming structure in both the CSS as well as the parser by referencing the images as something like:

div#example { background:$background url(../images/bg-body$image_suffix.png) no-repeat; }

All of my bases were covered. If the background was too dark, one suffix would be added in the parser, another suffix added if the color were too light, and the suffix would simply be empty if the color was middle of the line.

I hope it's useful to someone else

The inclusion of this feature turned out to be extremely useful in this case, and I hope others are able to take advantage of the idea. I'm sure there are endless ways to improve this specific implementation, so certainly feel free to offer both your thoughts and critiques.

Advertise here with BSA

This article, like many from A List Apart, really stuck in my mind as something quite innovative and useful; I just needed the right time to apply the technique. Super-Easy Blendy Backgrounds was published November 13, 2006 and I hadn’t come across a project to really make use of the technique until a few months ago. As the project was just coming together, Super-Easy Blendy Backgrounds instantly came to mind as a major time-saver for this particular client project.

Instantly, I was terrified of making things work in IE6. While you can use the AlphaImageLoader Filter, I know there would be some major issues as the project carried into development. There were.

Things to keep in mind with PNG background images and IE6

While the article published to A List Apart was extremely comprehensive and detailed, I went about things a bit differently. Super-Easy Blendy Backgrounds used inline images to achieve the desired effect, and I wanted to use background images. The effect was masterful everywhere except IE6, which is where the work began.

There were two major problems I encountered very quickly when working with PNG background images and IE6. The first problem I discovered was huge. When using AlphaImageLoader, links will not behave as expected in IE6. You’re stuck with a link that does absolutely nothing. I ran across multiple articles regarding this issue, many with varying circumstances and solutions for the bug. The solution that worked indicated the bug can be alleviated by ensuring the element using AlphaImageLoader has no position set and the anchor within said element does have a position. There were other solutions offered elsewhere, some indicating that the bug is triggered by the actual dimensions of the image you’re using as a background, but that didn’t help me as the images I were using were quite unique. It’s important to be aware that this may not always solve your problem. There may be times where you’ll simply need to find an alternative solution to this major problem with IE6.

The second major problem I came across was trying to tile background images for elements. Using AlphaImageLoader this simply isn’t possible. You’re forced to either crop or scale the background image. Using background-position or background-repeat is not an option. This forced me to use larger images in certain places, as well as use GIFs in other areas. You are able to set the sizingMethod to crop, but that may not be entirely useful.

How did things work out?

I’m quite pleased with how this project is turning out. Using PNGs effectively throughout the design will help this particular client adapt a single design by creating many color combinations by changing a couple variables on their back end. While the IE6 version of the design isn’t nearly as attractive as when it’s rendered using a fully capable browser, it degrades quite nicely and many of the features remain in tact.

The important thing to keep in mind when using techniques not fully supported cross-browser is to thoroughly test; especially for client work. How have your experiences been with using PNG?

Advertise here with BSA