SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 shadow effect on opaque outlines of transparent PNG?

    In the first images that appears in the slider on this page, I've applied a drop shadow in the graphic itself. However, is it possible to apply the shadow with CSS, and have it apply only to the opaque areas of the png?

    When I try to apply box-shadow to it, it applies to the outside of the box, not the image outlines.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The box-shadow draws shadows on the image outlines. Even if your image has transparent areas, you still have a rectangular object.

    What you're looking to do is not possible with CSS. I don't know if it's possible with Javascript, though.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS box-shadow works with the box model. What it means is that it will apply styles to the box of that element. I your case box-shadow will not do what you want it to do. You can't tell your CSS to find the alpha channel in your image and some how ignore it (at least not at this time). You would have to stick to doing it in Photoshop.


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
  •