I noticed a lot of visitors are arriving here looking for information on adding drop shadows to images. As I flailed helplessly at this for a long time before finally settling on a simple method, I thought I’d add a little documentation. The previous entry I had on this was a little sketchy in that department. Also, some discussion popped up regarding text wrap at the excellent Learning Moveable Type site, so I thought I would elaborate on my method for handling images.
First off, you need to go to A List Apart and read Sergio Villarreal’s excellent tutorial. Copy the two shadow files and upload into your images folder. I would only add that I couldn’t get this to work unless I used a complete URL path to the shadow background images; this may be a quirk of my Moveable Type installation. Don’t change any of the values; this method uses negative border values to “pull” the image and background image slightly out of alignment with each other. It also contains a built-in hack that plays well with “cough”Microsoft“cough” non-compliant browsers, which is why there are two background images.
You’ll need to add a new .img-shadow class to your CSS file. I still also have .floatimgleft for those times when a shadow isn’t needed, such as using images that already have their own shadow or frame. Change your image URL path to reflect your own domain as shown in the code below:
.img-shadow {
float:left;
background: url(http://your.domainhere.com/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://your.domainhere.com/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
And then in your blog entry, wrap the div tag around the img tag. In practice, I have a small text file that’s pre-loaded with the following HTML, and I just paste the code into it from the “show me the HTML” popup after uploading the image:
UPDATE: Now that I’m using Firefox, I’ve got snippets of code pre-loaded in a plug-in called BBCode, although I may be upgrading THAT plugin soon. Anyway, I currently handly drop shadows that need to be cleared differently, because the clear:both style doesn’t work well with the current 3 column structure on the main index page. So to get it to clear, I had to add a “floatclear” style, and then wrap a clearing div aroud the drop shadow div:
.floatclear {
display:inline-block;
width:100%;
}
/* Hide from IE-mac \*/
* html .floatclear {
height:1%;
width:auto;
}
.floatclear {
display:table;
}
/* End hide from IE-mac */
The above clearing code is adapted from the one at 456 Berea St. It uses the Holly Hack, which may stop working entirely in the next version of IE/Win. Booo!
This clears the floated image if desired and subsequent text or images fall below it. Otherwise, the image floats to the left and text wraps around it on the right, which I normally do for images smaller than about 200 pixels wide. For anything wider, I include the clearing style/div.
You can get pretty elaborate – and also it’s simple to add a link to the image by selecting the img and clicking the “URL” button, as seen below (although the link in this example will just lead to the full size image).
Every now and then I goof up and the background images don’t play well with the image; it’s almost always due to a missing ” character somewhere, which is why I’ve taken to pasting from a text file rather than typing by hand. If I wanted to get really ambitious I suppose I could write a macro to handle this automagically, but I’ve got it down to a routine now.
And the end result, including obligatory “cute cat” image is below.
The cute cat is on the left.
UPDATE II: Well, hell, after switching to WordPress years ago, all DIVs got the two classes stripped and had to be fixed by hand. Still using the same method. Two wrapped DIVs, one with the class “img-shadow” and one with the class “floatclear” (which is omitted if the image is to have the text wrapped around it.
There is no reason you should need to specify your.domainhere.com for images that are hosted on your own server. Relative URL’s should be sufficent.
That’s very clever. I’ll have to make a note of it. My only concern is that DIV stuff seems to be so browser-dependent that I’d be afraid of all this stuff breaking with a new release of [fill in the blank].
Of course, I use a class for most of my img tags, anyway, and that’s just as likely to break 🙂 …
Hee! Hello, husband David and fellow blogger ***Dave. As you might suspect, David and I have had this conversation before. I just cannot get the hang of relative URLs. They never work for me and therefore I suck.
For instance, I still can’t figure out how to keep comments open longer – I thought I changed the one plug-in, but they keep closing after a few days any old how.
I hope this post is still helpful to all. I may be messing with it to add a right-floated image option, and I now have WP set up with quicktags to add either a simple drop shadow effect around selected images, or to add a float clearing div, or to add both at once.