SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Whats the best way to add a shadow image to multiple images?

    Hi there, I'll jump right to the code then write below what I want to do...

    Code:
    div#content {
    	width: 900px;
    	margin: 0 auto;
    }
    div#content img {
    	float: left; 
    	margin-right: 10px;
    	margin-bottom: 10px;
    	background-color: #FFF;
    	border: 1px solid #666;
    	padding: 10px;
    }
    div#work { 
    	background: url(heading_work.png) no-repeat;
    	width: 100px;
     	height: 25px;
     	margin: 20px auto;
    }
    Code:
    <div id="content">
    <div id="work"></div>
    <a href=""><img src="icon.png" alt="" width="264" height="198" /></a>
    <a href=""><img src="icon.png" alt="" width="264" height="198" /></a>
    <a href=""><img src="icon.png" alt="" width="264" height="198" /></a>
    <div class="clear"></div>
    </div>
    In the HTML code, I'm gonna have more images.. so 3 in each row, probably 3 more rows, anyways, as it sits I like it but I want to add a shadow to the bottom of each image. What would be the best way to go about adding one to each image. Thanks for any help.

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    You can give the images a "box-shadow" (Internet Explorer: IE9+; other browsers: no problem), for instance:
    Code:
    div#content img {
       ...
       box-shadow: 3px 3px 3px #C0C0C0;
    }


    See for more about the box-shadow property: www.css3.info/preview/box-shadow, or css3generator.com, or Google box-shadow.

  3. #3
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol, CSS3 makes it so easy. What would be the alternative if I wasn't using css3?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by jlisec01 View Post
    lol, CSS3 makes it so easy. What would be the alternative if I wasn't using css3?
    Put a <div> around each anchor and put a background image of the shadow in that div. Assuming you provide user feedback by coloring the image borders (or outlining the image), the anchor coloring will remain around the image and not outside of the shadow.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This is a very old demo (about 10 years old) but shows how to use a transparent image around an image and will work back to IE6.

    As mentioned above you just add an element around the image (if there's nothing else suitable) and apply the shadow to that element. You can make space with padding or just shift the image over the background with negative margins.

    If your image doesn't have a border then you could add 10px padding to the image and apply a background image to the image itself without the need for an extra container.

  6. #6
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for your help, what do you think about this... It works for me but I just want to make sure the code looks good... I wrapped the images with divs and I just set a width and a height to that div then positioned the shadow to the bottom.

    Code:
    #content { width: 900px; height: 480px; margin: 0 auto; border: 1px solid #90F; }
    
    #gallery { }
    
    #gallery .shadow { 
    	width: 290px; 
    	height: 230px; 
    	background: url(thumbnail_shadow.png) bottom no-repeat; 
    	float: left; 
    	margin-right: 10px; 
    }
    #gallery img { background-color: #FFF; padding: 10px; border: 1px solid #666; }
    Code:
    	<div id="content">
        	<div id="gallery">
                <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
                <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
                <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
                
                <div style="clear:both;"></div>
    
    	    <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
                <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
                <div class="shadow"><img src="thumb.png" width="264" height="198" /></div>
                
                <div style="clear:both;"></div>
    
            </div>
        </div>
    Thanks again for both your help.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The code doesn't make sense to me. And where did the anchors go? What is your objective?

    Please click on the link at the bottom of my post and read the part about posting your code as a working page from doctype to </html>. That way, we should be able to see exactly what you see. You might mention the browser(s) in which you are viewing the samle, too.

    I could throw something up that would work, but I'd prefer that you take the lead and present your needs a bit more clearly.

    Thanks

  8. #8
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The code doesn't make sense to me. And where did the anchors go? What is your objective?

    Please click on the link at the bottom of my post and read the part about posting your code as a working page from doctype to </html>. That way, we should be able to see exactly what you see. You might mention the browser(s) in which you are viewing the samle, too.

    I could throw something up that would work, but I'd prefer that you take the lead and present your needs a bit more clearly.

    Thanks
    What happened was I created a new page and forgot to add the links to the images, here's the entire page... I thought it would be easier to just post the css and the html section that I needed help on but I believe I'm using the latest version of Firefox... Anyways, I want to be able to have this look almost identical on IE browsers, maybe 6 +... As for the shadow, is that way practical? Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing</title>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    
    body { background: url(background.png) repeat; }
    
    #content { width: 900px; height: 480px; margin: 0 auto; border: 1px solid #90F; }
    
    #gallery { position: relative; top: 20px; left: 6px; }
    
    #gallery .shadow { 
    	width: 290px; 
    	height: 230px; 
    	background: url(thumbnail_shadow.png) bottom no-repeat; 
    	float: left; 
    	margin-right: 10px; 
    }
    #gallery img { background-color: #FFF; padding: 10px; border: 1px solid #666; }
    </style>
    </head>
    
    <body>
    	<div id="content">
        	<div id="gallery">
                <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
                <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
                <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
                
                <div style="clear:both;"></div>
    
                <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
                <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
                <div class="shadow"><a href=""><img src="icon_discourse_thumb.png" width="264" height="198" /></a></div>
                
                <div style="clear:both;"></div>
    
            </div>
        </div>
    </body>
    </html>

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Which of these images more closely reflects the layout that you wish?

    ImagesWithBoxShadows1.gif - ImagesWithBoxShadows2.gif

    I would like to suggest that you reconsider how seriously you want to support IE6 and 7. They are not even on the charts any more. Far more attention is being given to fluid and responsive sites these days because that is where the customers are.

  10. #10
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Which of these images more closely reflects the layout that you wish?

    ImagesWithBoxShadows1.gif - ImagesWithBoxShadows2.gif

    I would like to suggest that you reconsider how seriously you want to support IE6 and 7. They are not even on the charts any more. Far more attention is being given to fluid and responsive sites these days because that is where the customers are.
    Yea I guess your right about that. The shadow I have will just be at the bottom of the div it wont wrap around the sides. Thanks for your help.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Your last post sounds like you are finished asking questions here.
    Nevertheless... Shadow at the bottom:

    ImagesWithBoxShadows3.gif

    A suggestion for the future (wherever you may go for assistance)... when you post a request for help, post a working page that should render the same in the helper-bee's browser as it renders in yours. In this case, without your images or a screen shot showing how your code looks in your browser, we can only guess based on what you say you want (and most descriptions are notoriously incomplete ).

    The following is a screen shot of how your posted code renders on my PC in FF (just so you understand that one can only guess at how you intend for it to look).

    ImagesWithBoxShadows0.gif

    BTW - This is a good test to see how the page would look if an image or all images cannot be found on the server, or if the user has images turned off.

  12. #12
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks... well I still wanted to know if my CSS code looked correct for adding the shadow at the bottom. Anyways, about providing a working page... I'll definitely have one next time, I tried to be most descriptive as possible, sorry about that.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by jlisec01 View Post
    Thanks... well I still wanted to know if my CSS code looked correct for adding the shadow at the bottom.
    Yes, that is the right place for the boxShadow image. Go for it.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Based on your code, give this a try:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1173683-Whats-the-best-way-to-add-a-shadow-image-to-multiple-images
    Thread: Whats the best way to add a shadow image to multiple images?
    Oct 18, 2013, 20:00
    jlisec01
    -->
        <title>image with shadow</title>
        <style type="text/css">
    body {                /* The universal selector * is not recommended */
        padding:0;
        margin:0;
    }
    #content {
        text-align:center;
        border:1px solid #90F;
        margin:0 auto;
    }
    #gallery {
        display:inline-block;
        vertical-align:top;
        *display:inline;   /* ie7 and under inline-block hack */
        *zoom:1.0;         /* "  " */
        overflow:hidden;
    }
    #gallery .shadow {
        float:left; 
        background:url("thumbnail_shadow.png") 50% 100% no-repeat;
        padding-bottom:10px;
        margin:0 5px; 
    }
    #gallery a {
        display:block;
    }
    #gallery img {
        display:block;
        background-color:#FFF;
        border:1px solid #666;
        padding:10px;
    }
        </style>
    </head>
    <body>
    
    <div id="content">
        <div id="gallery">
            <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
            <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
            <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
            <div style="clear:both;"></div>
            <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
            <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
            <div class="shadow"><a href="#"><img src="http://placehold.it/264x198/bdf" alt="" width="264" height="198"/></a></div>
        </div>
    </div>
    
    </body>
    </html>


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
  •