CSS shadow for image
PHP Source Code
Download zip file of the PHP source code: css_shadow.zipHide source code
You can copy and paste this code, but it is recommended to save this as a new unit rather than merge with an existing file. This could all be rewritten as a class with the same functionality, but the usage is still simple as it is.
You are welcome to make any changes you like to the code. If you would like to share any improvements that you've made to the code, notify us here and we may publish your changed version of this tool.
<?php
global $colornames;
/*
This code is released under public domain.
Original info and source code download available at:
http://betterwindowssoftware.com/css_shadow.php
This should create the HTML that would display a shadow for an image object based on
several parameters
imgURL: URL to use for the image. Used for the "src=" value as
well as used for backgroundColor if left blank, and image width / height.
alt: The "alt=" value for the image.
backgroundColor: Background color for what the shadow blends to nothingness as.
shadowColor: Shadow Color
blendStrength: Blend Strength on a scale of 1 to 10 with 1 being the faintest shadow
and 10 being the strongest shadow.
shadowDistance: Distance in pixels for the shadow from 1 to 20.
overrideWidth: if supplied, will override the image width, if passed 0,
no overriding occurs
overrideHeight: if supplied, will override the image height, if passed 0,
no overriding occurs
href_link: optional value for anchor tag to wrap around the image
onclick: optional onclick value for image
Example usage with default values used for "alt" and "backgroundColor" - not overriding width or height:
$result = getImageWithCSSShadow("http://yourdomain.com/images/bogusImage0001.gif", "", "", "000000", 7, 14, 0, 0, "http://yourdomain.com/home");
if ($result) {
echo $result;
}
*/
function getImageWithCSSShadow($imgURL, $alt='Image with CSS shadow', $backgroundColor='FFFFFF', $shadowColor='000000', $blendStrength=6, $shadowDistance = 7,
$overrideWidth = 0, $overrideHeight = 0, $href_link = "", $onclick = "") {
if ($href_link) {
$href_link = "<a href='".$href_link."' style='color:".$shadowColor."'>";
$href_link_after = "</a>";
}
else $href_link_after = "";
if ($imgURL) {
// ratios for four color blending levels
$bpDark0 = round($blendStrength * 9.4);
$bpDark1 = round($blendStrength * 5.9);
$bpDark2 = round($blendStrength * 2.5);
$bpDark3 = round($blendStrength * 1.2);
$ic0 = blend2hexcolors($backgroundColor, $shadowColor, $bpDark0);
$ic1 = blend2hexcolors($backgroundColor, $shadowColor, $bpDark1);
$ic2 = blend2hexcolors($backgroundColor, $shadowColor, $bpDark2);
$ic3 = blend2hexcolors($backgroundColor, $shadowColor, $bpDark3);
// defaults for width and height in case getimagesize call fails
if (($overrideWidth > 0) && ($overrideHeight > 0)) {
$width = $overrideWidth;
$height = $overrideHeight;
}
else {
$width = 100;
$height = 100;
if ($size = @getimagesize($imgURL)) {
@list($width, $height, $type, $attr) = $size;
// uncomment these lines to constrain image at the same time to a given size
/*
if (($width > 400) || ($height > 400)) {
constrain_img($width, $height, 400, 400);
}
*/
}
}
$sdABS = abs($shadowDistance) + 4;
$ew1 = $width + 2;
$eh1 = $height + 2;
$ew2 = $width + 3;
$eh2 = $height + 3;
$ew3 = $width + 5;
$eh3 = $height + 5;
$ew0 = $ew1 - 5;
$eh0 = $eh1 - 5;
$useshadowDistance = $sdABS;
$shadowDistanceAlt = $sdABS-3;
$totalw = $width + $useshadowDistance + 3;
$totalh = $height + $useshadowDistance + 3;
$o1 = 1;
$o2 = 2;
return "<div style=\"width:".$totalw."px;height:".$totalh."px\">
<div style=\"position:relative;top:".$shadowDistanceAlt."px;left:".$shadowDistanceAlt."px;background-color:#".$ic3.";width:".$ew3."px;height:".$eh3."px\">
<div style=\"position:relative;top:".$o1."px;left:".$o1."px;background-color:#".$ic2.";width:".$ew2."px;height:".$eh2."px;\">
<div style=\"position:relative;top:".$o1."px;left:".$o1."px;background-color:#".$ic1.";width:".$ew1."px;height:".$eh1."px;\">
<div style=\"position:relative;top:".$o2."px;left:".$o2."px;background-color:#".$ic0.";width:".$ew0."px;height:".$eh0."px;\">
".$href_link."<img src=\"".$imgURL."\" alt=\"".$alt."\" style=\"position:relative;top:-".$sdABS."px;left:-".$sdABS."px;border:1px solid #".$shadowColor.";\" ".$onclick."width=\"".$width."\" height=\"".$height."\">".$href_link_after."
</div>
</div>
</div>
</div>
</div>";
} else return "";
}
if (!function_exists("constrain_img")) {
function constrain_img(&$width, &$height, $max_width, $max_height) {
if ($width == 0)
$x_ratio = 9999999;
else
$x_ratio = $max_width / $width;
if ($height == 0)
$y_ratio = 9999999;
else
$y_ratio = $max_height / $height;
if ( ($width <= $max_width) && ($height <= $max_height)) {
return 0;
}
else
if (($x_ratio * $height) < $max_height) {
$height = ceil($x_ratio * $height);
$width =$max_width;
}
else {
$width = ceil($y_ratio * $width);
$height=$max_height;
}
return 0;
}
}
if (!function_exists("getimagecolor")) {
function getimagecolor($fname) {
$name = explode(".", strtolower($fname));
$allowedExtensions = 'jpg jpeg gif png';
$currentExtensions = $name[count($name)-1];
$extensions = explode(" ", $allowedExtensions);
for($i=0; count($extensions)>$i; $i=$i+1){
if($extensions[$i]==$currentExtensions) {
$extensionOK=1;
$fileExtension=$extensions[$i];
break;
}
}
if($fileExtension == "jpg" OR $fileExtension=='jpeg'){
$i = ImageCreateFromJpeg($fname);
}elseif ($fileExtension == "gif"){
$i = ImageCreateFromGIF($fname);
}elseif ($fileExtension == 'png'){
$i = imageCreateFromPNG($fname);
}
$w = imagesx($i);
$h = imagesy($i);
$r = 0;
$g = 0;
$b = 0;
for ($x=0;$x<$w;$x++) {
for ($y=0;$y<$h;$y++) {
$rgb = imagecolorat($i,$x,$y);
if (($fileExtension == "gif") || ($fileExtension == 'png')) {
$rgb = imagecolorsforindex($i, $rgb);
$r_c = $rgb["red"];
$g_c = $rgb["green"];
$b_c = $rgb["blue"];
}
else {
$r_c = $rgb >> 16;
$g_c = $rgb >> 8 & 255;
$b_c = $rgb & 255;
}
$r += $r_c;
$g += $g_c;
$b += $b_c;
}
}
$pxls = $w * $h;
if ($pxls == 0)
return "#808080";
else {
$r = dechex(round($r / $pxls));
$g = dechex(round($g / $pxls));
$b = dechex(round($b / $pxls));
if(strlen($r) < 2) {
$r = 0 . $r;
}
if(strlen($g) < 2) {
$g = 0 . $g;
}
if(strlen($b) < 2) {
$b = 0 . $b;
}
return "#" . $r . $g . $b;
}
}
}
if (!function_exists("blend2hexcolors")) {
function blend2hexcolors($color1, $color2, $amount_of_2) {
$color1 = str_replace('#', '', getcolorofname($color1));
$color2 = str_replace('#', '', getcolorofname($color2));
$c1R = hexdec(substr($color1,0,2));
$c1G = hexdec(substr($color1,2,2));
$c1B = hexdec(substr($color1,4,2));
$c2R = hexdec(substr($color2,0,2));
$c2G = hexdec(substr($color2,2,2));
$c2B = hexdec(substr($color2,4,2));
$R = str_pad(dechex(round(((($amount_of_2 * $c2R) + (100 - $amount_of_2) * $c1R)/100), 0)), 2, "0", STR_PAD_LEFT);
$G = str_pad(dechex(round(((($amount_of_2 * $c2G) + (100 - $amount_of_2) * $c1G)/100), 0)), 2, "0", STR_PAD_LEFT);
$B = str_pad(dechex(round(((($amount_of_2 * $c2B) + (100 - $amount_of_2) * $c1B)/100), 0)), 2, "0", STR_PAD_LEFT);
return $R.$G.$B;
}
}
if (!function_exists("getcolorofname")) {
function getcolorofname($colorname) {
global $colornames;
if (!isset($colornames))
$colornames = getcolornames();
$re = $colorname;
foreach ($colornames as $key=>$value) {
if (strtolower($key) == strtolower($colorname)) {
$re = $value;
break;
}
}
return $re;
}
}
if (!function_exists("getcolornames")) {
function getcolornames() {
$r = array();
$r["Aliceblue"]="#F0F8FF";
$r["Antiquewhite"]="#FAEBD7";
$r["Aqua"]="#00FFFF";
$r["Aquamarine"]="#7FFFD4";
$r["Azure"]="#F0FFFF";
$r["Beige"]="#F5F5DC";
$r["Bisque"]="#FFE4C4";
$r["Black"]="#000000";
$r["Blanchedalmond"]="#FFEBCD";
$r["Blue"]="#0000FF";
$r["Blueviolet"]="#8A2BE2";
$r["Brown"]="#A52A2A";
$r["Burlywood"]="#DEB887";
$r["Cadetblue"]="#5F9EA0";
$r["Chartreuse"]="#7FFF00";
$r["Chocolate"]="#D2691E";
$r["Coral"]="#FF7F50";
$r["Cornflowerblue"]="#6495ED";
$r["Cornsilk"]="#FFF8DC";
$r["Crimson"]="#DC143C";
$r["Cyan"]="#00FFFF";
$r["Darkblue"]="#00008B";
$r["Darkcyan"]="#008B8B";
$r["Darkgoldenrod"]="#B8860B";
$r["Darkgray"]="#A9A9A9";
$r["Darkgreen"]="#006400";
$r["Darkkhaki"]="#BDB76B";
$r["Darkmagenta"]="#8B008B";
$r["Darkolivegreen"]="#556B2F";
$r["Darkorange"]="#FF8C00";
$r["Darkorchid"]="#9932CC";
$r["Darkred"]="#8B0000";
$r["Darksalmon"]="#E9967A";
$r["Darkseagreen"]="#8DBC8F";
$r["Darkslateblue"]="#483D8B";
$r["Darkslategray"]="#2F4F4F";
$r["Darkturquoise"]="#00DED1";
$r["Darkviolet"]="#9400D3";
$r["Deeppink"]="#FF1493";
$r["Deepskyblue"]="#00BFFF";
$r["Dimgray"]="#696969";
$r["Dodgerblue"]="#1E90FF";
$r["Firebrick"]="#B22222";
$r["Floralwhite"]="#FFFAF0";
$r["Forestgreen"]="#228B22";
$r["Fuchsia"]="#FF00FF";
$r["Gainsboro"]="#DCDCDC";
$r["Ghostwhite"]="#F8F8FF";
$r["Gold"]="#FFD700";
$r["Goldenrod"]="#DAA520";
$r["Gray"]="#808080";
$r["Green"]="#008000";
$r["Greenyellow"]="#ADFF2F";
$r["Honeydew"]="#F0FFF0";
$r["Hotpink"]="#FF69B4";
$r["Indianred"]="#CD5C5C";
$r["Indigo"]="#4B0082";
$r["Ivory"]="#FFFFF0";
$r["Khaki"]="#F0E68C";
$r["Lavender"]="#E6E6FA";
$r["Lavenderblush"]="#FFF0F5";
$r["Lawngreen"]="#7CFC00";
$r["Lemonchiffon"]="#FFFACD";
$r["Lightblue"]="#ADD8E6";
$r["Lightcoral"]="#F08080";
$r["Lightcyan"]="#E0FFFF";
$r["Lightgoldenrodyellow"]="#FAFAD2";
$r["Lightgreen"]="#90EE90";
$r["Lightgrey"]="#D3D3D3";
$r["Lightpink"]="#FFB6C1";
$r["Lightsalmon"]="#FFA07A";
$r["Lightseagreen"]="#20B2AA";
$r["Lightskyblue"]="#87CEFA";
$r["Lightslategray"]="#778899";
$r["Lightsteelblue"]="#B0C4DE";
$r["Lightyellow"]="#FFFFE0";
$r["Lime"]="#00FF00";
$r["Limegreen"]="#32CD32";
$r["Linen"]="#FAF0E6";
$r["Magenta"]="#FF00FF";
$r["Maroon"]="#800000";
$r["Mediumaquamarine"]="#66CDAA";
$r["Mediumblue"]="#0000CD";
$r["Mediumorchid"]="#BA55D3";
$r["Mediumpurple"]="#9370DB";
$r["Mediumseagreen"]="#3CB371";
$r["Mediumslateblue"]="#7B68EE";
$r["Mediumspringgreen"]="#00FA9A";
$r["Mediumturquoise"]="#48D1CC";
$r["Mediumvioletred"]="#C71585";
$r["Midnightblue"]="#191970";
$r["Mintcream"]="#F5FFFA";
$r["Mistyrose"]="#FFE4E1";
$r["Moccasin"]="#FFE4B5";
$r["Navajowhite"]="#FFDEAD";
$r["Navy"]="#000080";
$r["Oldlace"]="#FDF5E6";
$r["Olivedrab"]="#6B8E23";
$r["Orange"]="#FFA500";
$r["Orangered"]="#FF4500";
$r["Orchid"]="#DA70D6";
$r["Palegoldenrod"]="#EEE8AA";
$r["Palegreen"]="#98FB98";
$r["Paleturquoise"]="#AFEEEE";
$r["Palevioletred"]="#DB7093";
$r["Papayawhip"]="#FFEFD5";
$r["Peachpuff"]="#FFDAB9";
$r["Peru"]="#CD853F";
$r["Pink"]="#FFC8CB";
$r["Plum"]="#DDA0DD";
$r["Powderblue"]="#B0E0E6";
$r["Purple"]="#800080";
$r["Red"]="#FF0000";
$r["Rosybrown"]="#BC8F8F";
$r["Royalblue"]="#4169E1";
$r["Saddlebrown"]="#8B4513";
$r["Salmon"]="#FA8072";
$r["Sandybrown"]="#F4A460";
$r["Seagreen"]="#2E8B57";
$r["Seashell"]="#FFF5EE";
$r["Sienna"]="#A0522D";
$r["Silver"]="#C0C0C0";
$r["Skyblue"]="#87CEEB";
$r["Slateblue"]="#6A5ACD";
$r["Snow"]="#FFFAFA";
$r["Springgreen"]="#00FF7F";
$r["Steelblue"]="#4682B4";
$r["Tan"]="#D2B48C";
$r["Teal"]="#008080";
$r["Thistle"]="#D8BFD8";
$r["Tomato"]="#FF6347";
$r["Turquoise"]="#40E0D0";
$r["Violet"]="#EE82EE";
$r["Wheat"]="#F5DEB3";
$r["White"]="#FFFFFF";
$r["Whitesmoke"]="#F5F5F5";
$r["Yellow"]="#FFFF00";
$r["Yellowgreen"]="#9ACD32";
return $r;
}
}
?>
What Can this CSS shadow web form do?
If you need a shadow for an image that doesn't require using any graphics library calls, you can simply use this form to generate the HTML for any image you might have. Creates a smoothly blended shadow for your images without using any Flash, JavaScript, or PHP graphics rendering calls. The trick is creative use of CSS style properties to define the shadow using <div> elements with different sizes and colors. The function automatically calculates the width and height for any JPG, GIF, or PNG images, but does not calculate correctly for other image types as it is currently written; for these file types, you should supply the values for override width and override height.
The result is 100% valid HTML code around your image object. This unit does use some graphics library calls to get the size (and color of the image if no Background Color is specified). You can simply copy and paste the HTML to display your image with whatever shadow options that you set.
Also, after you've used the form a permalink is created - in the event that you wanted a link of this page that shows your output.
HTML Code
This area would normally display the HTML code that displays an image with a shadow, but there isn't a valid image yet. You can set the parameters for the "getImageWithCSSShadow" function call by using the form above. Be sure that the image uses a valid and full URL (include "http://").
Source Code for this CSS shadow
You could also download the source code for the tool and use the code to create different shadow effects for images dynamically.
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.