How can I place a shadow effect on an image, instead of placing a
<style="border:1 px solid #000000">
How can I place a shadow effect on an image, instead of placing a
<style="border:1 px solid #000000">
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:
Then just give images that class name:Code:.shadow { border-right:2px solid #444444; border-bottom:3px solid #444444; }
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:HTML Code:<img class="shadow" src="whatever.jpg" border="0">
shadow css image background
in Google or your favorite search engine.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
This is not really a shadow, but a fat border.
Suppose it has to be done in PhotoShop, changing the picture itself ?
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.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
What's the difference between:
And: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">
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;">
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 -
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:Then just give images that class name:
and:Code:
The HTML portion would go in the body of the page.HTML Code:
Last edited by jscheuer1; 01-06-2007 at 09:44 PM. Reason: syntax
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
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:
JavaScript (in the <head>):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 }
HTML examples: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) } } }
Code:<div class="shadow">Test 1</div> <br><br><div class="shadow">Test Number 2</div>
- Mike
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.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
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![]()
- Mike
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>
Bookmarks