I just spiffed up my site a tiny little bit with a little experiment I had been thinking about trying for a while. I knew that you could create gradients with CSS. I knew that you could generate random numbers with PHP. I knew that you could overlay transparent PNG files over color to “mask” the color in. So I decided to mess around and Google research a little bit…. the result is shown at the top of the site, where the gradient will change behind the logo on each page refresh. Fun eh? Well- in the spirit of sharing code back to the world- here is the code for the random gradient generator I made, you simply apply it to a item, then put a PNG over it. Not too tricky really- look at my source code for more info. Enjoy:

<?php $color = sprintf("#%06x",rand(0,16777215)); ?>
<?php $color2 = sprintf("#%06x",rand(0,16777215)); ?>
<style type="text/css">
#logo   
{
background-image: linear-gradient(bottom, <?php echo $color; ?> 12%, <?php echo $color2; ?> 56%);
background-image: -o-linear-gradient(bottom, <?php echo $color; ?> 12%, <?php echo $color2; ?> 56%);
background-image: -moz-linear-gradient(bottom, <?php echo $color; ?> 12%, <?php echo $color2; ?> 56%);
background-image: -webkit-linear-gradient(bottom, <?php echo $color; ?> 12%, <?php echo $color2; ?> 56%);
background-image: -ms-linear-gradient(bottom, <?php echo $color; ?> 12%, <?php echo $color2; ?> 56%);

background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.12, <?php echo $color; ?>),
 color-stop(0.56, <?php echo $color2; ?>)
);
 width: 312px;
 height: 134px;
}
</style>