CODEWITHSUNDEEP
htmlcssphotoshop
user686327
user686327

Reputation: 193

Best way to display a PNG with a drop shadow effect on it?

I have a PNG that has a drop shadow affect on it...Since I have to place the image in my CSS as a block, rather than the rounded rectangle that it is - how can I maintain that effect with the shadow working with the non-white background?

Right now I have a simple stroke and drop shadow effect to it per here:

https://i.sstatic.net/AT52R.png

I have read about shell commands, but is there a CSS property that will allow me to allow my block to look like this? Thanks!

Upvotes: 2

Views: 749

Answers (1)

Bojangles
Bojangles

Reputation: 101483

But wait! You can do this entirely without images. Example here. It's not completely cross browser (IE < 9 won't handle rounded corners or box shadow), but it's very close to what you want. Just play around with some values to fine tune it.

div
{
    width: 300px;
    height: 100px;
    border: 3px solid #0088ff;
    border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    padding: 10px;
    box-shadow: 5px 5px 5px 5px #888;
    -ms-box-shadow: 5px 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px 5px #888;
}

In terms of IE compatibility, there's a good solution here. There are more comprehensive docs on the site, but essentially you download pie.htc, put it in your root folder and add behavior: url(pie.htc) in your CSS file.

Upvotes: 5

Related Questions