realizations on life, the web, and everything

CSS3: spread value and box-shadow on one side only

by Stephanie (Sullivan) Rewis on September 8, 2011

This morning I awakened with a question in my twitter stream from @deebeefunky. He was frustrated by the fact that when he sets a blur on box-shadow, it shows on two sides of the box. He wants it to show on only one side. Of course, that got me thinking. I did come up with one solution—it won’t work in every situation—but it may work in yours.

The spread value

There’s a little talked about value in the box-shadow property called “spread”. That value, when used, comes after the blur value and moves the shadow away from the box equally all the way around. It doesn’t add a blur, it simply spreads out in all directions. You’ll get different effects based on whether the blur value is a greater than the spread value or whether the spread is greater than the blur. The color defined will be solid right next to the box, and then blur for the rest (based on the difference between the two values). Before it gets too confusing, let’s have a look at the property:

box-shadow: (inset) x-value y-value blur spread color;

div {
-webkit-box-shadow: 0 0 6px 4px black;
   -moz-box-shadow: 0 0 6px 4px black;
        box-shadow: 0 0 6px 4px black;
}

Blur larger than spread

If the spread value has a higher value, you get a different effect with the full spread and only a little blur.

div {
-webkit-box-shadow: 0 0 4px 6px black;
   -moz-box-shadow: 0 0 4px 6px black;
        box-shadow: 0 0 4px 6px black;
}

Spread value greater than blur

Though the differences above are subtle, you can actually create some really interesting effects with this value. If you don’t move the box-shadow on the x or y axis and provide no blur value at all, you can create one, or more, multiple borders for your element.

Create the look of multiple borders

div {
border: 3px solid orange;
-webkit-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
   -moz-box-shadow: 0 0 0 3px black, 0 0 0 6px red;
         box-shadow: 0 0 0 3px black, 0 0 0 6px red;
}

Spread radius with no blur

Notice it appears there are three borders on this element. A single (orange) border was added, then a black border (created with the 3px of spread) and then a red border (the 3 px border is created by 6px of spread since you must allow for the first box-shadow). It’s unlikely you’d actually need more borders than this, but you can create an unlimited number this way. Remember that when using multiple box-shadows, the first one is applied closest to the element.

How does this apply to @deebeefunky’s question?

I’m glad you asked! Sometimes I get off track (you know, that simple little blog post you were gonna write…). The issue with box-shadow is, even if you only move the shadow on the x or y axis, you’ll see a hint of the shadow on at least two sides of your element.

div {
-webkit-box-shadow: 1px 0 2px black;
   -moz-box-shadow: 1px 0 2px black;
        box-shadow: 1px 0 2px black;
}

2px blur moved 1px on the x-axis

I came up with an idea that works as long as A) the element is a solid color and B) you’re not also using border on the element. It involves applying two box-shadows, one with spread in the same color as the box itself and another without. Like so:

div {
background: white;
-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
   -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
        box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

Use two box-shadows for a single side effect

Why does this work?

In a nutshell, what you’re doing is creating the first box-shadow (0 0 0 4px white) which doesn’t move on the X or Y axis, doesn’t provide any blur, and has the 4px of spread set in the same color as the background of the element. This basically renders it invisible but makes the element 4px wider than it was (box-shadow does NOT add to the box model, so you’re element will appear 4px closer to the elements around it as well). Remember the order I mentioned before? The first box-shadow is placed on top—or closest to the element? That’s what helps us here. The second box-shadow (0 6px 4px black) is moving 6px on the Y-axis, has 4px of blur, no spread and is black. We’ve moved this vertically—though you could use the same technique on the X-axis.

Where is the real border?

Just to illustrate why you can’t use a border with this technique, here’s a look at the addition of a red border to our previous example.

Red border shown on actual outside of box

The thing to remember when using this technique is A) you can only move on one axis— X or Y and B) your blur value cannot exceed the spread value given in the first box-shadow. If it does, you’ll start to see it peek out on the sides (an effect we were avoiding in the first place). You can, however, move as much or as little on either the X or Y axis as your effect requires. And as always, using RGBA or HSLA color values will give you a more realistic shadow if that’s what you’re after.

Update: Method Two

If you have a patterned background on the element or need to use a border, Joseph Silber had another idea in the comments below. Use a negative spread radius. Nice thinking, Joseph! Playing with this method, I came up with the following:

div {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}

Negative spread radius with equal blur value

The issue to be aware of with this method is, the negative spread value should be equal to, or greater than, the blur value or you’ll end up with a slight blur on the other two sides of the element. Also, very little of the box-shadow will show if you don’t give the X or Y a value equal to, or greater than, the blur. Otherwise, the blur is slightly hidden behind the edge of the element since the spread value is negative.

With the negative spread value, a border can be added

Notice the element isn’t “expanding” like it did using the first method (the box size is what you’d expect), but the shadow doesn’t quite go to each edge due to the negative spread value. Based on the interaction with other elements on your page, one of these two methods might just work for you!

Update Oct 2

Due to an Android bug when the box-shadow has no blur, you’ll likely want to use the second method if you want the shadow to appear on an Android device. Let’s hope they fix this one soon. (Thanks, Luís Carmona!)

Do you have a method you use to create the same effect? Share it in the comments. Happy coding!

{ 17 comments }

Firefox multi-column layout bug… and a unicorn

by Stephanie (Sullivan) Rewis on May 4, 2011

Last night, I was getting a file ready to share with Estelle Weyl, one of my co-presenters for our CSS3 workshop at SXSW11. The page was a silly little demo that used media queries, multiple backgrounds, transitions, generated content, multi-column layout and, well, a unicorn.

I had only viewed the file in Chrome since that’s the browser I used during the demo. Since we were putting it online where people could look at the code, I decided to take a peek in other browsers. Oddly enough, Firefox seems to be hacking a hairball on the multi-column layout with generated content (I’ve tested in both FFOX 4.1 and Aurora with the same result).

The generated content (.container:before) creates the layered look of the main .container div to avoid any extra, non-semantic wrappers. The bug is not triggered when the generated content is removed (either by removing the position: relative from .container—the parent to the generated content, or by removing it altogether). And it seems to have something to do with the values in the top, right, bottom, left properties of the generated content (it’s protruding on the right and tall enough that you can’t see the rounded bottom corners). My guess is that FFOX is somehow adding actual pixels to the box model (width and height), but I’ve no clue why it would.

UPDATE 5/5/11:

Thanks to Oli Studholme who identified the padding on the .container as one of the bug’s triggers. I’ve added another demo with the padding removed and filed a bug with Mozilla. If anyone identifies another piece of the bug puzzle, please post it in the comments or on the bug report.

{ 0 comments }

Changing a Background-image with CSS3 Transitions

by Stephanie (Sullivan) Rewis on March 1, 2011

As you may have read, outside of gradients, you can’t change a background-image with CSS transitions. Or can you? At InControl Conference last week, Greg Rewis spoke about Transitions, Transforms and Animations. A question was asked about showing one background-image on load and transitioning to another in a subsequent pseudo-state. You can always change the background (we do it all the time in menus on :hover), but you can’t apply sexy transitions to that change. You can, however, transition a background position change. In the first demo, I’ve created a sprite that has both background states which load with one image, and then move to the other when the pseudo-state is triggered:

CSS Transition with sprite

(Thanks for your nice use of this effect at the bottom of CSS Tricks, Chris Coyier!)

In the InControl wrap up panel, someone asked a question about creating a menu that has no background image to start, but on hover, would transition to the background image. While it’s correct that you can’t do exactly that, all good CSS’ers know there’s usually a clever work around. An idea occurred to me on stage that I’ll share here. Using a sprite again, have the starting portion of it transparent (gif or png). You can create the effect of going from no background to a background image by simply changing the background-position.

Illusion of going from no background to an background-image using CSS3 transitions.

What creative uses can you think of for CSS transitions and background images?

{ 15 comments }

CSS3 Flexible Box Model…Layout Coolness…also Oddities & Confusion

HTML5 and Video: 4 part video series

Mangled smiley in @font-face

HTML5: Native Video, DRM and Plugins

Inner border (content or padding edge) quirk in webkit?

Javascript and HTML5

Google—Your balls and periods are all wrong.