SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Shadow for star image .. possible?

    Hi,

    I have some PNG images star shape, I want to drop shadow via css3, but the shadow showing around the transparent area as box, not on the start corners ?

    is it possible with css3 ? how, can you show example please!

    Thx

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Sorry if this is wrong, but I don't think CSS3 can do that. I'd be looking at Photoshop for that.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    CSS cant really do this. ( though is NOT supported by IE by the way, but what else is new?) , the box-shadow property does what it says it put a shadow around the box. You could try this tho... if you have a font which has a star as part of one of its glyphs ... and give that a text shadow. you will have to use the @fontface property , just to make users can see your specific font. Again this solution is not very cross browser friendly

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I believe it can be done, using border tricks, rotations, AP and CSS3 shadows. Phew! But... what's the point? I'm sure you can manage to add shadows to the png image instead, more easy and more productive.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see ... then stick to old method .. photoshop ^^

  6. #6
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote an article on how to make a css3 star. You could fake the drop shadow with a fuzzy grey star offset underneath.

    CSS 3 Star Mandala Tutorial Cybertramp Web Design



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
  •