Can You Add a Non-Square Drop Shadow to Png Content with CSS

Can you add a non-square drop shadow to PNG content with CSS?

It's definitely possible.

Using filters, sample:

img { 
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}

Getting square box-shadow around transparent background PNG. How do I curve a css shadow around an image?

its not possible with CSS. Use image sprite & change background position on hover.

Here is the working fiddle

CSS: Is it possible to put shadow onto the outline of a background-less PNG image?

The new CSS filters will allow you to do this but browser support is not super deep.

Codepen Example

<div class="image">
<img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="Sample Image" />
</div>

.image img {
width:400px;
-webkit-filter: drop-shadow(4px 4px grey);

}

how to set shadow for round image(css)

CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.

UPDATE:

Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.

CSS Filters to create a solid border around an object

Update Oh look I did something!... My answer still stands

So, it sounds like the question you're really asking is "How can I add a stroke to a non-square image using CSS", and my answer would be - you can't. As you've found out, it looks like webkit is able to achieve some nice affects with filter, but that won't work on Firefox or IE, so I don't really see the point in exploring filters further (unless you're entire audience are using Webkit/Blink).

My suggestion would just be to edit the images yourself. Perhaps you could recruit a server-side library such as GD or ImageMagick (probably bad solutions, but that's all I know for PHP) to handle the automation.



Related Topics



Leave a reply



Submit