14

Earlier I added an image to enhance a question. To do so, I took a screenshot, and added a drop shadow to help make the image stand out.

It would be great if there was an option to have SO include a CSS drop shadow around images, even if a lesser non-CSS3 substitute was needed for older browsers.

The "Add an image" dialog could be updated with a checkbox that gives the shadow option.

A minor enhancement to the site, but perhaps a worthwhile one?

EDIT: I failed to mention the compelling reason. It's so that images with white backgrounds don't blend in. It makes the image pop out and be easily distinguished from the surrounding content.

If you imagine the image in the linked question without the shadow, the presence of the image would be much less clear.

For example, this...

enter image description here

compared to this...

enter image description here

To try it out, users of an up-to-date version of Chrome, and I think IE9, should be able to drop the following into the address bar to apply the CSS shadow to the first image...

javascript:$('img[src$="Kzr6T.png"]').css({boxShadow:'0 0 14px #555'})

If the javascript: part disappears, you'll need to type it in manually. Firefox doesn't allow JavaScript from the address bar anymore, so you'd need the developer console.

Improve this question
9
  • 2
    What would make this worthwhile? We don't have text colors either.
    – user176326
    Commented Jan 13, 2012 at 22:30
  • 3
    @simchona: Because if (for example) you look at the question I linked, without the shadow, the image would blend into the background. That's usually the reason for including one. A border would probably do just as well.
    – user176859
    Commented Jan 13, 2012 at 22:40
  • 3
    This is a fair point, screenshots of the same SE site especially are impossible to visually distinguish from the post's text.
    – user154510
    Commented Jan 13, 2012 at 22:59
  • Those are some seriously fuzzy fonts you've got there.
    – sarnold
    Commented Jan 14, 2012 at 1:57
  • @sarnold - Part of the problem with the fonts is that the images have been scaled in the browser down to the width of the text area (640px) from their original width (714px).
    – Zhaph - Ben Duguid
    Commented Jan 17, 2012 at 9:57
  • Hehe @Wont you are hilarious :-P
    – Naftali
    Commented Feb 29, 2012 at 20:53
  • great idea, but I see no need for a workaround -- just put the (option for a) css3 dropshadow, and if you view the page in IE7, then that's your problem
    – Adam Rackis
    Commented Feb 29, 2012 at 20:54
  • @AdamRackis: I tend to agree, though I'm pretty sure it would also exclude IE8.
    – user176859
    Commented Feb 29, 2012 at 21:14
  • @amnotiam - I assumed as much, but didn't feel like looking it up. IE8 really is the IE6 of today
    – Adam Rackis
    Commented Feb 29, 2012 at 21:18

3 Answers 3

Reset to default
16

In such cases my solution is to put the image inside of a block quote, so the outline is clearly visible:

Personally, I also like to center it with non-breaking spaces, but that's hacky and probably unreliable:

             

For cases like this and for general aesthetics I'd appreciate a feature that displayed an image centered, and with a background or border, but I think it's unlikely to happen.

Improve this answer
1
  • I think that's a good solution for now. I think it would look nicer with a border or shadow, but your solution does solve the problem of the white backgrounds blending together.
    – user176859
    Commented Jan 13, 2012 at 22:46
4
+100

It doesn't necessarily have a drop shadow, but I think this is a good idea. My workaround has always been putting a 5% dark yellow layer on every image I upload, but it's dreary to do. Putting the image into a block quote takes away some space, and shifts it to the right.

Improve this answer
2
  • Agreed. Anything to distinguish the image from the surrounding content. I've used a shadow because I've got a little utility that does it quickly, but certainly something else could be used instead.
    – user176859
    Commented Jan 17, 2012 at 15:10
  • Blam! A hundie to the right answer!
    – user1228
    Commented Mar 5, 2012 at 15:18
4

I'm not sure we need drop shadows everywhere, but the option to put a border around an image should be present. The blockquote workaround works but it is a horrible hack.

This would be so easy to accomplish with CSS. Why not, when uploading an image, allow me to check a box that says put a border around it? Maybe even have the box checked by default?

enter image description here

Better yet, allow the markdown / WYSIWYG editor to have options to put borders around images.

Improve this answer

You must log in to answer this question.