Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: shadow on imgs

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default shadow on imgs

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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

  5. #5
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    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;">

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 01-06-2007 at 08:44 PM. Reason: syntax
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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

  9. #9
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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

  10. #10
    Join Date
    Dec 2006
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •