CSS3 Shadow for star image .. possible?


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!


Sorry if this is wrong, but I don’t think CSS3 can do that. I’d be looking at Photoshop for that.

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

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.

I see … then stick to old method … photoshop ^^

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