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,833
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    I removed the following CSS style and it works fine in Firefox:

    HTML Code:
    ul li:after {...}
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  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,599
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,833
    Mentioned
    73 Post(s)
    Tagged
    6 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>
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  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,599
    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 .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •