updated 2 months ago, created by André Lambert

This is a demo I made for the iPhone, but should also work in Safari. If you hover any of the pictures below it should become semi-transparant. When testing the reflection capabilities of the webkit-engine it supprised me that I didn't find any bugs. However, I can't say the same thing about border-radius. In the following test you will see how reflection mimics the original perfectly, it even reflects the bugs of border-radius very nice ;)

Note: this test is made for Webkit browsers, if this page does not look correct scroll down to the bottom. There is a printscreen of how it's supposed to look.

First a basic test: an image with a border and a reflection. Try transparancy by hovering it. The current Webkit Nightly fails on the border radius, the corners of the image seem to be above the border-radius.

Webkit screenshot:

Now lets test an imageholder (without a src) with a background image. The strange thing is there seems to be 2 borders. One border 6px border with a radius, and one 1px border without a radius. Also notice there is some weird stuff going on at the outer edges of the border radius. Anti-alias issue?

Webkit screenshot:

The next one comes really close. This is a div with a backgroundimage. The only thing that's not perfect is the pixels (anti-alias) on the outer edges of the border-radius.

Webkit screenshot:

The next example, an iframe with an image inside it, is very similar to the first example. The image-corners seem to rise above the border-radius.

A div with an image inside it seems to behave the same as the iframe and standalone image.

Let's test some text, this is an h1 with a border radius and reflection. Everything seems fine to me.

Text in a heading

Also a div with reflection including an h1 works.

The final test is overlaying the various images, it looks prety good for reflection if you ask me.

If your browser does not support border-radius or reflection, this is how it looks in the latest Webkit:

The images used in this example came from Stock.XCHNG.