Tag Archive for shadow

snippets | May 17, 2013
No comments

CSS3 Shadow properties

/* X Y Size Color */
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

text-shadow: 2px 2px 5px #ccc;

source

Category: Uncategorized | Tags: , , , ,
snippets | April 28, 2013
No comments

How to give shadow to a div using css

HTML:
<div class="box-outer">
<div class="box-inner">
text

</div>
</div>

CSS:
.box-inner {
position:relative;
top:-3px;
left:-3px;
height:150px;
background:#aa0000;
}
.box-outer {
width:150px;
height:150px;
background:#333;
}

source

Category: Uncategorized | Tags: , ,
snippets | April 24, 2013
No comments

How to give text shadow using css

Here is a simple way to give shadow to a text using css.

HTML:
<div id="wrapper">
<span class="firstlayer">Text with shadow using CSS</span>
<span class="secondlayer">Text with shadow using CSS</span>
</div>

CSS:
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #aa0000;
position: absolute;
top: 120px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 122px;
left: 22px;
z-index: 0;
}

source

Category: Uncategorized | Tags: , ,
snippets | April 6, 2013
No comments

Box Shadow

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

source

Category: Uncategorized | Tags: , , ,
snippets | September 19, 2012
No comments

PHP Create Drop Shadow on Image

<?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" =&gt; 255, "g" =&gt; 255, "b" =&gt; 255);

$src = isset($_REQUEST['src']) ? urldecode($_REQUEST['src']) : null;
if(isset($src) &amp;&amp; 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" =&gt; ($background["r"] / DS_STEPS), "g" =&gt; ($background["g"] / DS_STEPS), "b" =&gt; ($background["b"] / DS_STEPS));

/* calculate and allocate the needed colors */
$current_color = $background;
for ($i = 0; $i &lt;= 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 &lt; 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);
}
?>

source

Category: Uncategorized | Tags: , ,
snippets | May 8, 2012
No comments

CSS Drop Shadow

****************
***** CSS ******
****************

.dropShadow {
position:relative;
z-index:1;
}

/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }

.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0;			/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px;		/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0;		/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px;	/*shadow positioned top-left*/
}

/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }

/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }

/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}

****************
***** HTML *****
****************

<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">

<img src="birdhouse4.gif">

</div>
</div>

source

Category: Uncategorized | Tags: , , , , ,
snippets | May 7, 2012
No comments

Image-less Dropshadow

#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}

#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}

#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}

#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}

.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}

#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}

.o1 {opacity: .5;filter: alpha(opacity=50);}

.o2 {opacity: .4;filter: alpha(opacity=40);}

.o3 {opacity: .3;filter: alpha(opacity=30);}

.o4 {opacity: .20;filter: alpha(opacity=20);}

.o5 {opacity: .10;filter: alpha(opacity=10);}

/* For connecing the shadow in 2 corners */

.mv1 {margin-top: 0px;padding-bottom: 7px;}

.mv2 {margin-top: 1px;padding-bottom: 5px;}

.mv3 {margin-top: 2px;padding-bottom: 3px;}

.mv4 {margin-top: 3px;padding-bottom: 1px;}

.mv5 {margin-top: 4px;padding-bottom: 0px;}

.m1 {margin-left: 1px;padding-right: 8px;}

.m2 {margin-left: 2px;padding-right: 6px;}

.m3 {margin-left: 3px;padding-right: 4px;}

.m4 {margin-left: 4px;padding-right: 2px;}

.m5 {margin-left: 5px;padding-right: 0px;}

/*
ds = dropshadow

ch = child
pa = parent

o = opacity
m = margin
mv = margin vertical

*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css"  media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>

source

Category: Uncategorized | Tags: , , , , , , , , , , , , , , , , ,
snippets | April 20, 2012
No comments

dropshadow

var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.angle = 25;
shadow.alpha = 0.5;
shadow.blurX = 8;
shadow.blurY = 8;

fav.filters = [shadow];

source

Category: Uncategorized | Tags: , , ,
snippets | February 7, 2012
No comments

drop a shadow and outline the text.

<script>
<!–

var message=”Both”;
var thickness=1;
var color2=”black”;
var color1=”white”;
var color3=”gray”;
var extra=”font-size:40px;”;
var range=5;
var z = range;
var d = range;
var x = -thickness;
var y = -thickness;

while (y<=thickness) {
while (x<=thickness) {

document.write (”<span style=’”+extra+” color:”+color2+”; position:absolute; left:”+x+”; top:”+(-y)+”;’>”+message+”</span>”);
document.write (”<span style=’”+extra+” color:”+color2+”; position:absolute; left:”+x+”; top:0;’>”+message+”</span>”);
document.write (”<span style=’”+extra+” color:”+color2+”; position:absolute; left:”+x+”; top:”+y+”;’>”+message+”</span>”);

x=x+1;
}
y=y+1;
}

document.write (”<span style=’”+extra+” color:”+color3+”; position:absolute; left:”+z+”; top:”+d+”;’>”+message+”</span>”);
document.write (”<span style=’”+extra+” color:”+color1+”; position:absolute; left:0; top:0;’>”+message+”</span>”);

//–>
</script>

source

Category: Uncategorized | Tags: , , ,
snippets | February 7, 2012
No comments

drop a shadow in a text

<script>
<!–

var message=”Shadow”;
var range=2;
var extra=”font-size:40px;”;
var color1=”gray”;
var color2=”black”;
var x = range;
var y = range;

document.write (”<span style=’”+extra+” color:”+color2+”; position:absolute; left:”+x+”; top:”+y+”;’>”+message+”</span>”);
document.write (”<span style=’”+extra+” color:”+color1+”; position:absolute; left:0; top:0;’>”+message+”</span>”);

//–>
</script>

source

Category: Uncategorized | Tags: , , ,