SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    box-shadow inside image tag

    Hello,
    I'm trying to achieve an inner drop shadow effect inside an image, i have followed this guide: https://gist.github.com/715124 which seemed to acheive it nicely however if i add <a> tag to make the images hyperlinks then they will not be clickable, code can be seen here:
    http://pet-pal.co.il/test/index.html

    I wanted to ask how can i fix it and if there is any way of acheiving this effect in old browsers (ie7/8)

    Thanks.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,580
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    I removed the following CSS style and it works fine in Firefox:

    HTML Code:
    ul li:after {...}

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    then whats the point ? its needed for the shadow effect.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The fix is quite simple . What you were doing before simply won't work. You would have to choose between the shadow and the link. However if you switch up your CSS selector, you can have both . Change that li:after rule to a:after.

    Code:
    ul a:after
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,580
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Whoops , I never noticed.

    Try this:

    HTML Code:
    .XXX {width:140px;height:140px;position:relative;float:left;margin:5px}
    .XXX:after  {
    	position:absolute;top:0;left:0;bottom:0;right:0;
    	content:"";
    	-moz-box-shadow:inset 0 0 50px rgba(0,0,0,.75);
    	-webkit-box-shadow:inset 0 0 50px rgba(0,0,0,.75);
    	box-shadow:inset 0 0 50px rgba(0,0,0,.75)
    	}	
    
    
    
    <a href="/jack2" class='XXX'>
      <img src="/afiles/images/lfh.jpg" alt="" />
    </a>

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank u both for the help, it worked
    Just wondering now if there's an easy way of adding the effect to IE8/7

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have a few options .

    1) Use a hacky fix for IE7/8 which involes using filters/vendor prefixes which will have it display the same.
    2) I recommend this one. Assuming you are having a fixed height/width scenario such as above, I'd just apply it as a background image (create it in photoshop) and apply it to the <li> or something like that. Apply the code only to IE if you want. Once the browser dies out, you can remove that snippet of code and be doen with it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •