www.webdeveloper.com
Results 1 to 3 of 3

Thread: drop shadow in shape of image

  1. #1
    Join Date
    Oct 2013
    Posts
    26

    drop shadow in shape of image

    I am using an image for the background of my links to make them stand out on the page, i am trying to make a drop shadow appear beneath the image instead of the box containing the link, The image is a PNG with a transparent background so it doesnt have a squared off shape, i just want to know if it is possible to make the drop shadow appear attached to the image instead of the box.

    here is the HTML

    HTML Code:
    <br /><ul class='nav'>
         <li class='header'><a href='/trade.php'>Trade</a></li>
         <li class='header'><a href='/members.php'>Members</a></li>
         <li class='header'><a href='/forum/forum.php'>Forum</a></li>
         <li class='header'><a href='/index.php?view=$user'>Home</a></li> 
         <li class='header'><a href='/friends.php'>Friends</a></li>
         <li class='header'><a href='/messages.php'>Messages</a></li>
         <li class='header'><a href='/profile.php'>Edit Profile</a></li>
         </ul>
    and here is my current CSS that makes a drop shadow around the box itself instead of the image that shows.
    HTML Code:
    ul.nav li {display: inline-block;
              width: 130px;
              height: 83px;
             text-align: center;
              background-image: url('/Images/lillypad.png');
              background-size: auto;
              margin: 0 4px 0 4px;
              border-radius: 12.5px;
              font-family: 'Plants';
              font-size: 8pt;
                -moz-box-shadow:    3px 3px 5px 6px #ccc;
      -webkit-box-shadow: 3px 3px 5px 6px #ccc;
      box-shadow:         3px 3px 5px 6px #ccc;
    }
    ul.nav a {display: block;
              
              position: relative;
              padding:  30px 24px;
              border-radius: 25px;
              
    }

  2. #2
    Join Date
    May 2014
    Posts
    813
    Images aren't parsed per pixel by the browser, the 'shape' of a image is ALWAYS a square (or rounded square thanks to border-radius), regardless of the transparency/layers you've done in the image file. So ... no, what you are asking for can't be done; you want a drop shadow, you're stuck doing it in the image, not in the CSS... Thankfully since we don't have to care about IE6 looking perfect anymore you can use alpha transparency in your .png to accomplish this, though depending on the dimensions of the image the filesizes can quickly become prohibitive.

    That said -- little tip; if every like tag inside a parent element is getting the same class, NONE of them should have classes. Also seems very unlikely you would semantically have a line-break before a block level tag like UL
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Oct 2013
    Posts
    26
    OK, that's what i thought thanks, also they only all have the same class because i was testing some code and then just got lazy when copying and pasting. as you can see in the CSS i don't actually use that class.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles