Image drop shadow

AusQB · 05-14-2009, 10:56 AM

I can easily add a drop shadow to an image in Photoshop, but I'm looking for a more efficient and adaptable method for adding a drop shadow without editing the image.

I tried using this tutorial, but I want the shadow to be centered, not at an angle, meaning you would see all four edges/corners of the shadow image.

Any ideas?

mezangath · 05-14-2009, 11:08 AM

You can simply create a div with transperancy and place it underneath what you want to shadow, though, the layout may come out suffering due to this, it doesn't look very good.

But that tutorial isn't that bad.
HTML:

HTML Code:

<div id="shadow"></div>
<div id="normal"> everything you want to write and such, is a wonderfull freedom, so gief cookies.</div>

CSS:

HTML Code:

#normal, {
	position:absolute;
	margin-left:-150px;
	left:50%;
	top:65px;
	width:300px;
	height:400px;
	z-index:10;
	background-color: #FFFFFF;
	padding-left:4px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:2px;
}
#shadow {
	z-index:9;
	position:absolute;
	left:50%;
	top:72px;
	background:#000000;
	width:305px;
	height:400px;
	margin-left:-140px;
	filter:alpha(opacity=20);
	-moz opacity: .20;
}

Something like that. I used this one one page a while back, so i'm not quite sure how i structured it. But, maby it'll give you some ideas

emopoops · 05-24-2009, 10:29 AM

no. theres a REALLY good paint.net plugin that does that. its the paint.net forum that has it its awesome.... really awesome.

05-14-2009, 10:56 AM	#1
AusQB Silver Member Join Date: Jul 2008 Location: Perth, Australia Posts: 167	Image drop shadow I can easily add a drop shadow to an image in Photoshop, but I'm looking for a more efficient and adaptable method for adding a drop shadow without editing the image. I tried using this tutorial, but I want the shadow to be centered, not at an angle, meaning you would see all four edges/corners of the shadow image. Any ideas? __________________ RGG Web Designs

05-14-2009, 11:08 AM	#2
mezangath Silver Member Join Date: Mar 2009 Location: Stockholm, Sweden Posts: 108	You can simply create a div with transperancy and place it underneath what you want to shadow, though, the layout may come out suffering due to this, it doesn't look very good. But that tutorial isn't that bad. HTML: HTML Code: <div id="shadow"></div> <div id="normal"> everything you want to write and such, is a wonderfull freedom, so gief cookies.</div> CSS: HTML Code: #normal, { position:absolute; margin-left:-150px; left:50%; top:65px; width:300px; height:400px; z-index:10; background-color: #FFFFFF; padding-left:4px; padding-right:0px; padding-top:0px; padding-bottom:2px; } #shadow { z-index:9; position:absolute; left:50%; top:72px; background:#000000; width:305px; height:400px; margin-left:-140px; filter:alpha(opacity=20); -moz opacity: .20; } Something like that. I used this one one page a while back, so i'm not quite sure how i structured it. But, maby it'll give you some ideas __________________ Nerdrage Mezangath Web

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-24-2009, 10:29 AM	#3
emopoops Banned Join Date: May 2009 Posts: 66	no. theres a REALLY good paint.net plugin that does that. its the paint.net forum that has it its awesome.... really awesome.