shadow on imgs

**chechu** · 12-30-2006, 08:56 PM

How can I place a shadow effect on an image, instead of placing a
<style="border:1 px solid #000000">

**jscheuer1** · 12-30-2006, 09:44 PM

This is really more of css question. There are several ways. IE has a proprietary filter. There are javascripts for shadow effects but, I think those are a poor choice.

Depending upon how dramatic you want the shadow to be, you could just use simple css:

Code:

.shadow {
border-right:2px solid #444444;
border-bottom:3px solid #444444;
}

Then just give images that class name:

HTML Code:

<img class="shadow" src="whatever.jpg" border="0">

There are elaborate methods using css and nested divisions with background images around your image or other element that can produce striking results. These can usually be found on the web by searching for something like:

shadow css image background

in Google or your favorite search engine.

**chechu** · 01-01-2007, 09:02 AM

This is not really a shadow, but a fat border.
Suppose it has to be done in PhotoShop, changing the picture itself ?

**jscheuer1** · 01-01-2007, 10:00 AM

That's another way but, it adds overhead (bytes to each image) to the page. As I said, there are various ways. It depends upon how much overhead and/or detailed code you want to use. A good method is css that employs background images with container divisions. It is a bit complex to use but, can use minimal, reusable images for the shading effect, adding little overhead to the page. A drawback to this is that if there are other dynamic effects on the images, it might conflict with them or just look odd.

**chechu** · 01-06-2007, 03:48 PM

What's the difference between:

Code:
.shadow {
border-right:2px solid #444444;
border-bottom:3px solid #444444;
}Then just give images that class name:

HTML Code:
<img class="shadow" src="whatever.jpg" border="0">

And:

Code:

<style="border-top:1 px solid #000000; border-left:1 px solid #000000; border-right:2 px solid #000000; border-bottom:1 px solid #000000;">

**jscheuer1** · 01-06-2007, 05:58 PM

The primary difference (aside from the fact that the definitions are a bit different) is that one is inline style and the other is for use in a stylesheet. The inline style="" statement holds only for that element. The definitions in the stylesheet will apply to all elements with the class "shadow".

Also, in your example, the inline style is meaningles as, it is attached to nothing.

Notes: This artifact from the forum quoting does not belong -

Then just give images that class name:

and the style definitions shown with it belong in a stylesheet, either on the page in its head or linked to its head. These are also artifacts of the forum quoting and don't belong either:

Code:

and:

HTML Code:

The HTML portion would go in the body of the page.

**mburt** · 01-06-2007, 07:54 PM

Hmm.. Just fiddling around with this a bit, so here's what I have. It takes all the DIV's with the class "hover" and loads a semi-transparent shadow behind it.
CSS:

Code:

.shadow {
border:1px solid silver;
padding:2px;
font:10pt arial;
display:inline;
background:white
}
.shadow2 {
overflow:hidden;
background:black;
position:absolute;
filter:alpha(Opacity=20);
opacity:0.2;
-moz-opacity:0.2;
-khtml-opacity:0.2
}

JavaScript (in the <head>):

Code:

onload = function() {
for (var i = 0, a = document.getElementsByTagName("DIV");i < a.length;i++) {
	if (a[i].className == "shadow") {
		var newSd = document.createElement("DIV")
		newSd.className = "shadow2"
		newSd.style.width = a[i].offsetWidth
		newSd.style.height = a[i].offsetHeight
		newSd.style.left = a[i].offsetLeft + 4
		newSd.style.top = a[i].offsetTop + 4
		document.body.appendChild(newSd)
		}
	}
}

HTML examples:

Code:

<div class="shadow">Test 1</div>
<br><br><div class="shadow">Test Number 2</div>

**jscheuer1** · 01-06-2007, 10:11 PM

mburt, needs a little tweaking (add pixel units in the script to location and dimensions for compatibility, and add z-index and position in the style area for proper stacking) and will break down in complex layouts. That is a javascript solution and I do not recommend those for shadow effects for these and other reasons like, "What about javascript disabled browsers?" But, it does work, sort of.

**mburt** · 01-07-2007, 02:46 AM

Regarding the z-index, it's impossible to make the first one lap over the shadow. .shadow2 has position:absolute, which automatically makes it on top, no matter what the z-index is

**Kenny** · 01-07-2007, 03:33 AM

To be sure, you'd have to create with an image editor or take a screen capture as an image. Here's some script that uses IE filters...

<DIV id="zCan" style="background:#E3FBFB;width:400;height:71;border:1px solid gray;overflow:hidden;text-align:center">
<span id="ztext" style="position:relative; top:8px; left:0px; z-index:2; font-style:italic; font-weight:bold; font-size:42px; font-family:times new roman; color:red;"> Text or image </span>
<span id="zshadow" style="position:relative; top:-40px; left:1px; z-index:1; font-style:italic; font-weight:bold; font-size:42px; font-family:times new roman; FILTER: progid:DXImageTransform.Microsoft.Blur( PixelRadius=2,MakeShadow=true,ShadowOpacity=0.5) ; height:100%; width:100%;color:#999999">Text or image</span>
</DIV>

Thread: shadow on imgs

Thread Tools

Search Thread

shadow on imgs

Bookmarks

Bookmarks

Posting Permissions