Creating a generic display that looks appealing with a wide variety of images

Question

I feel like this looks ugly. The box shadow above the image blends really well with some images - generally with images that have a lot of color or are white - but with others it looks horrible.

The code:

box-shadow: 0 -2px 6px -2px rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, 0.2);

What would you guys recommend to fix this issue? As I can't exactly restrict what images are uploaded to the website, I would rather make it so everything looks great.

(I think this is a good fit for GD because it is related to how I am displaying the images (CSS, HTML) rather than editing the images to make them look better.)

Answer 1

If you can set things up so that there's a 1 pixel transparent black stroke that's added to the interior of the image area, you mind find it works better with a wide variety of images.

I used black at 40% opacity for the stroke in the examples above.

I don't know the best way to do this using CSS. Maybe a second div that's 1px smaller on all sides, with a border? There's probably quite a few methods you could use.

Answer 2

You could try to add a "frame" around the image by setting a 1px border (maybe the same grey as your outer border) and adding a 1px margin to create a separate white border between. This will appear as a "double" border, and with the white border part, it will make the shadow stand out in a way similar to the image where the background is already white.

Use rounded corners at top and square corners on bottom to make it follow the outer border.

Example for your image where I have just added the extra border:

The css code for the image would be something like this:

img.product_sample
{
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-top-radius: 3px;
  margin: 1px; /* Causes the background color of the container work as an extra border */
}

An alternative is to just have the white border. This will give no visible difference to your original version when the image content background is white:

img.product_sample
{
  border: solid 1px white;
  border-top-radius: 3px;
  margin: 0px;
}

Answer 3

Hoping for a "generic" decoration like this that will work equally well with all possible shades and color of images is being a bit over-optimistic. The saving grace is that you probably aren't going to be showing these in isolation. The viewer will "get the idea" from the ones where the shadow is nicely visible and appealing, and will ignore it thereafter. It's the merchandise that is the focus of interest and what they'll be concentrating on.

In general, though, where you have to deal with highly variable items over which you have not control (and can't predict) it's best to keep things as simple as possible. You won't lose anything by omitting that top shadow completely, and you'll avoid the "blurry image" effect in your example.The shadow below works to give a little dimensionality to the "card," and you can control that background.

Answer 4

Try this CSS

box-shadow: 0 -2px 5px -2px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);

this add a little inner-shadow to look better on darker background.

Working demo: http://jsfiddle.net/Sm97x/