Tinted Photos with CSS


For most web designers, posting an image is a one-step process: you post an image, as-is. Because a lot of designers are very, very clever, it’s becoming clear that we can do much more. Here’s an image:

We display this with the following CSS:

background: url(https://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;

How can we add some color to the photo using CSS? We typically add color to an element using background-color. Unfortunately, that won’t work here. While we can use multiple backgrounds in CSS3, we can’t use background-color that way.

Fortunately, we can use background gradients! If we code a semi-transparent gradient with only one color, it will tint our photo, like this:

background: linear-gradient(rgba(236, 254, 79, 0.3), rgba(236, 254, 79, 0.3)), url(http://straightstreetdesign.com/images/fish-tint.jpg) no-repeat 0 0;

CSS3 Box-Shadow on One Side


I’m working on a fresh design, and need a shadow…but only on one side of an element. Typically, box-shadows show up on two sides, like this:

I don’t want a two-sided shadow. I want the shadow on one side! How about this?

Not quite. Some of the shadow shows around the element.

Like magic, huh? The key is to use a negative value for the spread. The spread is the least-known part of box-shadow. There are 5 values involved in box-shadow:

  1. x-value (horizontal position)
  2. y-value (vertical position)
  3. blur
  4. spread
  5. color

It’s written like this:

box-shadow: 5px 0 2px -3px #000;

The 5px means ‘move the shadow from directly beneath the box, 5 pixels to the right. A negative value would move it left.

The 0 means ‘do not move the shadow up or down’.

The 2px means ‘blur the shadow 2 pixels in all directions’.

The -3px means ‘contract the the shadow by 3 pixels in all directions. A positive value would, of course, ‘spread out’ the shadow.

So, using a mixture of positive and negative values, we can create a shadow on any or all sides of an element. Because we can use multiple shadows on a single element, we can get as crazy as we want.