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;
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:
- x-value (horizontal position)
- y-value (vertical position)
- blur
- spread
- 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.
