CSS Reflections
Posted by Dave Hyatt on Tuesday, April 29th, 2008 at 1:07 pmWebKit 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));”>
April 29th, 2008 at 2:00 pm
Thank you sir. Thank you.
April 29th, 2008 at 2:02 pm
You guys rock!, this is awesome, … I read someplace that you were planing on adding css variables, is that true?
April 29th, 2008 at 2:09 pm
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.
April 29th, 2008 at 2:15 pm
@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.
April 29th, 2008 at 2:21 pm
[...] Lire le post sur Surfin’ Safari. [...]
April 29th, 2008 at 2:21 pm
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?
April 29th, 2008 at 2:23 pm
@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.
April 29th, 2008 at 2:31 pm
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
April 29th, 2008 at 2:40 pm
[...] 2008-04-29 - CSS Reflections [...]
April 29th, 2008 at 2:41 pm
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.
April 29th, 2008 at 2:44 pm
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.
April 29th, 2008 at 4:46 pm
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
April 29th, 2008 at 4:53 pm
You’ll see more soon about other new features.
April 29th, 2008 at 5:35 pm
Maciej, I am excited.
April 29th, 2008 at 6:29 pm
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?
April 29th, 2008 at 10:41 pm
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?
April 30th, 2008 at 12:28 am
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….
April 30th, 2008 at 4:30 am
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.
April 30th, 2008 at 6:36 am
[...] CSS Reflections [...]
April 30th, 2008 at 7:05 am
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?
April 30th, 2008 at 10:22 am
@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.
April 30th, 2008 at 8:52 pm
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?
May 1st, 2008 at 1:20 am
@TereNovo, I refer you to my first comment (#4 in the list), since apparently you didn’t bother to read it.
May 5th, 2008 at 8:48 am
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!
May 5th, 2008 at 10:51 am
@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.
May 5th, 2008 at 4:25 pm
@ 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.
May 5th, 2008 at 6:30 pm
Did anyone respond to Gee4orce’s question? I too am looking for a great showcase site ….
May 7th, 2008 at 12:51 am
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.
May 7th, 2008 at 7:08 am
@edified, I did’nt know any other browser that supported drop shadows, appart from webkit based ones, which browsers are those? thanks.