Cool PHP function to make image shadow

I wrote a PHP function that creates a shadow effect for an image object using only CSS styles on multiple <div> objects that are positioned relative to the image that is used. (phew!! that was too long for an opening sentence ) Dynamically, you could call the getImageWithCSSShadow function with various image objects - quickly creating shadows without using any graphics library calls (other than the ones involved in displaying the image in the first place). The PHP code is completely free - with no guarantees. It may or may not handle super-sized images very well. Also, not tested in all browsers - and it seems that there is a small display variation in IE due to different interpretations of the CSS.

The tool generates the HTML that you'd need to make the same shadow effect on any webpage. So, if you have a one-time need for a shadow effect for your image, this will create your HTML.

For the web form or the function call, you need to supply the image URL, background color (to blend away to), shadow color (if blank, uses the image's average color - neat effect), shadow distance (1 to 20 pixels), blend strength, as well as "alt" tag for image (sets if left blank). Accepts color as HEX codes or by name.

The CSS image shadow tool is here: CSS image shadow tool.

Let me know what you think about it, and I can fix the code. The source code only handles images, but could easily be rewritten to handle other objects (tables, paragraphs, blockquotes, etc.) as long as they have a set width and height. Also, a separate unit should probably be created to handle all other objects - any volunteers??

 

it'd just be cleaner markup to let gd to the dirty work in my opinion.

<?php
/* set drop shadow options */

/* offset of drop shadow from top left */
define("DS_OFFSET",  5);
 
/* number of steps from black to background color /*
define("DS_STEPS", 10);

/* distance between steps */
define("DS_SPREAD", 1);

/* define the background color */
$background = array("r" => 255, "g" => 255, "b" => 255);

$src = isset($_REQUEST['src']) ? urldecode($_REQUEST['src']) : null;
if(isset($src) && file_exists($src)) {

  /* create a new canvas.  New canvas dimensions should be larger than the original's */
  list($o_width, $o_height) = getimagesize($src);
  $width  = $o_width + DS_OFFSET;
  $height = $o_height + DS_OFFSET;
  $image = imagecreatetruecolor($width, $height);

  /* determine the offset between colors */
  $step_offset = array("r" => ($background["r"] / DS_STEPS), "g" => ($background["g"] / DS_STEPS), "b" => ($background["b"] / DS_STEPS));

  /* calculate and allocate the needed colors */
  $current_color = $background;
  for ($i = 0; $i <= DS_STEPS; $i++) {
    $colors[$i] = imagecolorallocate($image, round($current_color["r"]), round($current_color["g"]), round($current_color["b"]));

    $current_color["r"] -= $step_offset["r"];
    $current_color["g"] -= $step_offset["g"];
    $current_color["b"] -= $step_offset["b"];
  }

  /* floodfill the canvas with the background color */
  imagefilledrectangle($image, 0,0, $width, $height, $colors[0]);

  /* draw overlapping rectangles to create a drop shadow effect */
  for ($i = 0; $i < count($colors); $i++) {
    imagefilledrectangle($image, DS_OFFSET, DS_OFFSET, $width, $height, $colors[$i]);
    $width -= DS_SPREAD;
    $height -= DS_SPREAD;
  }

  /* overlay the original image on top of the drop shadow */
  $original_image = imagecreatefromjpeg($src);
  imagecopymerge($image, $original_image, 0,0, 0,0, $o_width, $o_height, 100);

  /* output the image */
  header("Content-type: image/jpeg");
  imagejpeg($image, "", 100);
  
  /* clean up the image resources */
  imagedestroy($image);
  imagedestroy($original_image);
}
?>

PHP:

 

I liked the last example where the gd library creates the shadow, and the resultant HTML code could be smaller as well.

The idea about creating a style definition for the CSS shadows would work as long as the images that will receive shadows are all the same base size. I wouldn't want to open that "can of worms", but it is a good idea nonetheless -- saving much space if there were many thumbnails.

I just modified the code to handle override values for width and height. The code automatically gets the correct width values for PNG, GIF and JPG images, but when I tested this on an ICO file, it didn't know what size it was. So, here's an example usage of the shadow effect for an ICO file: CSS Shadow on "adminicon.ico".

Happy web designing!