CSS shadow for DIV
PHP Source Code
Download zip file of the PHP source code: css_shadow_any.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_any.php
This should create the HTML that would display a shadow for an image object based on
several parameters
html_content: If passed, will place this inside the innermost DIV for the resulting HTML
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.
Width: if supplied, will set the innermost DIV's width
Height: if supplied, will set the innermost DIV's height
Example usage with default values used for "backgroundColor", while passing some HTML content and giving a dark gray border:
$result = getCSSShadow("<p>my content</p>", "", "000000", "darkgray", 7, 14, 400, 20);
if ($result) {
echo $result;
}
*/
function getCSSShadow($html_content = " ", $backgroundColor='FFFFFF', $shadowColor='000000', $borderColor='', $blendStrength=6, $shadowDistance = 7, $Width = 0, $Height = 0) {
// border color needs to be adjusted in case it is passed as a color name
$borderColor = str_replace('#', '', getcolorofname($borderColor));
// ratios for four color blending levels
if ($html_content == "") return "";
$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 (($Width > 0) && ($Height > 0)) {
$width = $Width;
$height = $Height;
}
else {
$width = 100;
$height = 100;
}
$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;
if ($borderColor <> "") $bc_text = "border:1px solid #".$borderColor."; ";
else $bc_text = "";
if ($html_content <> " ") $html_content = '<div style="'.$bc_text.'padding:0px;margin:0px;position:relative;height:'.($height-2).'px;top:0px;left:0px;">'.$html_content.'</div>';
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;\">
<div style=\"padding:0px;margin:0px;position:relative;top:-".$sdABS."px;left:-".$sdABS."px;background-color:#".$backgroundColor.";border:1px solid #".$shadowColor.";overflow:hidden;width:".$width."px;height:".$height."px\">
<!-- your content goes here -->
".$html_content."
</div>
</div>
</div>
</div>
</div>
</div>";
}
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 effect for any HTML container object, this tool will allow you to easily create that effect with 100% valid HTML - and it does not require using any graphics library calls or stretched images. You can simply use this form to generate the HTML for any DIV area that you might have. Since it uses your dimensions to create the sizes of the subsequent shaded areas, you should just use the tool to create a DIV wrapper for each size - rather than trying to modify the resultant HTML unless you really know what you're doing.
Creates a smoothly blended shadow for your web pages 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. You should supply the values for width and height.
The result is 100% valid HTML code around your innermost DIV object. You can simply copy and paste the HTML to display your content 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 a content area with a shadow, but there arent valid parameters yet. You can set the parameters for the "getCSSShadow" function call by using the form above.
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 your web content dynamically.