Surfin' Safari

CSS Reflections

Posted by Dave Hyatt on Tuesday, April 29th, 2008 at 1:07 pm

WebKit now supports reflections in CSS. Continuing the trend of using adorable baby photos to make features appear more impressive, let me introduce Kate again. :)

A reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.

-webkit-box-reflect: <direction> <offset> <mask-box-image>

<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

Reflections will update automatically as the source changes. If you hover over links, you’ll see the hover effect happen in the reflection. If you reflect the <video> element, you will see the video playing in the reflection.

Giving an element a reflection has the effect of creating a stacking context (so it joins opacity, masks and transforms). The reflection is non-interactive, so from the point of view of hit testing, it’s like it isn’t there. The reflection will have no effect on layout (other than being part of a container’s overflow), and can be thought of as similar to box-shadow in this respect.

The example above uses a gradient mask. Here is the sample code:

<img src="bubbles.jpg" style="border:5px solid white;-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));">

30 Responses to “CSS Reflections”

  1. jeffr Says:

    Thank you sir. Thank you.

  2. reaktivo Says:

    You guys rock!, this is awesome, … I read someplace that you were planing on adding css variables, is that true?

  3. Daniel Ruiz Says:

    The recent work that the webkit group has done with gradients, masks, and now reflections is great but I have to question the proprietary coding method. As a front-end developer web standards are everything, the closer that everyone sticks to the standards the easier my work and the more money in my pocket, there is a reason why WaSP came into being and why we have a W3C. In time the other browsers will catch up and do we really need a -webkit -moz and whatever IE maybe, way of coding the same thing. Just a thought.

  4. Dave Hyatt Says:

    @Daniel, there is nothing wrong with adding properties to CSS as long as they are vendor-prefixed. Firefox, Opera and Safari all have dozens of these properties. The prefix signals that the property is a custom extension that could change in future releases.

    WebKit is more than just a browser engine. It is used for user interface on OS X. It is used on the iPhone. These features are of tremendous benefit to people developing using WebKit in contexts other than Web browsers.

    In addition all of the features have been designed with degradability in mind. You can use them on your Web site to add subtle decorative effects that, although they won’t appear in other browsers, will not interfere with the ability of someone to use the Web site in those other browsers.

    Finally these features will be proposed to the CSS WG for inclusion in a future standard.

  5. Pingback from WebKit nightly supporte la génération automatique de reflets:

    [...] Lire le post sur Surfin’ Safari. [...]

  6. smilespray Says:

    It looks great, and I take on board your comment about WebKit != Safari.

    …but does this mean that you guys now have enough time on your hands to work on drop shadows and metal bevelled spinning 3D logos?

    Are there no bigger fish to fry?

  7. Dave Hyatt Says:

    @smilespray, the WebKit team works on many things at once (everything from site compat to performance to accessibility to HTML5). The team is actively working on many projects in parallel right now. I’m just often the only one who blogs about what I’m doing. :)

  8. xfodder Says:

    having browser specific css properties certainly isn’t new … hopefully the changes implemented into webkit will be picked up by the w3c for inclusion into css3 and html5

  9. Pingback from Something Witty Goes Here:

    [...] 2008-04-29 – CSS Reflections [...]

  10. David Smith Says:

    I think people underestimate *dramatically* just how much work is going into WebKit, and how many people work on it. cia.vc indicates that more than 18,000 commits have been made in the last 2 years. Stuff like this is the tiny (but awesome) tip of the iceberg.

    http://cia.vc/stats/project/WebKit has a running log of commits, for those interested, as does http://trac.webkit.org/

    As you can see, most of them are totally unrelated to features like this.

  11. Rik Says:

    This is cool stuff but i’m wondering why choosing above/below instead of top/bottom ? Looks more in harmony with the rest of CSS.

  12. eAi Says:

    Well, it’d be nice if other people could blog here, perhaps just to say what they’re working on. Even if it’s boring, it’d give us a more well-rounded view of the different aspects that people are working on rather than the view you get from the blog currently of a load of (great) flashy off-spec features… I’m not remotely complaining about these features, I’d just like to see what everyone else is up to :)

  13. Maciej Stachowiak Says:

    You’ll see more soon about other new features.

  14. jeffr Says:

    Maciej, I am excited.

  15. Rams Says:

    I was going to say “Can’t we get rotation and transforms as well…” then I realized that I’d seen a div rotation demo here before and looked it up… transforms and skews are there already too. Wow! You guys are really outdoing yourselves with Webkit! Keep up the great work. Any idea when we might see a few of the newer features like gradients and 100% Acid3 in Apple’s Safari release? What kind of lead time do you typically see between implementation and release?

  16. squareman Says:

    To echo what’s been said about “proprietary” CSS properties and dispell any FUD around that. Using a vendor specific prefix (“-webkit-border-radius”, “-moz-border-radius”, “-o-background-size”) is actually a W3C standard.

    The point of the vendor specific prefixes is to let other rendering engines know that the property can be safely ignored without throwing any error. It’s also, as previously stated, so that the CSS author uses them with the full knowledge that they are using a property that is either proprietary, experimental, or not fully baked (but still planned by the W3C).

    See http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords for more details

    Now properties like “zoom” and “filter”? Those are proprietary and don’t follow any W3C standard. Gee, I wonder who uses those?

  17. Gee4orce Says:

    I’m excited to read about all these great additions to Webkit’s CSS support. It leaves me wondering, has anyone developed a ‘showcase’ site that utilises (preferably tastefully) all these new features ? I’d work on one if I wasn’t so busy with other things….

  18. Amtiskaw Says:

    Dave, this isn’t exactly related to CSS reflections, but is it possible Webkit could include a way to clip the border image of a box so that the content area is not drawn? This would be most useful when using CSS gradients as border images, because currently there is no way to stop the drawing over the whole box. This way you could specify a gradient for a curved border and a gradient for the fill.

  19. Pingback from Max Design - standards based web design, development and training » Some links for light reading (30/4/08):

    [...] CSS Reflections [...]

  20. Visited Says:

    1) If we have an element with overflow:auto, and the scrollbar will show up. Will we see it on the mirror too?

    2) Will this work with inline elements? If we have two lines of texts, where will the mirrored lines show up? First line – first line’s mirror maybe under the second line?

    3) If we have an image with a mirror effect inside a div with a mirror effect? What will happen?

  21. Dave Hyatt Says:

    @Visited,

    1) Yes
    2) It will work on inline replaced elements (and inline blocks). It will not work on inline flows like links and spans. (We don’t currently support transforms on inline flows.)
    3) The image and its mirror will show up in the div’s mirror.

  22. TereNovo Says:

    This is all great, but a large goal should be contacting W3C and getting them to implement all of these recent CSS properties into the new versions of HTML and CSS. What’s the point of all this work if only the people with the latest version of Safari/WebKit can even see it? Even the current version of Safari can’t render this. What about Firefox and Opera? Those all have huge browser shares. If only a tiny fraction of the web browsing world can see these new features, shouldn’t a main goal be to expand all of these to everyone?

  23. Dave Hyatt Says:

    @TereNovo, I refer you to my first comment (#4 in the list), since apparently you didn’t bother to read it.

  24. JAB Creations Says:

    In my honest opinion Webkit has made the most progress and in the shortest span of time though I have had difficulty being able to track KHTML (as Linux-heads need to put a complete end to the need to go in to the console for people who are not working on the OS itself).

    While I do use Firefox (nightly builds usually towards the mid to late part of development) as my default browser hardly a day goes by when I don’t have Opera or Safari open along side it. While Gecko has some decent CSS3 support Webkit clearly has the lead; properties matter most to me as a Web Designer.

    As I design and develop my own website I have been trying to make use of CSS3 when and where it’s supported. When I debut Version 2.8 Preview VI people will be able to register and add their own custom CSS and JavaScript though that won’t be for a while. However there is currently a bit of CSS3 support for Gecko and Webkit. I really can’t wait to get some time to see how I could implement some of the latest CSS3 features (this one I may add to the gallery section of my website for example). CSS animation is one of the goodies I look forward to implementing for example.

    Any way there are already plenty of CSS3 features added to my site that work really great in Safari, cookie based without the need for registration. :-)
    http://www.jabcreations.com/blog/?prompt=options-basic&css3=1

    Keep up the great work folks!

  25. reaktivo Says:

    @Jab Creations, what exactly is your site about? IMHO I think your site is way saturated, I think great web design is the one fills peoples needs, what’s the need for people to add their own css and javascript, it’s a wrong way of thinking when you expect your users to design your site so that they can enjoy using it, trying to satisfy every user will satisfy no one, I think. I hope you don’t take my comment personally.

  26. JAB Creations Says:

    @ reak, My site is how I learn things and so that I have content I center it around my interests. I cater to no one, exceptionally few people have any criticisms worth considering, and if I did take even one out of a hundred criticisms in to consideration I have made a thousandth of the progress I have.

  27. vicgundotra Says:

    Did anyone respond to Gee4orce’s question? I too am looking for a great showcase site ….

  28. edified Says:

    This reminds me of when Safari was the only browser to support drop shadows. It was like a little goodie that only the Safari users would get to see.

  29. reaktivo Says:

    @edified, I did’nt know any other browser that supported drop shadows, appart from webkit based ones, which browsers are those? thanks.

  30. Pingback from Browser Wars: Zimbra says that Safari wins! - MacTalk Forums:

    [...] the fastest browser out there and one of the more capable as well, such as the ability to support image reflections in CSS. This is a great day for the Firefox camp, pulling well over their expected downloads, but it’s [...]