Blog Photos Drop-Shadows

For as long as I have been writing web pages, I have always wanted a easy-to-use Drop-Shadow routine for my included images and photos. I had considered modifying the photos to include the shadow, but that pollutes the photo archives for other uses. Also, modifying the photos means that any photo downloaded or expanded (into another window), would unnecessary contain the included shadow.

Thanks to a Google Search, . . . I finally found a solution!

It is a simple CSS Snippet that is easily included in my Blog Template, and it can also be used with other web pages with style sheets.

 An Example of an Image Frame Drop-Shadow

I am pleased with the results, it makes the photos stand out. But, I hope viewers do not find the Drop-Shadows distracting.

With Blogger it is simple to add (or override) the current Blog Template. Image Drop-Shadows can be added via the following snippet. Note, the Current Blog Template stays intact, with no modification necessary.

Design --> Blogger Template Designer --> Advanced --> Add CSS

.post img {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 6px 4px 8px #A0A0B0;
-webkit-box-shadow: 6px 4px 8px #A0A0B0;
-goog-ms-box-shadow: 6px 4px 8px #A0A0B0;
box-shadow: 6px 4px 8px #A0A0B0;
margin-right: 12px;
margin-bottom: 4px;
padding: 0px;
}

For this blog, the above overrides the current ".post img" style for each image or photo of the posts. A simple edit allows it to be added, removed, or modified as I see fit.

I hope others will also find this useful.


UPDATE:
Apparently this does not work for Internet Explorer, I will have to continue research.

--