Reflection gradients using CSS in android browser

Question

I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }

• On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
• On browsers which don't support it at all, no reflection is show.

However, on Android's browser, a reflection is shown, but doesn't fade out.

Is there any way of getting Android to either:

1. fade out the reflection, or
2. not show the reflection at all.

I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.

Answer 1

Without an example file or link, it is a little difficult to see what you need.

I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.

The steps: 1.Take the image into your favorite image manipulation program (ex. Photoshop)

1. Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
2. Duplicate the layer (Photoshop-Layer/Duplicate Layer)
3. Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
4. Move the duplicated layer such that it appears as a mirror using the Move tool
5. Select the Marquis tool, and set the edge blur to about 50% of your original image width.
6. Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
7. Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
8. If desired, add a background on a layer below everything else.
9. Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.