Log in

View Full Version : 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:


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

Then just give images that class name:


<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:

<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:

.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>):

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:

<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 :confused:
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>
jscheuer1
01-07-2007, 05:13 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 :confused:

Not impossible:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadow {
border:1px solid silver;
padding:2px;
font:10pt arial;
display:inline;
background-color:white;
position:relative;
top:20px;
z-index:1;
}
.shadow2 {
overflow:hidden;
background-color:black;
position:absolute;
filter:alpha(Opacity=20);
opacity:0.2;
-moz-opacity:0.2;
-khtml-opacity:0.2
}
</style>
<script type="text/javascript">
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+'px'
newSd.style.height = a[i].offsetHeight+'px'
newSd.style.left = a[i].offsetLeft + 4+'px'
newSd.style.top = a[i].offsetTop + 4+'px'
document.body.appendChild(newSd)
}
}
}
</script>
</head>
<body>
<div class="shadow">Test 1</div>
<br><br><div class="shadow">Test Number 2</div>
</body>
</html>
jscheuer1
01-07-2007, 05:51 AM
Oh, and while we are on the subject, there is tons of stuff available on the web about this:

http://www.google.com/search?client=opera&rls=en&q=css+drop+shadow&sourceid=opera&ie=utf-8&oe=utf-8
mburt
01-07-2007, 03:20 PM
The example I gave isn't horrible though, and it works. So I see no reason why anyone shouldn't use it.
mburt
01-07-2007, 03:27 PM
I've made an improvement, it now works with any tag with the class "shadow".
Ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadow {
border:1px solid silver;
padding:2px;
font:10pt arial;
display:inline;
background-color:white;
position:relative;
top:20px;
z-index:1;
}
.shadow2 {
overflow:hidden;
background-color:#D0D0D0;
position:absolute
}
</style>
<script type="text/javascript">
onload = function() {
var a = document.all
for (var i = 0;i < a.length;i++) {
if (a[i].className == "shadow") {
var newSd = document.createElement("DIV")
newSd.className = "shadow2"
newSd.style.width = a[i].offsetWidth+'px'
newSd.style.height = a[i].offsetHeight+'px'
newSd.style.left = a[i].offsetLeft + 4+'px'
newSd.style.top = a[i].offsetTop + 4+'px'
document.body.appendChild(newSd)
}
}
}
</script>
</head>
<body>
<a href="#" class="shadow">Test 1</a>
<br><br><div class="shadow">Test Number 2</div>
<br><br><i class="shadow">Test</i>
</body>
</html>
mburt
01-07-2007, 03:29 PM
Argg.. Nevermind, I forgot, document.all only works in IE... I can't remember the same keyword for FF...
Should it be something like this:

var a = document.all ? document.all : document.getElementById
:confused:
jscheuer1
01-07-2007, 06:47 PM
var a=document.all? document.all : document.getElementsByTagName('*');

Note: I'm not sure if these are exactly equivalent but, for the purpose at hand, they will be. There is also a document.allTags or something like that which is supported only by IE and perhaps other document.all compatible browsers.
mburt
01-07-2007, 07:05 PM
Oh man, thanks jscheuer, how did you come up with that? Anyways, at least now it's working :p
mburt
01-08-2007, 12:39 AM
Found this in DD's CSS section. It produces an almost identical solution:
http://www.dynamicdrive.com/style/csslibrary/item/css-drop-shadows/
No javascript.
jscheuer1
01-08-2007, 12:45 AM
That's what I am talking about, there are so many ways. An all css method is best for obvious reasons, that is why I am against javascript solutions. There are some more elaborate css solutions that yield a more dramatic or natural looking shadow.
mburt
01-08-2007, 12:47 AM
Personally, I just found making a DHTML script easier to make then a CSS script (not my strongest area). But I agree, CSS is better in this case.
mburt
01-08-2007, 12:49 AM
Now I have a more 3-d look for it:

<html>
<head>
<script type="text/javascript">
var depth = 5 // in pixels
onload = function() {
var a = document.all? document.all : document.getElementsByTagName('*');
for (var i = 0;i < a.length;i++) {
if (a[i].className == "shadow") {
for (x = 0;x < depth;x++) {
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 + x
newSd.style.top = a[i].offsetTop + x
document.body.appendChild(newSd)
}
}
}
}
</script>
<style type="text/css">
.shadow {
border:1px solid silver;
padding:2px;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}
.shadow2 {
overflow:hidden;
background:black;
position:absolute;
filter:alpha(Opacity=15);
opacity:0.2;
-moz-opacity:0.2;
-khtml-opacity:0.2;
z-index:0
}
</style>
</head>
<body>
<div class="shadow">Test 1</div>
<br><br><div class="shadow">Test Number 2</div>
<br><br><a href="#" class="shadow">Link Test</a>
</body>
</html>
I think it's pretty cool :)
chechu
01-08-2007, 04:47 PM
http://galaxydefense.ga.funpic.org/web_design/shadow.htm

Something I found in this forum. Suits me perfectly !
mburt
01-08-2007, 07:17 PM
http://galaxydefense.ga.funpic.org/web_design/shadow.htm
Lol, that's my script (with a couple of modifications), which I just posted