Surfin' Safari

Box Shadow

Posted by Dave Hyatt on Sunday, January 7th, 2007 at 5:22 pm

WebKit now supports the CSS3 box-shadow property (as -webkit-box-shadow). This property allows you to specify a shadow effect that will be applied to the border box of an object. The syntax of the shadow is identical to text-shadow.

Some fun facts about the feature:

(1) It works with table cells, so you can make a nice evenly spaced grid of shadowed cells.
(2) It works with first-letter and first-line, so you can create a nice raised effect on floating first-letter boxes now.
(3) It works on inline flows that span multiple lines.
(4) If you specify a border-radius, the box-shadow will respect the curvature of the border-radius.

Here’s an example of a table cell grid that has shadows on all the cells.

Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Report bugs at bugs.webkit.org.

18 Responses to “Box Shadow”

  1. serpicolugnut Says:

    As a web developer, I am looking forward to the release of Safari 3.0 w/ Leopard, and hoping that all of these CSS3 improvements make the cut. We’ve been stuck with CSS2 for way too long. It’s great to see Apple pushing the rest of the pack ahead.

  2. wootest Says:

    Something has always bugged me about one detail in how rendering engines like WebKit and Gecko implement new draft properties – nearly always they are implemented as “-webkit-*standard-property*” instead of simply “standard-property”. Is there a point to this? Is it worth enterprising web developers having to specify both “-moz-box-shadow”, “-webkit-box-shadow” and “-khtml-box-shadow” instead of simply “box-shadow” even though they are all implementing, ostensibly, the same standard property with the same format and the same semantics?

  3. ahruman Says:

    The point is that CSS3 is not finished and not yet a standard. (However, it may be worth considering something like -css3-draft-standard-property.)

  4. markus Says:

    A suggestion, actually also for the previous post, can you post screenshots too? Not everyone has the latest webkit nor Mac but would like to see how it looks. Thanks!

  5. phill Says:

    I also agree with wootest. I like the idea to drop the prefix “-webkit-” and “-moz-”. What would it hurt to have them as they should be?

  6. pauldwaite Says:

    > What would it hurt to have them as they should be?

    As I understand it, the idea is that implementations of properties that aren’t specified yet may be used to work out problems with the spec. The spec may change based on things discovered frm developers experimenting with these properties.

    As such, the final box-shadow property may be specified differently than -webkit-box-shadow, thus -webkit-box-shadow may behave in unexpected ways (e.g. like the width property behaves differently in Windows Internet Explorer 5). Using the prefix until the spec is final means that experimental code won’t break.

  7. Pingback from CSS3 . info - » WebKit developers working hard on CSS3 features - Weblog:

    [...] ing hard on new CSS3 features. Last night Dave Hyatt mailed the webkit-dev mailinglist and blogged about the fact that box-shadow is now completely supported. I've quickly created a preview page for i [...]

  8. Pingback from http://mspong.com/2007/01/09/safari-compatibility/:

    [...] i compatibility
    By Matt Spong on January 9th, 2007 in Code, Web, Tech, Apple

    WebKit.org: WebKit now supports the CSS3 box-shadow property (as -webkit-box-shadow). This property allows you to s [...]

  9. sjakelien Says:

    With all due respect, and indeed, it’s due, the following:
    Since this web site is ‘powered by WordPress’, you WebKit guys should have noticed that the text editing experience in WordPress is not as rich if you use Safari, compared to FireFox and (god forbid) IE.
    Being a software developer, it’s kind of embarassing that in some cases, I cannot support Safari, because I have to offer my customers web-based functionality that is not available through Safari.
    What I want to say is: I like the very strict, almost puritan approach of adhering to standards, but the current efforts in offering CSS3 functionality (which, as pointed out, is not even close to being a standard) could be better directed towards ensuring compatibility with de facto standards like WordPress, or TinyMCE .
    Sorry for the interruption.

  10. hyatt Says:

    We are working very hard on compatibility always. I did box-shadow by myself in a handful of hours. In this case it was trivial to add because CG provides the shadow drawing support, and the parsing of the property is identical to text-shadow. This made it quite easy to just blast it out quickly.

    When features like this land in the tree, it does not mean compatibility work is “not getting done.” I blog about these sorts of features because I like to think they are interesting. If you’d rather I sit around blogging about our compatbility fixes, I could do that, but I think it would make for a boring blog. :)

    “Today I fixed a bug where table cells incorrectly expanded to encompass floats inside an overflow:auto block with a fixed height.” Zzzzz.

    There are many many people working very hard every day on compatibility. Browsing the cited quirksmode.org page of Safari bugs with a nightly, you will notice that many of the issues have in fact been fixed.

  11. daniel Says:

    Everyone can see that you are working hard to make WebKit/Safari better every day by downloading the nightlies. Really! Correct me if I’m wrong but fixing bugs affects more pages than implementing features that are specific to WebKit. How many CSS-files contain these attributes that are unsupported by any other browser.

    Write about the bugs you fixed, too. It’s important work!

    Personally I would love to read things like: “Bug #6790 is fixed, position:fixed works now.”

    Or even better: “This week was our internal ‘Week of CSS Bugs’: We resolved all 52 bugs that have CSS in the title. (And also Bug 6790)”

  12. Andreas Amann Says:

    I am not sure I understand “(3) It works on inline flows that span multiple lines.” correctly – I tried to se t a shadow on a (which is used as a rollover popup on my Dashboard widget) using the latest nightly and it didn’t give me any shadow…

    It would be great if it worked on block divs as well so that I don’t have to resort to manually building a shadow using multiple divs around the content.

  13. Andreas Amann Says:

    Darn – there should have been a <div> in the text above…

  14. Pingback from Michael(tm) Smith » WebKit devs kicking some CSS ass:

    [...] that is, for adding outline effects to character glyphs), followed by support for the CSS3 box-shadow property. Bonus feature: While you’re over at the Surfin’ Safari blog, make sure to also chec [...]

  15. Andreas Amann Says:

    After making a very reduced test case it seems as if the box-shadow indeed works correctly on a div – I guess I will have to figure out why it was not showing up when having the full page.

    Sorry for the confusion and I like the new property – it looks great!

  16. richcon Says:

    While fixing bugs is undeniably important, I for one am glad to see the WebKit team pushing ahead with support for future standards like CSS3 and other breakthrough-but-seldom-used standards like SVG. This work is critical to the future evolution of the Web, and to testing these standards and helping to ready them for prime time. And that, combined with Gecko’s support, will (hopefully) help prod that other browser maker into supporting them as well.

    Bug fixing and adding new features are both important and need to be balanced, and as far as I can tell, the WebKit team is doing a great job at that.

  17. Pingback from Thoughts from a Redesign | K-Squared Ramblings:

    [...] bkit (with any luck, the feature will be in the next version of Safari). Really neat was box-shadow, so far only in Webkit. I was finally able to add the drop-shadows to the article and sidebar the way I [...]

  18. Pingback from Apples Safari nun auch fuer Windows - Tobbis Blog - Aktuelles über Windows, Opera & Co. gebloggt von Tobias Steinicke:

    [...] unterstützt auch CSS-Eigenschaften wie text-shadow, box-shadow, mulitple backgrounds und Media Queries, einer Eigenschaft von [...]