Text Reflecting with CSS?

All

While 开发者_开发技巧designing some new site, I’ve decided to use some text reflections on the header in my designs

I’ve already created the header using @font-face and I didn’t want to create an header image, so i want to reflect it via css

Webkit has a reflection property: http://www.webkit.org/blog/182/css-reflections/

It's not supported anywhere else though, and to be honest, I've seen no movement in the 2 to 3 years since it was announced from any other vendors.

You could emulate the effect by using a canvas tag, but to be honest, unless the content is dynamic, you are probably better off using an image.

.customTextStyle {
    -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}