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.
Related Content:
- Handling the people side of Agile
Get answers to why “going Agile” isn’t as easy as it sounds, what some prerequisites are for the shift, and what you can do about... - HBAs finally getting some respect
- Fixing RRV bucket corruption error
Rate the above post
Save it! But it should be 2 separate rules: outer-shadow and inner-shadow.
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 http://developer.yahoo.com/yui/examples/container/tooltip.html.
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?
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.
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.
@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.
@ragjunk: That’s what the blur radius is for.
@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.
@rasmusfl0e, @MattCoz thanks for the reminder. I keep forgetting about rgba() because I don’t get to use it yet. Someday.
@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 :(
@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. ;)
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!
@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.
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.
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.
@GregHouston What other browsers are there?