What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

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.

share|improve this question
2  
What would make this worthwhile? We don't have text colors either. –  simchona Jan 13 '12 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. –  squint Jan 13 '12 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. –  Matthew Read Jan 13 '12 at 22:59
    
Those are some seriously fuzzy fonts you've got there. –  sarnold Jan 14 '12 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 Jan 17 '12 at 9:57
    
Hehe @Wont you are hilarious :-P –  amanaP lanaC A nalP A naM A Feb 29 '12 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 Feb 29 '12 at 20:54
    
@AdamRackis: I tend to agree, though I'm pretty sure it would also exclude IE8. –  squint Feb 29 '12 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 Feb 29 '12 at 21:18

3 Answers 3

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.

share|improve this answer
    
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. –  squint Jan 13 '12 at 22:46

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.

share|improve this answer
    
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. –  squint Jan 17 '12 at 15:10
    
Blam! A hundie to the right answer! –  Won't Mar 5 '12 at 15:18

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.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .