Wednesday, April 28th, 2010

Get some box-shadow going!

Category: CSS

The following features are at-risk and may be dropped at the end of the CR period if there has not been enough interest from implementers: ‘box-decoration-break’, ‘box-shadow’.

box-shadow is back in the W3C CSS3 spec. Not only is is back, but you can now get insets:

Thanks to the CSS Ninja for the tip.

Posted by Dion Almaer at 10:10 am

1 rating from 1 votes


Comments feed TrackBack URI

Save it! But it should be 2 separate rules: outer-shadow and inner-shadow.

Comment by Bub — April 28, 2010

Of course there’s tons of interest in box shadow. Don’t you spec groups dare drop this.

Case in point look at all the dhtml overlay solutions out there and how many of them provide an underlay effect. Just think of all the code written to keep a div positioned behind another div with the same dimensions for example check out this dhtml tooltip

I long to no longer write that code or have to worry about it.

Any chance the spec will allow for setting the opacity of the shadow so it behaves like a shadow?

Comment by someguynameddylan — April 28, 2010

Drop shadows are good, but not as in the above screenshot though. The drop shadows look good only with gradient, not with a single color. At least there should be an option, so the shadows look nicer.

Comment by ragjunk — April 28, 2010

Spread and insets are already supported by all the latest versions of Firefox, WebKit, and Opera.

I’m not sure I really understand why box-shadow would be at risk, as there is obviously a lot of interest from implementers.

@someguynameddylan: No opacity value, that’s what rgba is for.

Comment by MattCoz — April 28, 2010

@bub: Good call! And at the same time throw away text-shadow to replace it with those two new properties.
@someguynameddylan: regarding opacity on shadows; just use rgba colors , eg rgba(0, 0, 0, 0.5).
@ragjunk: I pondered the examples as well – they should have thrown in at least one example with a blur-radius _not_ being 0… Though the examples do show horizontal/vertical offset and spread much clearer with the 0 radius.

Comment by rasmusfl0e — April 28, 2010

@ragjunk: That’s what the blur radius is for.

Comment by MattCoz — April 28, 2010

@bub & rasmusfl0e: I disagree, it should stay as one property, why would we need or want two? As for text-shadow, it has a completely different behavior and should remain separate.

Comment by MattCoz — April 28, 2010

@rasmusfl0e, @MattCoz thanks for the reminder. I keep forgetting about rgba() because I don’t get to use it yet. Someday.

Comment by someguynameddylan — April 28, 2010

@mattcoz: because one might want to declare the two types of shadows (inset/outset) in different places (maybe spread across different classnames). This actually touches upon the same problem that multiple background-images has; you can’t add additional background-images at a later point (with a classname for example) and you can’t remove already defined background-images from a stack… Not without redeclaring the background-images you want to keep :(

Comment by rasmusfl0e — April 28, 2010

@mattcoz: text-shadow – you’re right. I was thinking inline elements with no background-color with box-shadow. Box/inline elements with a background-color and textnode children is enough to blow my idea out of the water. ;)

Comment by rasmusfl0e — April 28, 2010

I use it a lot, but first time I hear there’s Inset ! Genius !!!
just today I thought how sad the world is without real inner shadows!

Comment by vsync — April 28, 2010

@rasmusfl0e: Ahh, yeah, I can see what you’re saying there, especially with background images… but then you’d just have the same problem with multiple outer or inner shadows.

Comment by MattCoz — April 28, 2010

If “box-shadow” support is dropped, it’ll be one of the most subtle but biggest mistakes the “spec” group could ever make. Oh spec group, are you giving us more reasons to want to go Flash? I mean, there is Away3D.

I don’t get it. How do you spec-group-guys know it’s not a necessary feature? I am telling you the truth, it’s one of the most necessary css features, as necessary as “width”.

Drop it and you’re send design back a few steps from realism. Isn’t realism what we strive for? Why drop a feature if it works simply because you have no implementers? Has it not been written that “Software entities should be open for extension but closed to modification” (Open Closed Principal). Our fathers gave us the wisdom, use it you moronic spec-group-guys.

Comment by jaysmith — April 29, 2010

I’ve been using box-shadow rather extensively lately. It’s great for buttons. Add just a touch to the button and then reduce it when the button is :active.

I use it for modals, and for list items and entire panels when they are being dragged.

The only reason it hasn’t seen more use is because it has only been implemented in gecko and webkit browsers.

Comment by GregHouston — April 29, 2010

@GregHouston What other browsers are there?

Comment by okonomiyaki3000 — April 29, 2010

Leave a comment

You must be logged in to post a comment.